【angular.js】UI-Router之angular路由學習
AngularJs中的路由，應用比較廣泛，主要是允許我們通過不同的url訪問不同的內容，可實現多視圖的單頁web應用。下面看看具體怎麽使用。
關於路由
通常我們的URL形式為http://jtjds.cn/first/page，但在單頁web應用中angularjs通過#+標記實現，比如下面的頁面，將是下文中的路由列子。
http://192.168.1.109:8000/angular-program/src/main.html#/pagetable/page1 http://192.168.1.109:8000/angular-program/src/main.html#/pagetable/page2 http://192.168.1.109:8000/angular-program/src/main.html#/pagetable/page3
當我們點擊以上任一一個鏈接時，向服務器請求的地址都是http://192.168.1.109:8000/angular-program/src/main.html ，而＃號之後的內容在向服務器端請求時會被瀏覽器忽略掉，所以我們在客戶端實現＃號後面的功能實現即可。簡單來說，路由通過＃＋標記幫助我們區分不同邏輯頁面，並將其綁定到對應的控制器上。
每個頁面均有一個控制器控制，通過路由，從而將不同的頁面展示出來。
如何使用路由？
新建main.html
<!doctype html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
<script src="angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<!-- 引入angularjs框架和ui-router框架，引入app.js框架 -->
<h1>AngularJS 路由跳轉</h1>
<div ui-view=""></div> --展示page.html的頁面內容
</body>
</html>
新建pagetable.html頁面
<!DOCTYPE html>
<div>
<div>
<span style="width:100px" ui-sref=".page1"><a href="">首頁</a></span>
<span style="width:100px" ui-sref=".page2"><a href="">關於我</a></span>
<span style="width:100px" ui-sref=".page3"><a href="">留言板</a></span>
</div>
<div>
<div ui-view=""></div> －－展示page1,page2,page3頁面的內容
</div>
</div>
新建page1.html頁面
<!DOCTYPE html>
<div>
<div>
<h1>11111111111111111111</h1>
</div>
</div>
新建page2.html頁面
<!DOCTYPE html>
<div>
<div>
<h1>22222222222222222</h1>
</div>
</div>
新建page3.html頁面
<!DOCTYPE html>
<div>
<div>
<h1>333333333333333</h1>
</div>
</div>
app.js內容
var app=angular.module("myapp",[‘ui.router‘]);//聲明angualrjs模塊，並把ui-router傳人angularjs模塊
app.config(function ($stateProvider, $urlRouterProvider) { //聲明把$stateprovider和$urlrouterprovider路由引擎作為函數參數傳人,為應用程序配置路由
$urlRouterProvider.otherwise("/pagetable");
$stateProvider
.state("pagetable", {
url: "/pagetable",
templateUrl: "pagetable.html" //第一個顯示出來的頁面
})
.state("pagetable.page1", {
url:"/page1",
templateUrl: "page1.html" //
})
.state("pagetable.page2", {
url:"/page2",
templateUrl: "page2.html"
})
.state("pagetable.page3", {
url:"/page3",
templateUrl: "page3.html"
});
});
下面解釋下配置路由的意思。angularjs使用UI－rooter將其傳人angularjs模塊。OK，我們將項目運行起來，如果時本地直接打開的話，在非safari下面運行，會出現跨域的問題，我們來看下。即只有在safari下才能正常打開，以本地的file://開頭的在其它瀏覽器下是不能打開文件的。主要是js同源策略的影響。
那麽如何將項目運行在服務器上跑起來呢？提供一個工具：https://www.npmjs.com/package/anywhere 可實現簡單頁面運行。具體安裝看文檔說明。OK，現在讓我們啟動項目，
現在讓我們看下運行的效果：如下圖所示
點擊不同的鏈接，下面將會顯示不同的頁面。那麽簡單的路由跳轉就完成啦。簡單來首，路由問題，比較簡單，即如何控制多個頁面在同一頁面下跳轉？
【angular.js】UI-Router之angular路由學習