angular UI-Router示例一

时间：2015-04-22 18:24:11 阅读：144 评论：0 收藏：0 [点我收藏+]

标签：

一、选择angular-ui-router的好处

ui-router是一个社区库用来完善ng-route的诸多不足
UI-Router路由器允许嵌套视图(nested views)和多个命名视图(multiple named views),我们可能有较多的页面需要继承其他部分，所以很有用。
通过构建ui-sref来实现不同的状态链接到不同的页面
states允许你通过$statsParams来轻松的传递信息，允许不同的信息不同的states的map格式。
你的路由可以访问动态创建的链接

二、简单示例，步骤如下：

新建index.html

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

</head>
<body ng-app="myApp">
    <h1>AngularJS Home Page</h1>
    <div ui-view=""></div>
</body>
<html>

新建PageTab.html
当我们想要在母版页中管理所有的页面时，我们就会想要一个叫做”ui-view“的占位标记, 因此我们现在把PageTab.html叫做一个母版页，因为它会把我们需要在PageTab.html中用”ui-view“ 声明好的其它页面都管理起来.
```
<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>
```
使用ui-sref属性可以将App.js中定义的状态同tab中定义的对应文本进行了关联. 当我们使用点符号对它进行了声明，程序就会认为页面时ui-view中的子页面或者说嵌入页面，它们就是路由配置中需要被展示的页面.

使用 . 号进行了分隔. 这里很关键，它会告诉路由引擎我们在这里定义的是子页面或者嵌入页面。

新建Page1.html Page2.html Page3.html

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

其他2个同上所示。

在index.html中引入angular-ui-router.js 参考步骤1.

新建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"
    });
});

angular UI-Router示例一

标签：

原文地址：http://blog.csdn.net/u010834071/article/details/45194487

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行