zoukankan      html  css  js  c++  java
  • 【angularJS】定义模块angular.module

    模块定义了一个应用程序。控制器通常属于一个模块。

    JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。

    AngularJS 模块让所有函数的作用域在该模块下,避免了该问题。

     简单的定义一个Angular模块(module)

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

    这种方法带有两个参数,一个是模板名,一个是依赖注入列表【该模块所依赖的模块】,数组为空,表示当前注册的模板不需要依赖关系

    如果依赖不为空,则要保证其依赖的模块已经加载。这里面就有个加载顺序的问题。

    最简单的情况下,我把使用模块所在的JS文件全部按顺序列在HTML的script元素中,只要保证模块之间的依赖关系正确即可,如:
    <script src="/scripts/myApp.js"></script>

     <script src="/scripts/app.js"></script>

    如果app.js中的模块依赖模块myApp,则需先将定义它的myApp.js加载进来。在项目实践中,这种方法显然是不实际的,你不能在一开始把所有的JS文件全部加载进来。

    通常会使用一些延迟/异步加载机制,如使用RequireJS

    使用RequireJS定义的Angular模块可以是这样:

    define(['angular'], function(angular) {

        angular.module('myApp', [])

          .controller('MyController', ['$scope', function ($scope) {

            //define scope data

          }]);

    });

    其中define函数加载了angular.js,并取得angular模块,然后定义了myApp模块。

    如果myApp模块(或者MyController)依赖于其他模块(或组件),则需要告诉RequireJS在需要的时候加载:

    define(['angular', './scripts/anotherApp', './scripts/service/utility' ], function(angular) {    //上面加载了3个js文件

            angular.module('myApp', ['newApp'])                                                                    //定义的myAPP模块需要依赖newApp模块(此模块所在的js文件需要引进来)

               .controller('MyController', ['$scope', 'utils', function ($scope, utils) {                  //'MyController'依赖的一些组件scope等

               //define scope data

            }]);

    });

    这里,myApp依赖定义于anotherApp.js的newApp模块,并且需要定义于utility.js的工厂服务utils。这里存在的一个陷阱是,依赖的两个JS文件不一定会按照代码中声明的顺序加载,即utility.js可能先于anotherApp.js加载。因此在使用requireJS加载依赖时,要注意这些依赖本身之间的相互关系,不能指望requires按某种顺序加载这些依赖。否则,会导致一些概率性出现的问题,不易调试。

    另外一点,如果在首次定义模块A时使用了空数组作为依赖,然后在某次使用A模块的过程中,误将依赖数组又传递一次,那么A模块原来的定义就会被覆盖,并且原来A模块定义的controller,service等组件也将不存在,这样也会导致难以调试的问题。因此在定义和使用Angular模块时不能大意。

  • 相关阅读:
    pugixml
    C++ 头文件的理解
    图像的特征
    光圈与景深
    Unix高级环境编程
    用libtommath实现RSA算法
    【linux+C】神器 vim + 指针相关客串
    【算法25】对称子字符串的最大长度
    设计并实现同时支持多种视频格式的流媒体点播系统
    递归再一次让哥震惊了
  • 原文地址:https://www.cnblogs.com/peterYong/p/10098859.html
Copyright © 2011-2022 走看看