AngularJs學習筆記（四）

時間 2019-12-07

原文原文鏈接

一、AngularJs中的Module能夠包含哪些組件？
（1）value：保存能夠在不一樣的controller之間共享的對象、數據
（2）constant：保存能夠在不一樣的controller之間共享的常量
（3）service：保存能夠在不一樣的controller之間共享的對象、數據、操做
（4）filter：能夠實現對數據的過濾和格式化，date、currency、limitTo.........
（5）controller：控制器，用於設定模型數據-------每個控制器實例都與一個$scope對象相連接-------注意：angular中的控制器不是單例的！每次使用都會建立一個新的對象（對應的$scope對象也是新建立的）css

（6）directive：指令，用於封裝DOM操做，擴展HTML標籤及屬性-----爲HTML添加新標籤、新的屬性、新的樣式
二、關於模式
23+1種模式：
一種最簡單的設計模式：單例模式------某個對象可以且僅可以建立一次

JS中單例模式舉例：html

//經過當即執行函數實現了JS中的單例模式
(
         function (ename,age){
                    this.ename=ename;
                    this.age=age;
                    window.emp=this;//此處雖然污染了全局變量，可是使得外界能夠訪問這個對象
}
)('Tom',20);
console.log(window.emp);
//注：由於AngularJs中的controller能夠反覆建立，因此不是單例的

驗證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表明當前對象，即myCtr1
    console.log(this.uname+'   '+this.age);
    this.uname='Tom';
    this.age=20;
});
//聲明第二個控制器
mm.controller('myCtr2',function($scope){
    //這中的this表明myCtr2
    console.log(this.uname+'   '+this.age);
});

運行結果截屏：app

頁面：函數

console:this

驗證service是單例的：spa

結論：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之間傳遞數據
               //故採用service
                this.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);
       });

三、AngularJs中自定義過濾器
js代碼演示：-------此代碼是彌補了原生的limitTo過濾器的不足，便可以超出限制加省略號

angular.module('myModule',[])
        //自定義了一個過濾器
       .filter('myLimitTo',function(){
               return function(txt,len){
                   var result=txt;
                   //對超出限制的文字加省略號
                   if(result.length>len){
                       result=result.slice(0,len)+'...';
                   }
                   return result;
               }
       });

對應的HTML中用法：

<p>{{ 'hnhgfvvbb' | myLimitTo : 30 }}</p>

四、自定義指令

　　　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>

效果截圖：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。