html頁碼
<body ng-app="myApp"> <div ui-view></div> <div ui-view="login"></div> <div ui-view="enroll"></div> </body>
需要引用的ui.router.js檔案
<script src="angular-ui-router.js"></script>
? :url選項將會為該應用程式的狀態指定一個URL基於使用者瀏覽該應用程式所在的狀態(位址顯示連結)。這樣當在瀏覽應用程式的時候便能達到深度連結的效果。
var myApp = angular.module('myApp', ['ui.router']); myApp.config(['$stateProvider', '$urlRouterProvider', routeConfig]); function routeConfig($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise(''); $stateProvider.state('competition', { url: '/competition', templateUrl: '/competition.html', controller: 'competitionController' }).state('competition.detail', { url: '/competition-detail', templateUrl: '/competition-detail.html', controller: 'competitionDetailController' }).state.('competition.enrollForm',{ url: '/competition.enrollForm', templateUrl: 'competition-enrollFrom.html', controller: 'enrollFromController' }).state.('competition.comments',{ url: '/competition-comments', templateUrl: 'competition-comments.html', controller: 'commentsController' }).state('competition.login',{ url: '/competition-login', views: { 'login@': { templateUrl: 'competition-login.html', controller: 'loginController' } } }).state('competition.enroll',{<br> url: '/competition-enroll',<br> views: {<br> 'enroll@': {<br><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> templateUrl: 'competition-enroll.html',<br></em></em></em></em></em><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> controller: 'enrollController'<br></em></em></em></em></em></em><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> }<br></em></em></em></em></em></em></em><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> }<br></em></em></em></em></em></em></em></em><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> })<br></em></em></em></em></em></em></em></em></em><em id="__mceDel">}</em>要注意的是:ui.router使用的是$stateProvider,ngRoute使用的是$routeProvider。 $state.go$state.go(to, [,toParams],[,options])形參to是string類型,必須,使用"^"或"."表示相對路徑;
形參toParams可空,型別為物件;
形參options可空,型別為對象,欄位包含:location為bool型別預設truestate,inherit為bool型別預設true, relative為物件預設
$state. $current,notify為bool型別預設為true, reload為bool型預設為false
$state.go('^')到上一層,例如從photo.detail到photo
$state.go('^.list')到鄰近state,例如從photo.detail到photo.list
$state.go('^.detail.comment')到孫子等級state,如從photo.detail到photo.detial.comment