AngularJs学习笔记（四）
1、AngularJs中的Module可以包含哪些組件？
（1）value：保存可以在不同的controller之間共享的對象、數據
（2）constant：保存可以在不同的controller之間共享的常量
（3）service：保存可以在不同的controller之間共享的對象、數據、操作
（4）filter：可以實現對數據的過濾和格式化，date、currency、limitTo.........
（5）controller：控制器，用于設定模型數據-------每一個控制器實例都與一個$scope對象相鏈接-------注意：angular中的控制器不是單例的！每次使用都會創建一個新的對象（對應的$scope對象也是新創建的）
（6）directive：指令，用于封裝DOM操作，擴展HTML標簽及屬性-----為HTML添加新標簽、新的屬性、新的樣式
2、關于模式
23+1種模式：
一種最簡單的設計模式：單例模式------某個對象能夠且僅能夠創建一次
JS中單例模式舉例：
驗證controller不是單例的：
html代碼：
<body ng-app="myModule"><h1>驗證controller不是單例的</h1><div ng-controller="myCtr1">我是第一個controller</div><div ng-controller="myCtr2">我是第二個controller</div><h3><b>結論：</b>若第一個輸出為兩個undefined,而第二個輸出兩個都是非undefined，則驗證controller是非單例的(若是單例，則意味著myCtr1和myCtr2是同一個控制器，那么當第一次輸出位undefined時，后面又賦值了，那第二次應該輸出有值)</h3><script src="js/angular.js"></script><script src="js/9.js"></script> </body>對應的js代碼：
var mm=angular.module('myModule',[]); //聲明第一個控制器 mm.controller('myCtr1',function($scope){//此例中的this代表當前對象，即myCtr1console.log(this.uname+' '+this.age);this.uname='Tom';this.age=20; }); //聲明第二個控制器 mm.controller('myCtr2',function($scope){//這中的this代表myCtr2console.log(this.uname+' '+this.age); });運行結果截屏：
頁面：
console:
驗證service是單例的：
???? 結論：service,是module中的一種組件，專用于在不同的控制器對象間共享數據------任何一個service對象都是單例的-----只要一個service對象創建了，只要瀏覽器不關閉當前網頁，此對象就一直存在---且只有這樣一個對象！創建service的語法：
moduleName.service('serviceName',function(){this.xx=xxx;this.y=function(){};});驗證的html代碼：
<body ng-app="myModule"><h1>驗證service是單例的,請打開控制臺查看結果</h1><div ng-controller="myCtr1">我是第一個controller</div><div ng-controller="myCtr2">我是第二個controller</div><script src="js/angular.js"></script><script src="js/10.js"></script> </body>驗證的js代碼：
angular.module('myModule',[])//創建一個服務（注：service中的數據是不能直接在網頁上顯示，必須放在$scope中才可）.service('myService1',function(){this.emp={};}).controller('myCtr1',function($scope,myService1){//將新創建的服務注入到controller中console.log(myService1.uname+' '+myService1.age);myService1.uname='Tom';myService1.age=20;}).controller('myCtr2',function($scope,myService1){//雖然第一次輸出為undefined，但是在第一controller中//給服務又賦值了，因為其是單例的，所以在第二次輸出時有值console.log(myService1.uname+' '+myService1.age);});頁面截圖：
練習：創建兩個Controller，第一個Controller中做一個雙向綁定：<input ng-model="msg"/>,設法在第二個Controller的范圍內，顯示出前一個Controller中用戶輸入的msg??
對應的html代碼：
<!DOCTYPE html> <html><head><title>AngularJs的練習</title><meta charset="UTF-8"/></head><body ng-app="myModule"><div ng-controller="myCtr1"><label>請輸入內容：</label><input ng-model="msg"/></div><p ng-controller="myCtr2">輸入框中輸入的內容是：{{ inputMsg }}</p><script src="js/angular.js"></script><script src="js/11.js"></script></body> </html>對應的js代碼：
angular.module('myModule',[]).service('myService',function(){//因為涉及到了不同的controller之間傳遞數據//故采用servicethis.message='';}).controller('myCtr1',function($scope,myService){$scope.$watch('msg',function(newVal,oldVal){//當用戶輸入內容發生變化時，就執行賦值語句，更新service//中保存的數據myService.message=newVal;});}).controller('myCtr2',function($scope,$interval,myService){$scope.inputMsg=myService.message;//此處用定時器實現了，實時更新第二個controller中的mode數據$interval(function(){$scope.inputMsg=myService.message;},10);});3、AngularJs中自定義過濾器
js代碼演示：-------此代碼是彌補了原生的limitTo過濾器的不足，即可以超出限制加省略號
對應的HTML中用法：
<p>{{ 'hnhgfvvbb' | myLimitTo : 30 }}</p>?4、自定義指令
directive：指令，用于擴展HTML元素、屬性、樣式。定義新指令的語法：
?????? 注：$watch不能監聽service中的數據
//指令是一個對象 moduleName.directive('指令名',function(){return {//A:attribute,E:element,C:class,這三個可以任意組合//用于限制該指令在HTML中扮演的角色restrict:'AEC',template:'該指令實際對應的HTML內容',//當template中內容過多時，可以把內容寫在一個單獨的HTML文件中//用如下方式引入templateUrl:'xxx.html'} });?練習：定制一個新的指令：nav-logo，只要使用該指令的地方，就會顯示一個灰色的導航條以及一個logo圖片
注：以下代碼不能本地打開，需要通過服務器才可運行成功
?對應的html:
<!DOCTYPE html> <html><head><title>AngularJs的練習</title><meta charset="UTF-8"/><link rel="stylesheet" href="css/12.css"/></head><body ng-app="myModule"><!-- 將指令當標簽用 --><nav-logo></nav-logo><!-- 將指令當屬性用 --><div nav-logo></div><!-- 將指令當樣式用(注：需要在指令中指定restrict:'C'才可實現) --><!-- <div class="nav-logo"></div> --><script src="js/angular.js"></script><script src="js/12.js"></script></body> </html>對應的js代碼：
angular.module('myModule',[])//聲明一個指令.directive('navLogo',function(){return {//restrict:'C', 不是必須的，但是若要將指令當做樣式的話，必須寫上templateUrl:'directive/12.html'}});對應的css:
*{margin:0;padding:0; } .nav{height:60px;background:#afa; } .nav>img{width:60px;height:60px;margin-left:100px; }對應的模板html(此例中的12.html):
<div class="nav"><img src="img/3.png"/> </div>效果截圖：
轉載于:https://www.cnblogs.com/mujinxinian/p/5998993.html
總結
以上是生活随笔為你收集整理的AngularJs学习笔记（四）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： matplotlib —— 添加文本信息
- 下一篇： iOS 10 的一个重要更新-自定义的通