首頁 > web前端 > css教學 > 主體

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

高洛峰
發布: 2016-12-28 14:02:56
原創
1589 人瀏覽過

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 模块化详解及实例代码

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!