AngularJS ui-router (嵌套路由)的簡單學習
今天讓我們一起來學習一下AngularJS裏的嵌套路由。
ui-router和同屬AngularJS框架一部分的ng-route一樣強大. ui-router提供了讓我們可以做路由嵌套和視圖命名的特性，嵌套路由功能主要是依賴$stateProvider服務,$urlRouterProvider服務與 ui-view實現。.
首先我們先使用AngularJS框架來創建簡單的html和JavaScript頁面。
我們需要創建的文件有一下這些：
1.先創建主體頁面 main.html
2.嵌套路由頁面 page.html
3.在創建三個子頁面 page1.html 、 page1.html 、 page1.html
註意：在使用這個方法時，記得要引入angular-ui-route.js插件哦！
main.html
創建頁面如下：
<!DOCTYPE html> <html ng-app="mk"> <head> <title></title> <script src="libs/angular.min.js"></script> <script src="libs/angular-ui-route.js"></script> <script> varapp = angular.module("mk", [‘ui.router‘]); // 依賴$stateProvider服務與$urlRouterProvider服務 app.config(function ($stateProvider, $urlRouterProvider) { }); </script> </head> <body data-ng-app="myApp"> <h1>路由嵌套的主體頁-----AngularJS Home Page (Ui-router)</h1> <div ui-view=""></div>//必填 </body> <html>
Page.html
創建頁面如下：
<div>
<span style="padding-right: 20px" ><a href="javascript:;">Page-1</a></span>
<span style="padding-right: 20px" ><a href="javascript:;">Page-2</a></span>
<span style="padding-right: 20px" ><a href="javascript:;">Page-3</a></span>
</div>
Page1.html
創建頁面如下：
<!--子頁面1-->
<div>
<div>
<h1>Page 子頁面1</h1>
</div>
</div>
Page2.html
創建頁面如下：
<!--子頁面2-->
<div>
<div>
<h1>Page 子頁面2</h1>
</div>
</div>
Page3.html
創建頁面如下：
<!--子頁面3-->
<div>
<div>
<h1>Page 子頁面3</h1>
</div>
</div>
以上還是個開始，主體頁面main.html還沒有嵌套page.html頁面，接下來先把page.html頁面嵌套在其中吧。
此時main.html
創建頁面如下：（紅色部分為新加內容）
<!DOCTYPE html> <html ng-app="mk"> <head> <title></title>
<style>
body{
background: #cc9900;
}
</style>
<script src="libs/angular.min.js"></script> <script src="libs/angular-ui-route.js"></script> <script> var app = angular.module("mk", [‘ui.router‘]); // 依賴$stateProvider服務與$urlRouterProvider服務 app.config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.when("", "/Page"); //這一行定義了會在main.html頁面第一個顯示出來的狀態，作為頁面被加載好以後第一個被使用的路由. $stateProvider .state("Page", { url: "/Page", templateUrl: "Page.html" }) }); </script> </head> <body data-ng-app="myApp"> <h1>路由嵌套的主體頁-----AngularJS Home Page (Ui-router)</h1> <div ui-view=""></div> </body> <html>
效果圖：（現在的鏈接還未添加內容）
接下來完善一下Page.html
創建頁面如下：
<div>
<span style="padding-right: 20px" ui-sref=".Page1"><a href="javascript:;">Page-1</a></span>
<span style="padding-right: 20px" ui-sref=".Page2"><a href="javascript:;">Page-2</a></span>
<span style="padding-right: 20px" ui-sref=".Page3"><a href="javascript:;">Page-3</a></span>
</div>
<div ui-view=""/></div>
最後我們把main.html修改完整，讓在 Page-1 或者 Page-2 再或者 Page-3 菜單上點擊的時候需要頁面在占位標記那裏顯示出來。
【完整的main.html】
<!DOCTYPE html> <html ng-app="mk"> <head> <title></title> <script src="libs/angular.min.js"></script> <script src="libs/angular-ui-route.js"></script> <script> var app = angular.module("mk", [‘ui.router‘]); // 依賴$stateProvider服務與$urlRouterProvider服務 app.config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.when("", "/Page"); $stateProvider .state("Page", { url: "/Page", templateUrl: "Page.html" }) // Page下的page1 .state("Page.Page1", { url:"/Page1", templateUrl: "Page1.html" }) .state("Page.Page2", { url:"/Page2", templateUrl: "Page2.html" }) .state("Page.Page3", { url:"/Page3", templateUrl: "Page3.html" }); }); </script> </head> <body data-ng-app="myApp"> <h1>路由嵌套的主體頁-----AngularJS Home Page (Ui-router)</h1> <div ui-view=""></div> </body> <html>
好了，AngularJS裏的嵌套路由到現在就全部實現了，你們快點在自己的本上運行一下吧！
AngularJS ui-router (嵌套路由)的簡單學習