AngularJS 模塊化詳解及實例代碼

2019-11-20 09:00:05

字體：大中小

來源：轉載

供稿：網友

AngularJS有幾大特性，比如：

　　1 MVC

　　2 模塊化

　　3 指令系統

　　4 雙向數據綁定

那么本篇就來看看AngularJS的模塊化。

　　首先先說一下為什么要實現模塊化：

　　1 增加了模塊的可重用性

　　2 通過定義模塊，實現加載順序的自定義

　　3 在單元測試中，不必加載所有的內容

　　之前做的幾個例子，控制器的代碼直接寫在script標簽里面，這樣聲明的函數都是全局的，顯然不是一個最好的選擇。

　　下面看看如何進行模塊化：

 <script type="text/javascript">      var myAppModule = angular.module('myApp',[]);            myAppModule.filter('test',function(){        return function(name){          return 'hello, '+name+'!';        };      });      myAppModule.controller('myAppCtrl',['$scope',function($scope){        $scope.name='xingoo';      }]);    </script>

　　首先，通過全局變量angular創建模塊myAppModule

angular.module('myApp',[]);

　　第一個參數是綁定的應用app名稱，這個app標識了頁面中angular的入口點，類似main函數的作用。

　　第二個參數[]里面標識了依賴的模塊。

　　下面看看如何使用模塊吧！

<!doctype html><html ng-app="myApp">  <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>  </head>  <body>    <div ng-controller="myAppCtrl">      {{name | test }}    </div>    <script type="text/javascript">      var myAppModule = angular.module('myApp',[]);            myAppModule.filter('test',function(){        return function(name){          return 'hello, '+name+'!';        };      });      myAppModule.controller('myAppCtrl',['$scope',function($scope){        $scope.name='xingoo';      }]);    </script>  </body></html>

　　直接綁定myApp到ng-app上，就可以了。

　　在script中，我們通過模塊創建了一個filter和一個控制器。

　　filter的作用是添加字符串修飾。

　　控制器的作用則是初始化變量。

　　程序的運行結果如下：