首頁 > 文章 > web前端 > AngularJS 模組化詳解及實例程式碼

AngularJS 模組化詳解及實例程式碼

高洛峰原創: 2016-12-28 14:02:561563瀏覽

AngularJS有幾大特性，例如：

　　1 MVC

　　2 模組化

　　3 指令系統

3篇綁定〜〜4 對資料來

　　首先先說一下為什麼要實現模組化：

　　1 增加了模組的可重用性

　　2 透過定義模組，實現載入順序的自訂

　〜3 在單元中的內容中之前做的幾個例子，控制器的程式碼直接寫在script標籤裡面，這樣宣告的函數都是全域的，顯然不是最好的選擇。

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

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

　　首先，透過全域變數angular建立模組myAppModule

angular.module('myApp',[創建模組myAppModule

angular.module('myApp',[創建模組); ，這個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(&#39;myApp&#39;,[]);
       
      myAppModule.filter(&#39;test&#39;,function(){
        return function(name){
          return &#39;hello, &#39;+name+&#39;!&#39;;
        };
      });
 
      myAppModule.controller(&#39;myAppCtrl&#39;,[&#39;$scope&#39;,function($scope){
        $scope.name=&#39;xingoo&#39;;
      }]);
    </script>
  </body>
</html>

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

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

　　filter的作用是加入字串修飾。

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

　　程式的運作結果如下：

以上就是對AngularJS 模組化的資料整理，後續繼續補充相關資料，謝謝大家對本站的支持！

更多AngularJS 模組化詳解及實例代碼相關文章請關注PHP中文網！ AngularJS 模块化详解及实例代码

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jQuery EasyUI 教學-Panel（面板）下一篇：jQuery EasyUI 教學-Panel（面板）

看更多