AngularJs在使用路由时采用ocLazyLoad进行按需加载提高页面加载速度

次加载页面就下载好所有的资源没有什么大问题。但是当我们的网站渐渐庞大起来，这样子的加载策略让网速初始化速度变得越来越慢，用户体验不好。二来，分模块加载易于团队协作，减低代码冲突。

代码目录结构

html
    -login.html
    -register.html
js
    -angular.min.js
    -angular-ui-router.min.js
    -ocLazyLoad.min.js
index.html
login.js
main.js
register.js

//index.html  
  
  
      
          
          
          
          
          
          
          
          
          
      
      
        
  
      
  

//main.js  
var app = angular.module("test", ["ui.router", "oc.lazyLoad"])  
  .config(["$stateProvider", "$locationProvider", "$urlRouterProvider", "$ocLazyLoadProvider", function($stateProvider, r, s, $ocLazyLoadProvider) {  
    s.otherwise("/");  
    s.when("/", "/register");  
    r.hashPrefix("");  
  
    $ocLazyLoadProvider.config({  
        events : true  
    });  
  
    $stateProvider.state("register", {  
        title: "注册",  
        url: "/register",  
        views: {  
            mainView: {  
                templateUrl: "./html/register.html",  
                controller: "registerCtrl"  
            }  
        },  
        resolve: {  
            loadMyCtrl1: ["$ocLazyLoad", function(e) {  
                return e.load(["./register.js"])  
            }]  
        }  
    }).state("login", {  
        title: "登录",  
        url: "/login",  
        views: {  
            mainView: {  
                templateUrl: "./html/login.html",  
                controller: "loginCtrl"  
            }  
        },  
        resolve: {  
            loadMyCtrl1: ["$ocLazyLoad", function(e) {  
                return e.load(["./login.js"])  
            }]  
        }  
    });  
  
}  
]);  
  
app.controller("mainController", ["$stateParams", "$rootScope", "$state", function(e, t, i) {}]);  

//register.js  
var app = angular.module("test");  
app.controller("registerCtrl", ["$scope", "$state", "$ocLazyLoad", function($scope, $state, $ocLazyLoad) {  
    $scope.name = 'register';  
    $scope.goLogin = function(){  
        $state.transitionTo("register.index");  
    }
}]);  

//register.html  

    注册：{{ name }}
    
  
        我要登录  
    
  

//login.js  
var app = angular.module("test");  
app.controller("loginCtrl", ["$scope", function($scope) {  
    $scope.name = 'login';
}]);  

//login.html  
  
    登录：{{ name }}