一、参考例子
1<!DOCTYPE html> 2<html ng-app="App"> 3<head> 4 <meta charset="UTF-8"> 5 <title>AngularJS 路由-参数,模块配置,布局模板</title> 6</head> 7 8<body> 9 <div class="wrapper"> 10 <!-- 导航菜单 --> 11 <ul class="meb-menu" menu> 12 <li class="ico1"><a ui-sref="member" title="我的个人中心">我的个人中心</a></li> 13 <li class="ico2"><a ui-sref="" title="发布项目">发布项目</a></li> 14 <li class="ico3"><a ui-sref="myproject" title="我的项目">我的项目</a></li> 15 <li class="ico4"><a ui-sref="myaccount" title="我的账户">我的账户</a></li> 16 <li class="ico5"><a ui-sref="details" title="消费明细">消费明细</a></li> 17 <li class="ico6"><a ui-sref="capital" title="账户资金">账户资金</a></li> 18 </ul> 19 <!-- 内容 --> 20 <div class="content"> 21 <!--4 布局模板 占位符 --> 22 <div ui-view></div> 23 </div> 24 25 </div> 26 <!-- AngularJS核心框架 --> 27 <script src="js/angular.min.js" type="text/javascript"></script> 28 <!-- 1 路由模块理解成插件 --> 29 <script src="js/angular-ui-router.js" type="text/javascript"></script> 30 31 <script> 32 33 //2 实例化模块（App）时，当成依赖传进去（模块名称叫ui.router） 34 var App = angular.module('App',['ui.router']); 35 36 //3 配置路由模块，使其正常工作 37 App.config(function($stateProvider, $urlRouterProvider) { 38 $urlRouterProvider.otherwise('member'); //默认链接 39 40 $stateProvider 41 .state('member',{ 42 // template: '<h1>contact US Pages!</h1>', 字符串视图 43 url : '/member', 44 templateUrl : 'member/member.html' 45 }) 46 .state('myproject',{ 47 url : '/myproject', 48 templateUrl : 'member/myproject.html', 49 }) 50 .state('myaccount',{ 51 url : '/myaccount', 52 templateUrl : 'member/myaccount.html', 53 controller: 'ContactController' // 定义控制器 54 }) 55 .state('details',{ 56 url : '/details', 57 templateUrl : 'member/details.html', 58 }) 59 .state('capital',{ 60 url : '/capital', 61 templateUrl : 'member/capital.html', 62 }) 63 }); 64 65 // 列表控制器 66 App.controller('ContactController', ['$scope', '$http', function ($scope, $http) { 67 68 $http({ 69 url: 'contact.php' 70 }).success(function (info) { 71 $scope.content = info; 72 }); 73 74 }]); 75 76 </script> 77 78</body> 79</html>
二、平级嵌套
1$stateProvider.state("home",{ 2 views: { 3 "":{template: "<h1>hi</h1>"}, //<div ui-view></div> 4 "data": {template: "<div>data</div>"}, //<div ui-view="data"></div> 5 "tabledata": {templateUrl: 'report-table.html',}, 6 } 7});
三、父级嵌套
1.state('home', { 2 url: "/home", 3 templateUrl: "sources/tpls/home.html", 4 //abstract: true, 5 controller: 'homeCtrl', 6 }) 7 .state('home.popup-current', { 8 url: "/popup-current?:deviceid", 9 views: { 10 "popup":{ 11 templateUrl:"sources/tpls/popup/popup-current.html", 12 controller:'currentMachineCtrl' 13 }, 14 } 15 }) 16 .state('home.popup-history', { 17 url: "/popup-history?:deviceid&year&month&level", 18 views: { 19 "popup":{ 20 templateUrl:"sources/tpls/popup/popup-history.html", 21 controller: 'reportCtrl' 22 }, 23 } 24 });
四、相对命名与绝对命名
1<!-- index.html (root unnamed template) --> 2<body ng-app> 3<div ui-view></div> <!-- contacts.html plugs in here --> 4<div ui-view="status"></div> 5</body> 6 7<!-- contacts.html --> 8<h1>My Contacts</h1> 9<div ui-view></div> 10<div ui-view="detail"></div> 11 12 13<!-- contacts.detail.html --> 14<h1>Contacts Details</h1> 15<div ui-view="info"></div> 16 17$stateProvider 18 .state('contacts', { 19 // 根状态，对应的父模板则是index.html 20 // 所以 contacts.html 将被加载到 index.html 中未命名的 ui-view 中 21 templateUrl: 'contacts.html' 22 }) 23 .state('contacts.detail', { 24 views: { 25 // 嵌套状态，对应的父模板是 contacts.html 26 // 相对命名 27 // contacts.html 中 <div ui-view='detail'/> 将对应下面 28 "detail" : { }, 29 30 // 相对命名 31 // 对应 contacts.html 中的未命名 ui-view <div ui-view/> 32 "" : { }, 33 // 绝对命名 34 // 对应 contacts.detail.html 中 <div ui-view='info'/> 35 "info@contacts.detail" : { } 36 // 绝对命名 37 // 对应 contacts.html 中 <div ui-view='detail'/> 38 "detail@contacts" : { } 39 // 绝对命名 40 // 对应 contacts.html 中的未命名 ui-view <div ui-view/> 41 "@contacts" : { } 42 // 绝对命名 43 // 对应 index.html 中 <div ui-view='status'/> 44 "status@" : { } 45 // 绝对命名 46 // 对应 index.html 中 <div ui-view/> 47 "@" : { } 48 });
参考资料
学习 ui-router - 多个命名的视图
http://bubkoo.com/2014/01/01/angular/ui-router/guide/multiple-named-views/