博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【angularJS】定义模块angular.module
阅读量:6423 次
发布时间:2019-06-23

本文共 1559 字,大约阅读时间需要 5 分钟。

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

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模块时不能大意。

 

转载于:https://www.cnblogs.com/peterYong/p/10098859.html

你可能感兴趣的文章
winSockets编程(三)最简单的C/S形式
查看>>
Hadoop集群出现no data node to stop的解决方案
查看>>
Hadoop之HDFS客户端操作
查看>>
Scala基础知识笔记0-参考链接
查看>>
JS 时间戳转星期几 AND js时间戳判断时间几天前
查看>>
Web学习笔记
查看>>
关于input时间框设置了弹出选择就不能手动输入的控制
查看>>
xaml与CSS中的Margin顺序不同
查看>>
项目上线注意事项
查看>>
Python+selenium+eclipse+pydev自动化测试环境搭建
查看>>
实时流式计算框架Storm 0.9.0发布通知(中文版)
查看>>
地图划线
查看>>
独热编码和dummy编码的作用
查看>>
Alexnet参数解释
查看>>
css深入理解relative
查看>>
CloudSim学习
查看>>
python-模块与包
查看>>
8-16 藏尾诗
查看>>
使用idea 搭建一个 SpringBoot + Mybatis + logback 的maven 项目
查看>>
值得推荐的10本PHP书籍(转)
查看>>