AngularJS 通过新的属性和表达式扩展了 HTML。
angular js
ng-app:作用域
ng-init:初始化
ng-bind:绑定
ng-model:双向绑定---------脏检查
单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。
有单向绑定，就有双向绑定。如果用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。
含有ng都是指令
例：
angular是一个MVC框架：即
M------------------module 模块
V-------------------view 视野
C------------------controller控制器
一、angular开头的声明
ng-app angular作用域一般写在body标签内或者html标签内
ng-init="b=2;a=3;" 声明 （声明d=2;）
列如：
<div>
{{a}} angular声明的参数一定要放在{{}} 括号内才能解析
</div>
<div>
{{b}}
</div>
<div>
{{a+b}}
</div>
<h1>{{a}}+{{b}}</h1>
<div>
{{a*b}}
</div>
二、绑定（ng-bind）
<h1 ng-bind="b*a"></h1> h1标签内是6
三、ng-model模型
<body ng-app ng-init="a=3;b=5;">
<h1>{{a}}</h1>
<h1>{{a*b}}</h1>
<h1>{{a+b}}</h1>
<input ng-model="a" />
<input ng-model="b" />
<!--双向绑定------脏检查-->
</body>
等输出到页面的时候修改input的数整个页面从新进行运算
四、作用域：（$rootScope）对整个页面相当于全局变量
也就是只要是用$rootScope定的东西它一定是作用于全局，而其它的只是对它控制器所在的那一部分
列如：
<body ng-app="app">
{{haha}} 这里是鸣人
<div ng-controller="ctrl">
{{name}} 小潘
{{age}} 200
{{haha}} 这里是鸣人
</div>
<div ng-controller="ctrl2">
{{name}} 小西
{{age}} 188
{{haha}} 这里便是鸣人
</div>
<script>
//定义 app模块
angular.module('app',[])
.controller('ctrl',function($scope,$rootScope){
$scope.name="小潘！"
$scope.age = 200;
$rootScope.haha = '鸣人！';
})
//不同的写法，第二个参数是一个数组
.controller('ctrl2',["$scope",function($scope){
$
$scope.age = 188;
}])
</script>
</body>
</html>
五、$watch （观察看守的意思）
<body ng-controller="ctrl">
<h1>{{name}}</h1>
<input ng-model="name"/>
<script>
angular.module('app',[])
.controller('ctrl',function($scope,$timeout){
$
$scope.$watch(function(){
console.log($
scope.name)
})
setTimeout(function(){
//手动触发angular的脏检查
$scope.$apply(function(){ 请求传送
$
})
},2000) 2000是设置时间2秒后
setTimeout(function(){
console.log('-------------')
$scope.name = '佐助！';
},2000);
以上蓝色部分是不会修改其上name的因为js代码里面是没办法对其更改的
$timeout(function () {
$![]()
scope.name = "卡卡西";
}, 4000);
})
</script>
</body>
第一次是鸣人
2秒后便是小樱
4秒后变为卡卡西
六、过滤器：
lowercase 格式化字符串为小写
uppercase 格式化字符串为大写
用法：注意中间管道符 |
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ name | lowercase }}</p> 姓名为eee(转换为了小写)
</div>
angular.module('app',[])
.controller('myApp',function($scope,$timeout){
$![]()
scope.name = "EEE"
})
currency 过滤器（将数字格式化为货币格式）
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ name | lowercase }}</p> 姓名为$123,456.00(转换为了小写)
</div>
angular.module('app',[])
.controller('myApp',function($scope,$timeout){
$![]()
scope.name = "123456" 数字
})
2、date 格式化
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25
3、number 格式化（保留小数）
{{149016.1945000 | number:2}}
控制器
ng-controller:控制器
js在控制器里不执行
<body ng-app="app" ng-controller="contr">
<div>{{a*b}}</div>
<div>你好{{name}}</div>
<div ng-controller="contr1">
<h1>{{name}}</h1>
<h2>{{say()}}</h2>
<h3>{{add(5,6)}}</h3>
</div>
<script>
var app = angular.module("app",[]);//调用作用域
app.controller("contr",function($scope){//调用controller的方法 $scope是自带的
$scope.a= 3;
$scope.b= 6;
$![]()
scope.name = "世界";
});
app.controller("contr1",function($scope){
$![]()
scope.name ="霍丽荣";
$scope.say = function(){
return "有道词典";
}
$scope.add = function(a,b){
return a+b;
}
})
第二种方法
angular.module("app",[])//调用作用域
.controller("contr",function($scope){//调用controller的方法 $scope是自带的
$scope.a = 8;
$scope.b = 10;
$![]()
scope.name = "美丽";
})
.controller("contr1",function($scope){
$![]()
scope.name = "天空";
$scope.say = function(){
return "蓝天";
}
})
</script>
</body>
自定义过滤器
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>自定义过滤器</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-controller="cont">
<h1>{{name}}</h1>
<h2>{{aa | currency}}</h2><!--货币-->
<h3>{{name | gaib}}</h3>自定义过滤器
<h4>{{name | gaib | jneng}}</h4>
<script>
var app = angular.module("app",[])
app.controller("cont",function($scope){
$![]()
scope.name = "今天";
$scope.aa = 456;
})
app.filter("gaib",function(){//
return function(ele){
return ele + "好冷";
}
})
app.filter("jneng",function(){//es6写法
return (ele) => ele + "呼呼虎虎哈哈";
})
</script>
</body>
</html>
以上蓝色部分是不会修改其上name的因为js代码里面是没办法对其更改的
$timeout(function () {
$
}, 4000);
})
</script>
</body>
第一次是鸣人
2秒后便是小樱
4秒后变为卡卡西
六、过滤器：
lowercase 格式化字符串为小写
uppercase 格式化字符串为大写
用法：注意中间管道符 |
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ name | lowercase }}</p> 姓名为eee(转换为了小写)
</div>
angular.module('app',[])
.controller('myApp',function($scope,$timeout){
$
})
currency 过滤器（将数字格式化为货币格式）
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ name | lowercase }}</p> 姓名为$123,456.00(转换为了小写)
</div>
angular.module('app',[])
.controller('myApp',function($scope,$timeout){
$
})
2、date 格式化
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25
3、number 格式化（保留小数）
{{149016.1945000 | number:2}}
控制器
ng-controller:控制器
js在控制器里不执行
<body ng-app="app" ng-controller="contr">
<div>{{a*b}}</div>
<div>你好{{name}}</div>
<div ng-controller="contr1">
<h1>{{name}}</h1>
<h2>{{say()}}</h2>
<h3>{{add(5,6)}}</h3>
</div>
<script>
var app = angular.module("app",[]);//调用作用域
app.controller("contr",function($scope){//调用controller的方法 $scope是自带的
$scope.a= 3;
$scope.b= 6;
$
});
app.controller("contr1",function($scope){
$
$scope.say = function(){
return "有道词典";
}
$scope.add = function(a,b){
return a+b;
}
})
第二种方法
angular.module("app",[])//调用作用域
.controller("contr",function($scope){//调用controller的方法 $scope是自带的
$scope.a = 8;
$scope.b = 10;
$
})
.controller("contr1",function($scope){
$
$scope.say = function(){
return "蓝天";
}
})
</script>
</body>
自定义过滤器
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>自定义过滤器</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-controller="cont">
<h1>{{name}}</h1>
<h2>{{aa | currency}}</h2><!--货币-->
<h3>{{name | gaib}}</h3>自定义过滤器
<h4>{{name | gaib | jneng}}</h4>
<script>
var app = angular.module("app",[])
app.controller("cont",function($scope){
$
$scope.aa = 456;
})
app.filter("gaib",function(){//
return function(ele){
return ele + "好冷";
}
})
app.filter("jneng",function(){//es6写法
return (ele) => ele + "呼呼虎虎哈哈";
})
</script>
</body>
</html>
ng-if
判断是否正确 如果结果是true 那么就会显示 如果为false 那么就会隐藏
例：
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>ng-if</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-controller="cont">
<h1 ng-if="name">
八戒八戒傻得可爱
</h1>
<div ng-if="a<b">//隐藏 因为5不小于6
正确
</div>
<script>
var app = angular.module("app",[])
app.controller("cont",function($scope){
$
$scope.a = 5;
$scope.b = 6;
})
</script>
</body>
</html>
1、$index 循环出来的是下标
2、$first 第一个
3、$last 最后一个
4、$even 奇数行
5、$odd 偶数行
6、$middle 中间部分
以下两个可用于两个兄弟标签的循环
7、ng-repeat-start 开始
8、ng-repeat-end 结束