angular基础
控制器（Controller）
三个主要职责：1为应用中的模型设置初状态，2通过$scope对象把数据模型暴露给视图，3监视模型的变化，做出相应的动作。
var app = angular.module('my',[]); //第二个参数为依赖模型，如果没用也 必须用[ ]顶替上。 app.controller('myController',['$scope', function($scope){ $scope.name={ name:'su' }; } ]);
也可写成 app.controller('myController',function($scope){....})
但是这样写在js代码压缩后，就会出错，因为函数中的形参必须是叫$scope,压缩时会把函数中的参数$scope替换成别的字符。
ng-app
当出现多个ng-app时，angular默认只有第一个生效。
<body> <div ng-app="test1" ng-controller="show1"> <button ng-click="show1()">one</button> </div> <div ng-app="test2" ng-controller="show2"> <button ng-click="show2()">two</button> </div> <script src='bower_components/angular/angular.js'></script> <script> angular.module('test1', []).controller('show1', ['$scope', function($scope){ $scope.show1 = function(){ console.log(11); } }]) angular.module('test2', []).controller('show2', ['$scope', function($scope){ $scope.show2 = function(){ console.log(22); } }])
<!-- bootstrap有引导的意思，这段代码是说，找到第二个ng-app 并告诉它用 ‘test2’模块 --> angular.bootstrap(document.querySelector('[ng-app="test2"]'),['test2']); </script> </body>
这种做法是不推荐使用的，最好一个应用就只有一个ng-app。
下面这种做法就是推荐做法，原先是两个div，各一个ng-app，现在把这两个ng-app去掉，在他们的父元素body上加一个ng-app
<body ng-app='test'> <div ng-controller="show1"> <button ng-click="show1()">one</button> </div> <div ng-controller="show2"> <button ng-click="show2()">two</button> </div> <script src='bower_components/angular/angular.js'></script> <script> angular.module('test1', []).controller('show1',['$scope',function($scope){ $scope.show1 = function(){ console.log(11); } }]); angular.module('test2', []).controller('show2',['$scope',function($scope){ $scope.show2 = function(){ console.log(222); } }]); angular.module('test', ['test1','test2']); </script> </body>
test模块依赖test1和test2模块。
ng-bind
<body ng-app ng-init="age='xixi'"> <p>{{age}}</p> <p ng-bind="age"></p> </body>
当页面刷新时，{{age}} 会快速出现在页面，然后才被‘xixi’代替。这样子有强迫症的人看来是非常难受的，所以ng-bind就是来做这件是，先是空白，然后出现‘xixi’，ng-bind会自动转意html代码，< 转为< > 转为 > 等
ng-bind-html
如果想使html值能正常显示，出于安全着想，需应用angular-sanitize模块，来对html值进行处理，防止跨站攻击。
<body ng-app='myApp' ng-init="link='<a href=http://www.baidu.com>dd</a>'"> <p ng-bind='link'></p> <p ng-bind-html="link"></p> <script src='bower_components/angular/angular.js'></script> <script src='bower_components/angular-sanitize/angular-sanitize.js'></script> <script> angular.module('myApp',['ngSanitize']); </script> </body>
引进来的包中的模块必须成为当前模块的一个依赖才能正常使用。
ng-repeat
遍历数组
<body ng-app='myApp' > <p ng-bind='link'></p> <p ng-bind-html="link"></p> <ul ng-controller="msg"> <li ng-repeat="item in data" style="background:{{$odd ? '#666':'#fff'}}">{{item['num']}} {{item['name']}} {{item['age']}}</li> </ul> <script src='bower_components/angular/angular.js'></script> <script> angular.module('myApp',[]).controller('msg',['$scope',function($scope){ $scope.data = [ {"num":1,"name":'zhansan',"age":12}, {"num":2,"name":'lisi',"age":12}, {"num":3,"name":'wagnwe',"age":12}, {"num":4,"name":'zhaoliu',"age":12} ]; }]); </script> </body>
ng-class
ng-class="{red:true}" ,为true时表示class='red',为false则没这个类名。
<style> .red{color:red;} .green{color:green;} </style> </head> <body ng-app='myApp' > <ul ng-controller="msg"> <li ng-repeat="item in data" ng-class="{red:$odd,green:$even}">{{item['num']}} {{item['name']}} {{item['age']}}</li> </ul> <script src='bower_components/angular/angular.js'></script> <script> angular.module('myApp',[]).controller('msg',['$scope',function($scope){ $scope.data = [ {"num":1,"name":'zhansan',"age":12}, {"num":2,"name":'lisi',"age":12}, {"num":3,"name":'wagnwe',"age":12}, {"num":4,"name":'zhaoliu',"age":12} ]; }]); </script> </body>
ng-repeat遍历是，会给自动增加一些属性，如上例，$odd 为偶数，$even为奇数，$first 为第一个元素，$last为最后一个元素，$middle为第一和最后一个元素之间的所有元素，$index为下标值，从0开始。
注意：当遍历的是多维数组时，即使多个元素的值完全相同，也是可以的。但是一维数组，只要相同的值，出现两次，就会报错。
1 <body ng-app='myApp' > 2 <ul ng-controller="msg"> 3 <li ng-repeat="item in data" ng-class="{red:$odd,green:$even}">{{item['num']}} {{item['name']}} {{item['age']}}</li> 4 </ul> 5 6 <ul ng-controller="msg"> 7 <li ng-repeat="item in students track by $index">{{item}}</li> //加上track by $index，就可以遍历相同的值了。 8 </ul> 9 10 <script src='bower_components/angular/angular.js'></script> 11 <script> 12 angular.module('myApp',[]).controller('msg',['$scope',function($scope){ 13 $scope.data = [ 14 {"num":1,"name":'zhansan',"age":12}, 15 {"num":2,"name":'lisi',"age":12}, 16 {"num":3,"name":'wagnwe',"age":12}, 17 {"num":4,"name":'zhaoliu',"age":12}, 18 {"num":4,"name":'zhaoliu',"age":12}, 19 {"num":4,"name":'zhaoliu',"age":12} 20 ]; 21 $scope.students = ['张三','张三','张三']; 22 }]); 23 </script> 24 </body>
ng-class可以和表达配合，实现一些动态功能。点击下拉框的选取颜色从而改变div的颜色。
<style> #box{ width:300px; height:200px; transition:background-color 1s ease; } .red{ background-color:red; } .green{ background-color:green; } .blue{ background-color:blue; } </style> </head> <body ng-app> <select ng-model="style"> <option value="red">红色</option> <option value="green">绿色</option> <option value="blue">蓝色</option> </select> <div id='box' ng-class="style"></div> <!-- <div id='box' ng-class="{red:style=='red',green:style=='green',blue:style=='blue'}"></div> 相同效果的另外一种写法--> <script src='bower_components/angular/angular.js'></script> </body>
ng-show和ng-hide
使元素显示和隐藏
ng-if
元素是否存在。
ng-src
<img src="{{imgSrc}}"> 执行这段代码会先报个错误，然后才显示照片，因为第一次载入图片，用的是表达式当路径，当表达式解析后，第二次才能访问到图片。 ng-src 就是解决这个问题的，表达式解析好后再载入图片。