次加載頁面就下載好所有的資源沒有什么大問題万皿。但是當(dāng)我們的網(wǎng)站漸漸龐大起來侦讨，這樣子的加載策略讓網(wǎng)速初始化速度變得越來越慢，用戶體驗(yàn)不好钦奋。二來衰倦，分模塊加載易于團(tuán)隊(duì)協(xié)作袒炉，減低代碼沖突。
代碼目錄結(jié)構(gòu)
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
<!DOCTYPE html>
<html lang="zh-cn" ng-app="test" id="test">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title ng-bind="title"></title>
<script src="./js/angular.min.js"></script>
<script src="./js/angular-ui-router.min.js"></script>
<script src="./js/ocLazyLoad.min.js"></script>
<script src="./main.js"></script>
</head>
<body data-ng-controller="mainController">
<div class="main-view ng-cloak" data-ui-view="mainView" id="mainView" ng-cloak></div>
</body>
</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: "注冊(cè)",
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
<div>
注冊(cè)：{{ name }}
<div ng-click="goLogin()">
我要登錄
</div>
</div>
//login.js
var app = angular.module("test");
app.controller("loginCtrl", ["$scope", function($scope) {
$scope.name = 'login';
}]);
//login.html
<div>
登錄：{{ name }}
</div>
