angular基礎
阿新 • • 發佈：2018-04-03
sel ng-repeat gre eas 功能 first doc clas 相同
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 就是解決這個問題的，表達式解析好後再載入圖片。
angular基礎