第26篇：AngularJS+ui-router實現一個超簡單的登陸和跳轉的二級路由demo
阿新 • • 發佈：2019-01-02
1.頁面結構介紹：
1）index.html:頁面入口檔案；
2）views資料夾下：
login資料夾下：登陸頁面和對應控制器；
home資料夾下：
home.html/home.js:二級路由頁面和對應的控制器
adv/list資料夾:二級頁面和對應的控制器檔案
3）lib資料夾：引入的框架檔案
4）common資料夾：公共樣式和指令碼等檔案
2.定義路由
入口檔案index/index.html
引入angularJS框架，對應的iu-router外掛和oclazyload懶載入外掛；
定義ng-app指令；
<!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title>NTDATA</title> <link rel="stylesheet" href="common/css/style.css"> <script src="lib/angular.min.js"></script> <script src="lib/angular-ui-router.min.js"></script> <script src="lib/ocLazyLoad.min.js"></script> <script src="common/script/main.min.js"></script> </head> <body> <ui-view></ui-view> </body> </html>
路由檔案index/common/script/main.js:
依賴注入對應的模組，定義一級路由和子路由，壓縮後在index.html頁面引入
'use strict'; var app = angular.module('app', ['ui.router','oc.lazyLoad']); app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){ $urlRouterProvider.otherwise('home'); $stateProvider .state('login',{ url:'/login', templateUrl:'./views/login/login.html', controller:'login', resolve:{ loadMyCtrl:['$ocLazyLoad', function($ocLazyLoad) { return $ocLazyLoad.load('./views/login/login.js'); }] } }) .state('home',{ url:'/home', templateUrl:'./views/home/home.html', controller:'home', resolve:{ loadMyCtrl:['$ocLazyLoad', function($ocLazyLoad) { return $ocLazyLoad.load('./views/home/home.js'); }] } }) .state('home.advList',{ url:'/advertiser', templateUrl:'./views/home/adv/list/list.html', controller:'advList', resolve:{ loadMyCtrl:['$ocLazyLoad', function($ocLazyLoad) { return $ocLazyLoad.load('./views/home/adv/list/list.js'); }] } }) .state('home.chList',{ url:'/channel', templateUrl:'./views/home/channel/list/list.html', controller:'chList', resolve:{ loadMyCtrl:['$ocLazyLoad', function($ocLazyLoad) { return $ocLazyLoad.load('./views/home/channel/list/list.js'); }] } }) }])
二級路由入口頁面index/views/home.html
對應的控制器index/views/home.js<div> <span ui-sref=".advList"><a href="">adv</a></span> <span ui-sref=".chList"><a href="">channel</a></span> <span ui-sref="login"><a href="">登出</a></span> <div ui-view=""></div> </div>
angular.module('app').controller('home',['$state',function($state){
$state.go('home.advList');
}])adv/list/list.html:
<div>
advList
</div>adv/list/list.js:
angular.module('app').controller('advList',['$scope',function($scope){
}])<div>
channelList
</div>channel/list/list.js:
angular.module('app').controller('chList',['$scope',function($scope){
}])