AngularJs 嵌套路由(ui-router)
<pre>
//1.聲明Angularjs 模塊熟史,把ui-router 傳入Angularjs模塊中
var myApp = angular.module("myApp", ['ui.router']);
//2.把 $stateProvider 和 $urlRouteProvider 路由引擎作為函數(shù)參數(shù)傳入,這樣我們就可以為這個應(yīng)用程序配置路由了.
myApp.config(function ($stateProvider, $urlRouterProvider) {
//3如果沒有路由引擎能匹配當(dāng)前的導(dǎo)航狀態(tài)宅倒,那它就會默認(rèn)將路徑路由至 PageTab.html, 這個頁面就是狀態(tài)名稱被聲明的地方. 相當(dāng)于switch case中的default選項
$urlRouterProvider.when("", "/PageTab");
//頁面被加載好以后第一個被使用的路由
$stateProvider
.state("PageTab", {
url: "/PageTab",
templateUrl: "PageTab.html"
})
//PageTab.Page1 定義子頁面,嵌入頁面中屯耸,他會在PageTab中顯示
.state("PageTab.Page1", {
url:"/Page1",
templateUrl: "Page-1.html"
})
.state("PageTab.Page2", {
url:"/Page2",
templateUrl: "Page-2.html"
})
.state("PageTab.Page3", {
url:"/Page3",
templateUrl: "Page3.html"
});
});</pre>
下面我們就只需要在首頁中
寫入拐迁,記得要引入angular.js文件和 angular-ui-router.js文件
<div>
<div ui-view=""/>
</div>