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