1. 程式人生 > >第3篇:angularJS使用ui-router的巢狀路由配置

第3篇:angularJS使用ui-router的巢狀路由配置

引入js檔案:

<script type="text/javascript" src="lib/angular/angular-1.3.0.js"></script>
    <script type="text/javascript" src="lib/angular/angular-ui-router.js"></script>

路由配置:
1)ui-serf配置

<a ui-sref="a">
    <span>頁面A</span>
</a>
<a ui-sref="b">
    <span
>
頁面A</span> </a>

2)state配置

var app = angular.module('app',['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('a', {
            url: "/a",
            templateUrl: "./view/a.html",
            controller:"aCtrl"
        })
        .state('b'
, { url: "/b", templateUrl: "./b.html", controller : "bCtrl" }) });

巢狀路由:

1)在a.html中

<a ui-sref="a.page1">
    <span>page1</span>
</a>
<a ui-sref="a.page2">
    <span>page2</span>
</a>

2)state配置

var app = angular.module('app'
,['ui.router']); app.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/dashboard"); $stateProvider .state('a', { url: "/a", templateUrl: "./view/a.html", controller:"aCtrl" }) .state('a.page1', { url: "/a/page1", templateUrl: "./view/page1.html", controller:"page1Ctrl" }) .state('a.page2', { url: "/a/page2", templateUrl: "./view/page2.html", controller:"page2trl" }) });