发表于: 2017-07-02 23:24:29

1 1008


今天完成的事情:


关于angularJS模块的定义和加载:
定义一个angular模块:

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

module函数的第二个参数定义了该模块所依赖的模块。定义一个模块时,必须同时指定模块名和依赖,尽管该模块可能没有依赖(使用空数组)。如果不指定依赖,则Angular会试图定位已经定义好的名称为myApp的模块,这通常会导致模块未定义错误。如果依赖不为空,则要保证其依赖的模块已经加载。这里面就有个加载顺序的问题。


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

<!doctype html>  
<html lang="en" ng-app="myApp">  
<head>  
<meta charset="utf-8">  
<title>My HTML File</title>  
<link rel="stylesheet" href="css/app.css">    
<script src="/scripts/myApp.js"></script>  
<script src="/scripts/app.js"></script>  
</head>  
<body>  
<div>  
Hello Angular !  
</div>  
</body>  
</html>

如果app.js中的模块依赖模块myApp,则需先将定义它的myApp.js加载进来。但是不能在一开始把所有的JS文件全部加载进来,因为加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序(比如上例的1.js要在2.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) {
angular.module('myApp', ['newApp'])
.controller('MyController', ['$scope', 'utils', function ($scope, utils) {
//define scope data  
}]);
});  

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


明天计划的事情:
完成任务6,开始任务7


问题:

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


收获:

如上


返回列表 返回列表
评论

    分享到