angular使用requirejs/ui-router/angularAMD实现动态加载模块

最近在做angular项目，发现使用requirejs来加载模块的时候，它会根据已经建立好的依赖一次性把所有模块加载下来，而我们的项目中有两个不同的产品，我们希望进入每个产品时只加载该产品对应的模块。但是要结合ui-router来实现，网上的例子还实在少，好不容易有同事搜到类似的解决方案，试了半天终于成功了，原文章在这里：

http://christopherthielen.github.io/ui-router-extras/#/future

文章写的相当简洁，具体概念原理大家自己去看文章吧，这里就大家分享一下本项目中如何使用它的。。

1，首先需要引用一些库：

bower install angularAMD --save       ---------angularAMD用来动态加载js文件和js模块，依赖于angular。这里我们使用angularAMD中的ngload来动态加载模块。

bower install ui-router-extra --save    --------- ui-router-extra是ui-router的扩展包，主要是用到其中的futureState。futureState是在config时候定义，但真正跳转的时候会用一个full ui-router替换。这个full ui-router到时候会用$stateProvider。具体在例子里面解释。

2. 在require的config文件里面定义各种引用：

require.config({
    baseUrl: '../', 
    paths: {

        ...
       'angularUiRouterExtra':'xxx/ui-router-extras/release/ct-ui-router-extras.min', //for lazy load
        'angularAMD':'xxx/angularAMD/angularAMD.min', //for lazy load
        'ngload':'xxx/angularAMD/ngload.min', //for lazy load
    },

    shim: {
        ...
        'angularAMD':{
            deps:['angular']
        },
        'angularUiRouter': {
            deps: ['angular']
        },

        'ngload':{
            deps:['angularAMD']
        },
        'angularUiRouterExtra':{
            deps:['angular']
        }

        ...
    }


});
    require(['app'], function(app) { //init the application
        app.init();
    });