Angularjs
angular是一个MVC框架：即
MVC
M-----module 模块
V------view 视图层，负责展示（视野）
C------controller 业务逻辑和控制逻辑（控制器）
2、模块化
3、指令系统
4、双向数据绑定
一、指令
1、在<body>标签中写：
ng-app 作用域
ng-init=“” 初始化
{{}}解析值
例：<body ng-app ng-init="a=1;b=3"></body>
<div>{{a}}</div>
解析的值就是1，不用{{}}出来的就是原样输出
2、ng-bind 绑定
例：<div ng-bind="a"></div>
3、ng-model 双向绑定->脏检查
例：<input ng-model="a">
4、ng-repeat （重复）
指令用于循环输出指定次数的 HTML 元素。
集合必须是数组或对象。
例：
<script>
angular.module("app",[])
.controller("con",function($scope){
$scope.arr = [1,2,3,4,5,5,6,7,8,9,"name"]; //1
$scope.arr1 =[ //2
{name:"a",sex:1},
{name:"b",sex:2},
{name:"c",sex:3},
{name:"d",sex:4},
{name:"e",sex:5},
{name:"f",sex:6}
];
})
</script>
<li ng-repeat="x in arr track by $index"> //1
{{x}};
</li>
<li ng-repeat="x in arr1"> //2
{{x.name}}---{{x["sex"]}};
</li>
5、ng-if(如果)
在angularjs中ng-if和ng-show/ng-hide 都能实现Dom元素在界面的显示和隐藏。
但是两者不同，ng-if在表达式为false的情况下删除了Dom元素，ng-show在表达式为false的情况下是隐藏元素并没有删除。
例： 目前只有ng-if !!!
<div ng-if="flag">
{{name}}
</div>
<div ng-if="name">
有没有
</div>
<div ng-if="a<b">
{{name}}
</div>
<script>
angular.module("app",[])
controller("con",function($scope){
$scope.name = "jia";
$scope.flag = true;
$scope.a = 1;
$scope.b = 2;
})
</script>
二、 过滤器
uppercase 大写
lewercase 小写
currency 数字转货币
{{name | uppercase}}
| 管道字符
三、自定义过滤器
angular.module("app",[])
.controller("con",function($scope){
$scope.name="Jia";
$scope.shu = 123;
})
写法1：
.filter("tianjia",function(){
return function(a){
return a + "志龙";
};
})
写法2：
.filter("tianjia1",function(){
return (a) => a + "贾";//es6里的写法
})
1、return（） =>ele +" " es6的写法
2、return function(ele){
return ele +" "
}
四、控制器：ng-controller
例：
<body ng-app="app" ng-controller="con">
<div>{{a}}</div>
<div>{{b}}</div>
<div>{{zi()}}</div>
<div>{{jia(3,8)}}</div>
</body>
<script>
写法1：
var app = angular.module("app",[])；1、调用作用域
app.controller("con",function($scope){2、调用controller方法
$scope.a = "1";
$scope.b = "4";
$scope.zi = function(){
return "字";
};
$scope.jia = function(a,b){
return a+b
}
})
写法2：
angular.module("app",[])
.controller("con",function(){
$scope.a = "1";
$scope.b = "4";
$scope.zi = function(){
return "字";
};
$scope.jia = function(a,b){
return a+b
}
})
</script>
五、
1、$scope 作用域
2、$rootScope 根作用域
3、$watch 监督
例：$scope.$watch(function(){
console.log($scope.name);
});
4、$apply 请求
例：setTimeout(function(){
$scope.$apply(function(){
$scope.name=100;
});
},1000);
js中的setTimeout要写apply
5、$timeout
例：$timeout(function(){
$scope.name=2;
},2000);
