前言
總是聽人說angularjs的學習曲線很高，個人認爲ng的難度是有的，但是要說難到哪裏，其實也不見得。總結來說，ng比較有難度的地方應當是路由和lazy加載。今天就把這部分內容通過一個小示例分享給大家。
依賴
項目包結構
代碼
index.html
<!Doctype html>
<html ng-app="Main">
<head>
</head>
<body>
<div ui-view>
</div>
<script src="lib/angular-1.4.8/angular.js"></script>
<script src="lib/angular-ui-router/angular-ui-router.js"></script>
<script src="lib/ui-router-extras/ct-ui-router-extras.js"></script>
<script src="lib/oclazy/ocLazyLoad.js"></script>
<script src="apps/main/MainModule.js"></script>
</body>
</html>
MainModule.js
angular.module('Main',['ui.router', 'ct.ui.router.extras', 'oc.lazyLoad'])
.config(['$stateProvider', '$futureStateProvider', '$ocLazyLoadProvider',function($stateProvider, $futureStateProvider, $ocLazyLoadProvider){
$futureStateProvider.addResolve(function($http){//從遠程加載
return $http({
url : 'apps/main/states.json',
method : "GET",
headers : {
'Content-Type' : 'application/json;charset=UTF-8'
}
}).then(function (resp) {
if (resp && resp.data && resp.data) {
angular.forEach(resp.data, function (appItem) {
var fstate = {
type: appItem.type,
stateName: appItem.stateName,
url: appItem.url,
load: [{
name: appItem.moduleName,
reconfig: true,
files: [appItem.src]
}]
};
$futureStateProvider.futureState(fstate);
});
}
});
});
$futureStateProvider.stateFactory('ocLazyLoad', function($q, $ocLazyLoad, futureState) {
var deferred = $q.defer();
$ocLazyLoad.load(futureState.load).then(function() {
deferred.resolve();
}, function() {
deferred.reject();
});
return deferred.promise;
});
$futureStateProvider.futureState({
"type" : "ocLazyLoad",
"stateName" : "login",
"url" : "/login",
load : {
name: "LoginModule",
reconfig: true,
files: ["apps/login/LoginModule.js"]
}
});
}])
.run(['$state','$timeout',function($state,$timeout){
$state.go('login');
}]);
states.json
[{
"type" : "ocLazyLoad",
"moduleName":"PageModule",
"stateName" : "page",
"url" : "/page",
"src" : "apps/page/PageModule.js"
}]
LoginModule.js
angular.module('LoginModule',[])
.config(['$ocLazyLoadProvider','$stateProvider',function($ocLazyLoadProvider,$stateProvider){
$stateProvider.state('login',{
url : '/login',
controller : 'LoginCtrl',
templateUrl : 'apps/login/view/login.html',
resolve : {
controller : ['$ocLazyLoad',function($ocLazyLoad){
return $ocLazyLoad.load({
name : 'LoginCtrlModule',
files : ['apps/login/controller/LoginCtrlModule.js']
});
}]
}
});
}]);
LoginCtrlModule.js
angular.module('LoginCtrlModule',[])
.controller('LoginCtrl',['$scope',function($scope){
}]);
login.html
<div>
login page
<a href="#/page/page1">go to page1</a>
<a href="#/page/page2">go to page2</a>
</div>
PageModule.js
angular.module('PageModule',[])
.config(['$ocLazyLoadProvider','$stateProvider','$futureStateProvider',function($ocLazyLoadProvider,$stateProvider,$futureStateProvider){
$futureStateProvider.futureState({
"type" : "ocLazyLoad",
"stateName" : "page.page1",
"url" : "/page1",
load: [{
name: "Page1Module",
reconfig: true,
files: ["apps/page/page1/Page1Module.js"]
}]
});
$futureStateProvider.futureState({
"type" : "ocLazyLoad",
"stateName" : "page.page2",
"url" : "/page2",
load: [{
name: "Page2Module",
reconfig: true,
files: ["apps/page/page2/Page2Module.js"]
}]
});
$stateProvider.state('page',{
url : '/page',
template : '<div>I am the page.</div><div ui-view></div>'
});
}]);
Page1Module.js
angular.module('Page1Module',[])
.config(['$ocLazyLoadProvider','$stateProvider',function($ocLazyLoadProvider,$stateProvider){
$stateProvider.state('page.page1',{
url : '/page1',
controller : 'Page1Ctrl',
templateUrl : 'apps/page/page1/view/page1.html',
resolve : {
controller : ['$ocLazyLoad',function($ocLazyLoad){
return $ocLazyLoad.load({
name : 'Page1CtrlModule',
files : ['apps/page/page1/controller/Page1CtrlModule.js']
});
}]
}
});
}]);
Page1CtrlModule.js
angular.module('Page1CtrlModule',[])
.controller('Page1Ctrl',['$scope',function($scope){
}]);
page1.html
<div>
I m the page1.
<a href="#/login">go to login.</a>
</div>
Page2Module.js
angular.module('Page2Module',[])
.config(['$ocLazyLoadProvider','$stateProvider',function($ocLazyLoadProvider,$stateProvider){
$stateProvider.state('page.page2',{
url : '/page2',
controller : 'Page2Ctrl',
templateUrl : 'apps/page/page2/view/page2.html',
resolve : {
controller : ['$ocLazyLoad',function($ocLazyLoad){
return $ocLazyLoad.load({
name : 'Page2CtrlModule',
files : ['apps/page/page2/controller/Page2CtrlModule.js']
});
}]
}
});
}]);
Page2CtrlModule.js
angular.module('Page2CtrlModule',[])
.controller('Page2Ctrl',['$scope',function($scope){
}]);
page2.html
<div>
I m the page2.
<a href="#/login">go to login.</a>
</div>
說明
整個示例是我個人親自己寫的，真心希望對大家有所幫助。可能有人想問一些其他的問題，比如指令什麼的。個人感覺這些都是比較基礎的東西，所以不在這裏說了，有需要討論的歡迎留言。對於本文裏所講的東西，如果有不明白的地方，可以聯繫我，一起交流學習。微信號：472575390.