AngularJS ui-router(嵌套路由)

2014-11-25 11:59| 发布者: joejoe0332| 查看: 33944| 评论: 1|原作者: LeoXu, 痞子蔡|来自: oschina

摘要: AngularJS 嵌套路由：这是我针对同一个主题（ui-router）的第二篇文章. 如果你对第一篇文章感兴趣的话，可以访问这里. 好了，让我们继续吧，来看看嵌套的ui-router状态是怎么回事. ui-router和同属AngularJS框架一 ...

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

1

2

3

4

5

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

Page2.html

1

2

3

4

5

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

Page2.html

1

2

3

4

5

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

App.js

var myApp = angular.module("myApp", [&apos;ui.router&apos;]);
 
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"
        });
});

　　一切OK，现在让我们把这个应用程序运行起来吧.

1 23 / 3 页在本页阅读全文

酷毙

雷人

鲜花

鸡蛋

漂亮

收藏分享邀请

上一篇：程序员如何做出“不难看”的设计下一篇：好的代码至少要修改两遍

快毕业了，没工作经验，
找份工作好难啊？
赶紧去人才芯片公司磨练吧!!

帐号		自动登录	找回密码
密码			注册

AngularJS ui-router(嵌套路由)

最新评论