Angularjs1.x+ocLazyLoad+angular-ui-router+ui-router-extras
阿新 • • 發佈:2019-01-09
前言
總是聽人說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.