angular.module

1 篇文章 / 0 new
author
angular.module
angular.module 全域型, 任何controller, service...等均須透過此來建立, 登錄與檢索Angular ♦ 用法

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

Param Type Details
name string 要建立或搜索的模組名稱
requires(optional) Array.<string> If specified then new module is being created. If unspecified then the the module is being retrieved for further configuration.
configFn Function Optional configuration function for the module. Same as Module#config().
Returns

angular.Module Object

// 建立新模組
var myApp = angular.module('模組名稱', []);

► Interface angular.Module

Method

  • controller(name, constructor)

    Param Type Details
    name

    string

    Object

    Controller name, or an object map of controllers where the keys are the names and the values are the constructors.
    constructor

    Function

    Array

    Controller constructor function.

    綁定在 $scope , 每個控制器均有自己的 $scope, 且會繼承父層的 $scope, 要使用父層的$scope的資料則須加上$parent即可. 在 template 引入 ng-controller="MyModuleName" 後, 則直接以 {{ myAttribute }} 或呼叫 {{ myFunction() }} 即可取用

    myApp.controller('ChildCtrl', ['$scope', function($scope) {
        $scope.myAttribute = '變數使用';      
        $scope.myFunction = function() {// '函式建立';
            window.alert("Thanks!");
        };
    }]);

    //不綁定 $scope, 在 template 引入 ng-controller="MyModuleName as myCtl" 後, 則直接以 {{ myCtl.qty }} 或呼叫 {{ myCtl.pay() }} 即可取用

    myApp.controller('InvoiceController', function() {
        this.qty = 1;
        this.inCurr = 'EUR';
        this.currencies = ['USD', 'EUR', 'CNY'];
        this.usdToForeignRates = { USD: 1, EUR: 0.74, CNY: 6.09 };
        this.pay = function pay() {
            window.alert("Thanks!");
        };
    });
serivce, value, factory 內部[最終均是透過 provider  建立一個 service, 額外提供三個方法我想主要目的在於簡化程式碼, 但也失去一個原始特性, 因為 provider 是可以透過 config 來進行配置的其他三個方法則不行. 四者的撰寫方式參考 service create.
AngularJS 所有的 service 都是singletons獨立來實行特定任務.
AngularJS 所有的 service 都是 被動實例化.
提供的的建立層次的建立方式, 其提供不同的能力與複雜度
  • factory(name, providerFunction)

    建立 service  $provide.factory().
    Param Type Details
    name string
    service 名稱
    providerFunction Function
    Function for creating new instance of the service.
  • service(name, constructor)

    Param Type Details
    name string
    service name
    constructor Function
    A constructor function that will be instantiated.
  • value(name, object)

    Param Type Details
    name string
    service name
    object *
    Service instance object.
  • provider(name, providerType)

    Param Type Details
    name string
    service name
    providerType Function
    Construction function for creating new instance of the service.
  • animation(name, animationFactory)

    NOTE: animations take effect only if the ngAnimate module is loaded. Defines an animation hook that can be later used with $animate service and directives that use this service.
    See $animateProvider.register() and ngAnimate module for more information.
    Param Type Details
    name string
    animation name
    animationFactory Function
    Factory function for creating new instance of an animation.
  • config(configFn)

    Use this method to register work which needs to be performed on module loading.
    Param Type Details
    configFn Function
    Execute this function on module load. Useful for service configuration.
  • constant(name, object)

    Because the constant are fixed, they get applied before other provide methods. See$provide.constant().
    Param Type Details
    name string
    constant name
    object *
    Constant value.
  • directive(name, directiveFactory)

    建立自己的 tag 或加 tag的屬性  $compileProvider.directive().
    Param Type Details
    name

    string

    Object

    Directive name, or an object map of directives where the keys are the names and the values are the factories.
    directiveFactory Function
    Factory function for creating new instance of directives.
  • run(initializationFn)

    Use this method to register work which should be performed when the injector is done loading all modules.
    Param Type Details
    initializationFn Function
    Execute this function after injector creation. Useful for application initialization.
     

Properties

  • name

    string
    Name of the module.
  • requires

    Holds the list of modules which the injector will load before the current module is loaded.
    Array.<string>
    List of module names which must be loaded before this module.

 

angular.Module Conclusion

To wrap it up, let's summarize the most important points:

  • The injector uses recipes to create two types of objects: services and special purpose objects
  • There are five recipe types that define how to create objects: Value, Factory, Service, Provider and Constant.
  • Factory and Service are the most commonly used recipes. The only difference between them is that Service recipe works better for objects of custom type, while Factory can produce JavaScript primitives and functions.
  • The Provider recipe is the core recipe type and all the other ones are just syntactic sugar on it.
  • Provider is the most complex recipe type. You don't need it unless you are building a reusable piece of code that needs global configuration.
  • All special purpose objects except for Controller are defined via Factory recipes.
Features / Recipe type Factory Service Value Constant Provider
can have dependencies yes yes no no yes
uses type friendly injection no yes yes* yes* no
object available in config phase no no no yes yes**
can create functions/primitives yes no yes yes yes

* at the cost of eager initialization by using new operator directly

** the service object is not available during the config phase, but the provider instance is (see theunicornLauncherProvider example above).

Free Web Hosting