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

来源：互联网发布：软件调研方案模板编辑：程序博客网时间：2024/06/14 21:12

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方法。

(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

阅读全文

0 0