AngularJS的加载

在JavaScript原生JS里，我们加载多个JS文件时，都是在html页面通过一个一个加载的。如：

<script type="text/javascript" src="add.js"></script>

<script type="text/javascript"  src="remove.js"></script>

这种写法缺点是：因为加载时，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；如果js文件之间存在依赖关系，必须严格保证加载顺序，依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

require.js的出现很好的解决了这两个问题，它的作用也就是：

（1）实现js文件的异步加载，避免网页失去响应

（2）管理模块之间的依赖性，便于代码的编写和维护

 require.js通过配置可以支持支持动态加载没有遵循 AMD 规范的脚本，那该怎么使用require.js加载AngularJS呢？ 

1. 先在一个文件下创建如下目录结构，看看require.js是如何加载的：

php用来存放模拟后台数据（json格式）的文件，Scripts存放所有js文件，Views用来存放不同功能需求的html页面，index.html页面作为主页面；如果还有样式文件，可再新建一个文件夹来存放。

2. 加载require.js自身。将require.js放在Scripts下，在index.html里加入如下代码：

<script type="text/javascript" src="Scripts/require.js"></script>

加载这个文件，也可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另一个是写成这样：

<script type="text/javascript" src="Scripts/require.js" defer async="true"></script>

async 属性说明这个文件需要异步加载，以免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。

3. 通过data-main属性加载我们自己的js文件：

<script src="Scripts/require.js" data-main="Scripts/main"></script>

main.js文件相当于整个网页的主模块，类似主程序的主函数，它是require.js加载的第一个文件，因为require.js默认文件后缀为.js，所以上述main.js写的main。

主模块main.js里，我们就可以通过配置动态加载AngularJS了，后面我会接着写一篇《主模块的内容》来详细说明具体如何实现的动态加载。

                                                                                                                              @author 张春玲