探討AngularJs中ui.route的簡單應用

更新時間：2016年11月16日 16:42:15 作者：會捕鼠的魚

這篇文章主要介紹了AngularJs中ui.route的簡單應用,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

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>

app.js

將UI-Router作為web應用的依賴，注入到主程序：

url：url選項將會為該應用的狀態(tài)指定一個URL基于用戶瀏覽該應用所在的狀態(tài)(地址顯示鏈接)。這樣當在瀏覽該應用的時候便能實現(xiàn)深度鏈接的效果。

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類型默認true,inherit為bool類型默認true, relative為對象默認

$state.$current,notify為bool類型默認為true, reload為bool類型默認為false

$state.go('photos.detail')

$state.go('^')到上一級,比如從photo.detail到photo

$state.go('^.list')到相鄰state,比如從photo.detail到photo.list

$state.go('^.detail.comment')到孫子級state，比如從photo.detail到photo.detial.comment

以上所述是小編給大家介紹的AngularJs中ui.route的簡單應用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章:

AngularJS中$http使用的簡單介紹
在AngularJS中主要使用$http服務與遠程http服務器交互，本篇文章主要介紹了AngularJS中$http使用的簡單介紹，非常具有實用價值，需要的朋友可以參考下。
2017-03-03
Angular PWA使用的Demo示例
這篇文章主要介紹了Angular PWA使用的Demo示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
淺析如何利用angular結合translate為項目實現(xiàn)國際化
利用angular進行國際化轉換時利用【ng-bind-html】來進行語言的翻譯是接近幾乎比較完美的方案，不會像利用【{{}}】模式，當頁面加載緩慢時導致頁面太丑。本文對其實現(xiàn)方法進行介紹，有需要的朋友可以看下
2016-12-12
Bootstrap和Angularjs配合自制彈框的實例代碼
今天小編通過本文給大家分享Bootstrap和Angularjs配合自制彈框的實例代碼，代碼簡單易懂，有需要的朋友跟著小編一起學習
2016-08-08
AngularJS 最常用的八種功能(基礎知識)
這篇文章主要介紹了AngularJS 最常用的八種功能，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧
2017-06-06
spring+angular實現(xiàn)導出excel的實現(xiàn)代碼
這篇文章主要介紹了spring+angular實現(xiàn)導出excel的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-02-02
Angular 4依賴注入學習教程之組件服務注入（二）
大家都知道依賴注入式AngularJS的重要特性之一，之前我們已經介紹了關于Angular 4依賴注入基礎的內容，下面這篇文章主要給大家介紹了關于Angular 4依賴注入之組件服務注入的相關資料，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-06-06
AngularJS讀取JSON及XML文件的方法示例
這篇文章主要介紹了AngularJS讀取JSON及XML文件的方法,涉及AngularJS針對xml及json格式文件數(shù)據的讀取、遍歷、輸出等相關操作技巧,需要的朋友可以參考下
2017-05-05
AngularJS實現(xiàn)星星等級評分功能
這篇文章主要為大家詳細介紹了AngularJS實現(xiàn)星星等級評分功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-09-09
解決angularjs service中依賴注入$scope報錯的問題
今天小編就為大家分享一篇解決angularjs service中依賴注入$scope報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10