【AngularJS】—— 7 模塊化


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的作用是 添加字符串修飾。

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

  程序的運行結果如下:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM