目录
AngularJs
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
AngularJs的模块
ng-app模块指明这个是一个AngularJs程序段,若无说明则不能渲染.ng-model把输入框的值绑定到一个变量(双向绑定).ng-bind把变量绑定到某个段落的Inerthtml.
AngularJs表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> AngularJs小demo</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app> <!-- 必须要注明ng-app否则不渲染 -->
{{100+100}}
</body>
</html>
AngularJs双向绑定
所谓双向绑定,其实就是把一个输入框的内容和一个变量绑定在一起,输入框的内容变化,变量也相应变化,变量变化,输入框的内容也变化。这个过程由框架完成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> AngularJs小demo</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app>
请输入姓名:<input type="" name="" ng-model="name"> <!-- 绑定变量 -->
<!-- 再显示该变量 -->
{{name}}
</body>
</html>
AngularJs初始化指令
我们可以提前把变量先初始化一个值。用ng-init=“变量=‘value’”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app ng-init="name='陈大海'">
请输入您的名字:<input type="text" ng-model="name">
{{name}}
</body>
</html>
AngularJs控制器
有时候表达式不那么清楚的表达,或者是有一些逻辑不那么清楚表达,这个时候我们就可以定义自己的模块,来解决一些问题。具体看代码有注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> AngularJs小demo</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
//建立自己的模块,ng也是一个模块
//myapp是自己定义模块的名字
var app = angular.module("myapp",[]);
//定义控制器
//两个参数,名字和功能
//$scope控制层与视图层交换数据的桥梁
//mycontroller是自己定义的控制器的名字
app.controller("mycontroller",function($scope){
//给scope类添加方法
$scope.add=function(){
//必须要添加$scope获取x,y
return parseInt($scope.x) + parseInt($scope.y); //parseInt转化成int 类型
}
});
</script>
</head>
<!-- ng-app="自己定义的模块",ng-controller="自己定义的控制器" -->
<body ng-app="myapp" ng-controller="mycontroller">
第一个数:<input type="" name="" ng-model="x">
第二个数:<input type="" name="" ng-model="y">
<!-- 视图层直接用就行了,没必要再加$scope.add()了直接add()则可 -->
{{add()}}
</body>
</html>
循环数组
这个很简单就是可以通过循环获取数组中的value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> AngularJs小demo</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myController",function($scope){
$scope.list=[102,203,394,555];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="x in list">
<td>{{x}}</td>
</tr>
</table>
</body>
</html>
AngularJs循环对象数组
再控制器中,可以定义一个列表,然后可以在视图中用循环展示出来。这个很简单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> AngularJs小demo</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myController",function($scope){
$scope.list=[
{name:'张三',math:100,yuwen:100},
{name:'李四',math:190,yuwen:123},
{name:'王五',math:100,yuwen:123},
];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr>
<td>姓名</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr ng-repeat="x in list">
<td>{{x.name}}</td>
<td>{{x.math}}</td>
<td>{{x.yuwen}}</td>
</tr>
</table>
</body>
</html>
AngularJs内置对象
$http是AngularJs常用的一个内置对象,用来发送http请求从后台获取Json数据,这段代码必须在Tomcat服务器上运行才行。data.json用来返回json数据。
data.json代码如下:
[{
"name": "张三",
"math": 100,
"yuwen": 100
},
{
"name": "李四",
"math": 190,
"yuwen": 123
},
{
"name": "王五",
"math": 100,
"yuwen": 123
}
]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>angularJs 内置服务$http</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]);
//因为要使用$http对象 所以必须依赖注入
//get是http对象中的一个类,success是get类的一个方法,
//sucess方法的参数是一个函数,response是请求的返回值,然后定义一个列表等于response.
app.controller("myController",function($scope,$http){
$scope.findList=function(){
$http.get("data.json").success(
function(response){
$scope.list=response;
}
)
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findList()">
<table>
<tr>
<td>姓名</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.math}}</td>
<td>{{entity.yuwen}}</td>
</tr>
</table>
</body>
</html>
总结
这些都是AngularJs 的最基础常用方法。AngularJs可以用来实现前后端分离。