AngularJs學習筆記(5)--模塊(module)

本文主要介紹一下angular中的模塊


(1)什麼是模塊(module)


大部分應用都有一個主方法(main)用來實例化、組織、啓動應用。

angularJS應用沒有主方法,而是使用模塊來聲明應用應該如何啓動。

模塊允許通過聲明的方式來描述應用中的依賴關係,以及如何進行組裝和啓動。


(2)Angular模塊


模塊是組織業務的一個框框,在一個模塊當中定義多個服務。當引入了一個模塊的時候,就可以使用這個模塊提供的一種或多種服務了。

AngularJS本身的一個默認模塊叫做ng,它提供了$http,$scope等服務

服務只是模塊提供的多種機制中的一種,其它的還有指令(directive),過濾器(filter),及其它配置信息。

也可以在已有的模塊中新定義一個服務,也可以先新定義一個模塊,然後在新模塊中定義新服務。

服務是需要顯式的聲明依賴(引入)關係的,讓ng自動的做注入。


(3)Module優點

啓動過程是聲明式的,更容易懂

在單元測試是不需要加載全部模塊的,因此這種方式有助於單元測試。

可以在特定情況的測試中增加額外的模塊,這些模塊能更改配置,能幫助進行端對端測試。

第三方代碼可以作爲可複用的module打包到angular中。

模塊可以以任何先後或者並行的順序加載(因爲模塊的執行本身是延遲的)。


(4)定義模塊

angular.module(name,[requires],configFn);

configFn會在模塊初始化時執行,可以在這裏配置模塊的服務。


例如

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

這裏就定義好了一個模塊。


同時可以定義屬於這個模塊的控制器:

myApp.controller('firstController',function($scope){
    $scope.name = '張三';
});

而在頁面上需要設置ng-app來聲明這個模塊是管理哪一塊區域的。

    <div ng-app="myApp">

        <div ng-controller="firstController">
            `name`
        </div>

    </div>

此時myApp模塊就管理這個div。

至此模塊的基本創建就完成了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章