angular嵌套路由

Main.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-ui-router.js"></script>
    <script src="App.js"></script>

</head>
<body data-ng-app="myApp">
    <h1>AngularJS Home Page (Ui-router Demonstration)</h1>
    <div data-ui-view=""></div>
</body>
<html>

　　

PageTab.html

<div>
     <div>
         <span style="width:100px" ui-sref=".Page1"><a href="">Page-1</a></span>
         <span style="width:100px" ui-sref=".Page2"><a href="">Page-2</a></span>
         <span style="width:100px" ui-sref=".Page3"><a href="">Page-3</a></span>
     </div>
     <div>
          <div ui-view=""/>
     </div>
</div>

　　

Page1.html

<div>
     <div>
         <h1>Page 1 content goes here...</h1>
     </div>
</div>

　　

Page2.html

<div>
     <div>
         <h1>Page 2 content goes here...</h1>
     </div>
</div>

　　

Page3.html

<div>
     <div>
         <h1>Page 3 content goes here...</h1>
     </div>
</div>

App.js

var myApp = angular.module("myApp", ['ui.router']);

myApp.config(function ($stateProvider, $urlRouterProvider) {

     $urlRouterProvider.when("", "/PageTab");

     $stateProvider
        .state("PageTab", {
            url: "/PageTab",
            templateUrl: "PageTab.html"
        })
        .state("PageTab.Page1", {
            url:"/Page1",
            templateUrl: "Page1.html"
        })
        .state("PageTab.Page2", {
            url:"/Page2",
            templateUrl: "Page2.html"
        })
        .state("PageTab.Page3", {
            url:"/Page3",
            templateUrl: "Page3.html"
        });
});

　　

posted @ 2017-04-27 09:22  sunZL  阅读(234)  评论(0)    收藏  举报