Angular重点笔记

2018-09-13

1. 模块按需加载

使用require.js
使用oclazyload.js

由于采用angular做了网页的单页面应用,需要一次性在主布局中将所有模块需要引用到的js都引入.对于比较小的项目,这是可行的,但是对于大的项目,一旦js文件较多,在页面首次加载时就引入所有js文件,无疑会延缓页面加载的速度,造成不良额用户体验.那么分布加载(按需加载)就显得很有必要了.

1.1 使用require.js

main.js配置所需js路径，启动app.js, app.js加载路由js，配置全局变量及相关全局设置

main.js

require(["app"], function (app) {
	$(document).ready(function () {
		angular.bootstrap(document, [app.name]);
	});
});

route.config.js :

states: {
            // 登录页
            "login": {
                url: "/login",
                templateUrl: "views/login.html",
                controller: "LoginController",
                dependencies: ["controllers/LoginController"]
            },
          }

app.js  
 
//注册机制，按需加载用

app.lazy = {
            controller : $controllerProvider.register,
            directive : $compileProvider.directive,
            filter : $filterProvider.register,
            factory : $provide.factory,
            service : $provide.service
        };

        if (routeConfig.states !== undefined) {
            angular.forEach(routeConfig.states, function(route, state) {
                if (route.dependencies !== undefined && route.dependencies.length > 0) {
                    route.resolve = resolve(route.dependencies);
                }
                $stateProvider.state(state, route);
            });
        }
        if (routeConfig.defaultUrl !== undefined) {
            $urlRouterProvider.otherwise(routeConfig.defaultUrl);
        }

  
    function resolve(dependencies) {
        return {
            deps : [ "$q", function($q) {
                var deferred = $q.defer();

                require(dependencies, function() {
                    deferred.resolve();
                });

                return deferred.promise;
            } ]
        };
    }

app.js在遍历加载路由时，给route加个了resolve属性，resolve（）为值，所以最后路由变成了

$stateProvider
           .state("login", {
               url: "/login",
               templateUrl: "views/login.html",
               controller: "LoginController",
               dependencies: ["controllers/LoginController"]
               resolve: {
                   deps: ["$q", function($q) {
                        var deferred = $q.defer();
                       //异步加载controllers/LoginController
                       require(["controllers/LoginController"],function() { 
                         deferred.resolve(); 
                 });
                       return deferred.promise;
                   }]
               }

前文说了lazy()按需加载，那么之后创建的js文件，即可使用lazy()来注册

1	return app.lazy.controller("competitionStatisticsController", controller);

1.2 使用oclazyload.js

index.html需引入app.js,主要内容为定义的angular.module,以及路由配置：

注意：oclazyload.js在angularjs后引入

app.js

//数组添加方法，判断是否包含指定参数，有则返回true
    Array.prototype.contains = function(obj) {
        var i = this.length;
        while (i--) {
            if (this[i] === obj) {
                return true;
            };
        };
        return false;
    };

//封装函数，返回一个数组，指定要懒加载的文件
    var loadMyCtrl = function(obj){
        return{
            deps : ['$ocLazyLoad', function($ocLazyLoad){
           return 				      		    $ocLazyLoad.load(['scripts/'+obj+'.controller.js','styles/'+obj+'.css']);
                }]
            }
    }
    };

然后在配置路由的时候调用loadMyCtrl()方法

1	route.resolve = loadMyCtrl(route.dependencies);

那么问题来了!

为什么需要使用resolve？

当路由切换的时候，路由的页面中的元素（标签）就会立马显示出来，同时，数据会被准备好并呈现出来。但是注意，数据和元素并不是同步的，在没有任何设置的情况下，AngularJS默认先呈现出元素，而后再呈现出数据。这样就会导致页面会被渲染两遍，导致“页面UI抖动”的问题，对用户不太友好。resolve的出现解决了这个问题。

resolve是干嘛用的 ?

resolve属性里的值会在路由成功前被预先设定好，然后注入到控制器中。通俗地将，就是等数据都“就位”后，才进行路由（其实我觉得也不能叫路由，因为路由是一些列的操作，其中就包括了设置resolve属性等等）。这样的好处就是页面仅会被渲染一遍。

参考：

关于angular项目按需加载文件的两种方法（oclazyload&require)

angularjs ocLazyLoad按需加载js