AngularJS学习笔记一(RequireJS + AngularJS)

今天下午学习了下如何使用RequireJS去和AngularJS搭配去组织项目。然后这里稍微介绍下整个配置过程。

RequireJS

RequireJS文档请移步： RequireJS

RequireJS + AngularJS

因为使用RequireJS去加载整个项目JS文件，因此直接将AngularJS文件引入到项目文件当中是不合理的，所有必须使用RequireJS提供的方式去加载AngularJS。

在你的index.html文件当中，只需要一个script标签

<script src='components/require.js' data-main='main'></script>

这个文件首先加载requirejs ,main.js里面存放的是所有需要被加载进来文件的配置文件。

接下来就需要在main.js文件里面进行配置了，

require.config({
    baseUrl: 'd://angular/app',
    
    paths: {
        'angular': 'components/angular.min',
        'uiRouter': 'components/angular-ui-router.min'
    },
    
    shim: {
        'app': {
            deps: ['angular']
        }
    }
});

require(['app'], function(){
    angular.bootstrap(document, ['myApp']);
})

这里使用require.config()这个全局函数，需要向里面传递一个配置对象。

baseUrl: 'd://angular/app'    
//所有模块的查找根路径。比如上面的`angular`的路径就应该是基于这个根路径的，为d://angular/app/components/angular.min.js

paths: {
    'angular': 'components/angular.min'
}
//在配置js路径的时候，文件不需要带'.js'后缀，因为一个path有可能映射到一个目录下面。路径解析机制会自动映射模块名到path路径时加上'.js'后缀。

shim: {
    'app': {
        deps: ['angular']
    }
}

• shim 为那些没有使用define()来声明依赖关系、设置模块的"浏览器全局变量注入"型脚本做依赖和导出配置。

• shim仅仅只是设置了代码的依赖关系，想要实际的加载shim指定的或涉及的模块，仍然需要一个常规的require/define调用。设置shim本身不会触发代码的加载。

• 请仅使用其他"shim"模块作为shim脚本的依赖，或那些没有依赖关系，并且在调用define()之前定义了全局变量(如jQuery或lodash)的AMD库。否则，如果你使用了一个AMD模块作为一个shim配置模块的依赖，在build之后，AMD模块可能在shim托管代码执行之前都不会被执行，这会导致错误。终极的解决方案是将所有shim托管代码都升级为含有可选的AMD define()调用。

require(['app'], function(){
    angular.bootstrap(document, ['myApp']);
})

加载'app' module，其内容在下面，首先在'app'模块里面有个deps:['angular']，这里已经申明了依赖关系，即'app'加载以前要先加载angular,所以在回调里面可以直接使用angular.bootstrap(document, ['myApp'])去手动启动angular应用。同时要注意，这粒因为是手动启动angular，因此不需要在html文件里面加'ng-app'指令作为入口文件。angular.bootstrap(document, ['myApp'])这里已经声明了'ng-app'指令的位置.

app.js：

define(function () {
    var app = angular.module('myApp', []);

    app.controller('DemoController', function ($scope) {
        $scope.hello  = 'world';
    });

    return app;

})

app.js里面的内容就是上面require(['app'],function(){.....}) ，首先加载(即运行)'app.js'里面的内容，然后再调用回调。

OK。这样就通过RequireJS来加载AngularJS了。