angularJs ui-route

標籤：cti   conf   module   var   font   function   ref   首頁   配置路由   

我們首先要建立幾個檔案      pageTab.html、tab1.html、tab2.html、tab3.html

執行個體與講解

1、首先寫一個頁麵包括如下內容，主要是js部分

<script src="angular.min.js"></script>
<script src="angular-ui-route.js"></script>
<script>
var app=angular.module("app",[‘ui.router‘]);//聲明AngularJS模組, 並把ui-router傳入AngularJS主模組，所有的結合起來我們就得到了Angular模組。

//這一行聲明了把 $stateProvider 和 $urlRouteProvider 路由引擎作為函數參數傳入，這樣我們就可以為這個應用程式配置路由了.
　　app.config(function($stateProvider,$urlRouterProvider){

//這一行做什麼的呢，如果沒有路由引擎能匹配當前的導航狀態，那它就會預設將路徑路由至 PageTab.html, 這個頁面就是狀態名稱被聲明的地方. 只要理解了這個，那它就像switch case語句中的default選項.
　　$urlRouterProvider.when(‘‘,‘pageTab‘);

//這一行定義了會在pagetab.html頁面第一個顯示出來的狀態，作為頁面被載入好以後第一個被使用的路由.
　　　　$stateProvider.state(‘pageTab‘,{
　　　　　　url:‘/pageTab‘,
　　　　　　templateUrl:‘pageTab.html‘

// 現在，就由這一行來定義頁面, 但是等一等，這裡有點不同，我們之前為上面的狀態名稱加上了首碼，並且使用點“.“號進行了分隔. 這裡很關鍵，它會告訴路由引擎我們在這裡定義的是子頁面/嵌入頁面/嵌入(sub page / nested page / nested)狀態的page/route.
　　　　}).state(‘pageTab.tab1‘,{
　　　　　　url:‘/tab1‘,
　　　　　　templateUrl:‘tab1.html‘
　　　　}).state(‘pageTab.tab2‘,{
　　　　　　url:‘/tab2‘,
　　　　　　templateUrl:‘tab2.html‘
　　　　}).state(‘pageTab.tab3‘,{
　　　　　　url:‘/tab3‘,
　　　　　　templateUrl:‘tab3.html‘
　　　　})
　　})
</script>
<div ui-view></div>

2、這是首頁面，第一次使用路由就是顯示pageTab.html，點擊tab1或tab2或tab3然後跳轉到相應的頁面

<div>
<a href="javascript:;" ui-sref=‘.tab1‘>tab1</a>
<a href="javascript:;" ui-sref=‘.tab2‘>tab2</a>
<a href="javascript:;" ui-sref=‘.tab3‘>tab3</a>
<div ui-view></div>
</div>

 

angularJs ui-route