requirejs解决angular中按需加载的需求

1.案例说明

angularjs在做一些小型项目时没有什么大的问题，但是项目迭代越多的时候会发现项目加载index.html的时候很慢，这是因为我们的架构有问题，加载index.html的时候会加载其下面所有引用的js、css文件，这是一个很费时间的过程，所以我们要引入requirejs让它按需加载。 requirejs-api

项目文件目录：

2.代码解释

2.1 index.html做如下改造。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div ng-controller="indexController">
    <div>
        <div ng-include="'views/common/menu.html'"></div>
        <div ng-cloak ui-view></div>
        <script src="libs/require.js" data-main="main" id="main"></script>
    </div>
</div>
</body>
</html>

这里我们取消了ng-app这个指令，加入了一个引入require的<script>标签，requirejs就会根据data-main的值main去找main.js这个文件。

2.2 main.js

main.js主要是将需要引用的js在这个文件中都列出来，并定义他需要的依赖。其中的angular.bootstrap并不是那个bootstrap框架，
而是angular中的一个方法名，用这个方法我们来创建一个module（securityManage）来替代之前的ng-app方法。

扫描二维码关注公众号，回复： 3060971 查看本文章

(function(){
    /**
     * 文件依赖
     */
    var config = {
        paths:{
            "angular" : 'libs/angular.min',
            "jquery" : 'libs/jquery-1.7.2.min',
            "uiRouter" : 'libs/angular-ui-router',
            "router": 'router'
        },
        waitSeconds : 7,  //出现网络慢加载文件慢的时候  设置最长等待时间7s
        shim : {  //这里shim等于快速定义一个模块，定义模块需要的依赖
            'angular':{
                exports:'angular'
            },
            uiRouter: {
                deps: ['angular']   //依赖什么模块
            }
        }
    };
    require.config(config);

    require(['router','jquery','uiRouter',],function(){
        angular.bootstrap(document,['securityManage']);
    });

})(window);

2.3 app.js

定义module模块，securityManage要跟main.js中用angular.bootstrap方法定义的要一致。

define(
    [
        'angular'
    ], function (angular) {
        return angular.module('securityManage',
            [
                'ui.router',
            ]);
    }
)

2.4 router.js

此文件主要是定义路由，其中app.register中定义的参数是为了后续定义对应的类型文件而做的设置,后面会讲到。

define(['app'],function(app){   //app对应的是app.js
    app.config(function($controllerProvider,$compileProvider,$filterProvider,$provide){
        app.register = {
            //得到$controllerProvider的引用
            controller : $controllerProvider.register,
            //同样的。这里也可以保存directive / filter /service 的引用
            directive : $compileProvider.register,
            filter : $filterProvider.register,
            service : $provide.service,
            factory : $provide.factory
        };
    })
        .config(function ($stateProvider, $urlRouterProvider) {
            $stateProvider
                .state('user', {
                    url: '/user',
                    templateUrl: 'views/user/users.html',
                    controller: 'usersController',
                    resolve: {
                        loadCtrl: ['$q',
                            function ($q) {
                                var deferred = $q.defer();
                                //异步加载controller／directive/filter/service
                                require([
                                    'module/user/controller/usersController.js'
                                ], function () {
                                    deferred.resolve();
                                });
                                return deferred.promise;
                            }]
                    }
                })
            //解决路由异常的方法
            $urlRouterProvider.otherwise('/user');
        });
});

2.5 定义service服务

define(['app'],function(app){
    app.register.factory('usersService',
    [
        '$http',
        function($http){
            return{
                //查询所有待复核信息
                getAllUsers:function(data){
                    return $http.post('http://localhost:8080/user/getAllUsers.json',data);
                }
            }
        }
    ])
});

2.6 定义controller

define(['app','module/service/usersService'],function(app){
 app.register.controller('usersController', [ '$scope',
	'usersService'
        function($scope,usersService){
            $scope.conf = {};
        }
    ])
})

要在controler中引入service，只需在头部引入service文件的路径然后在模块中引入service即可。

3. 总结

以上简单讲解了require怎么在angular中起作用的，以及对之前写法的变化，具体效果可在我发布的git项目上查看。

给出了一个demo，其中进入到people.html中时才会加载peopleController,可在F12下验证。Demo

requirejs解决angular中按需加载的需求

猜你喜欢