AngularJS+RequireJS+AngularAMD实现模块化、按需加载

2前两节笔记中学习了requireJs的基本用法，以及requireJs和AngularJs组合使用的方法，但是项目构建完成之后，我发现一个问题，就是加载路由模块的时候，会把所有的controller都加载完成，这个其实是不科学的，因为我打开一个项目的时候，首先看到的是首页，也就是说暂时只需要加载首页的controller、template和server即可，其他页面还没有去点击，所以暂时不用加载相关代码，这样可以提升性能。

比如我需要的功能是在访问sy页面的时候调用syCtrl控制器，访问login页面调用loginCtrl控制器。

我使用requireJs本来是想将各个controller分成单独的文件，然后需要加载某个控制器的时候再去调用。在实际开发中，涉及到的模块太多的时候我们希望通过单独的文件来管理单独的模块，这样的话，就算每个controller的代码很多，也不至于全部集中在一个文件里边，后期维护成本大大降低。

但是相当于我之前只是做了前端代码模块化，暂时还没有实现“按需加载”。发现这个问题之后，这段时间一直在寻找相关的解决方法。

通过angularAMD实现可以实现按需加载：

（AngularAMD.js文件可查看文章下方阅读原文进行下载）

将AngularAMD.js下载放置到项目中，通过require的path属性配置地址，然后在shim属性里边配置与其他文件的依赖关系，这就算完成了第一步。

然后在路由router.js里边引入AngularAMD模块，其中一个路由配置方法如下：

define(['app', 'angularAMD'], function(app, angularAMD){

     return app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){

                $urlRouterProvider.otherwise('/index');

                $stateProvider.state('index', angularAMD.route({

                       url : '/index',

                       templateUrl : indexPath

                }))

               .state('nodeList', angularAMD.route({

                       url : '/nodeList',

                       templateUrl : nodeListPath,

                       controllerUrl : 'nodeListCtr'

              }))

     }]);

});

然后controller中的代码如下：

define(['app'], function(app){

return ['$scope', '$http', '$stateParams', '$sce', function($scope, $http, $stateParams, $sce){

$http({

url : editNewsDataPath,

data : {

nid : $stateParams.nid

},

method : 'post'

}).then(function(result){

$scope.title = result.data[0].title;

$scope.content = $sce.trustAsHtml(result.data[0].content);

});

}];

});

查看原文：AngularJS+RequireJS+AngularAMD实现按需加载