angular UI-Router示例一

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

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

二、简单示例,步骤如下:

  1. 新建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>

  2. 新建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中的子页面或者说嵌入页面,它们就是路由配置中需要被展示的页面.

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

  3. 新建Page1.html Page2.html Page3.html
    <div >
         <div>
             <h1>Page 1 content goes here...</h1>
         </div>
    </div>

    其他2个同上所示。

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

  5. 新建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示例一)