anglar ui-route 学习笔记

一、页面导航实现(不分层)

1、新建一个主页面，如main.html，引入angular.min.js，angular-ui-router.min.js (关于angularjs的一些插件可以上"http://www.bootcdn.cn/angular-ui-router/" 引入 ‘/‘后面是对应的插件名，版本可以自选)；

<script src="angular.min.js"></script>
<script src="//cdn.bootcss.com/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>

2、内容展示 ui-sref对应state   href =""会自动查找链接   ui-view内容展示容器位置

<!--ui-sref 对应 state规则
href="" 会获取url
ui-view 内容展示容器-->
<nav>
    <div><a href="" ui-sref="page1">首页</a></div>
    <div><a href="" ui-sref="page2">新闻</a></div>
    <div><a href="" ui-sref="page3">科技</a></div>
    <div ui-view=""></div>
</nav>

3、路由设置js代码

var myApp = angular.module("myApp", [‘ui.router‘]); //定义angular模块，注入ui.router模块

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

    $urlRouterProvider.when("", "/page1");  //默认路径 ‘/page1‘

    $stateProvider
        .state("page1", {   //对应ui-sref
            url: "/page1",  //路径
            templateUrl: "page1.html"   //对应模板
        })
        .state("page2", {
            url: "/page2",
            templateUrl: "page2.html"
        })
        .state("page3", {
            url: "/page3",
            templateUrl: "page3.html"
        });

});

4、对应page1.html,page2.html,page3.html加上需要的内容就可以了。是不是很简单呢？

二、嵌套的ui-router(借助一个母版文件实现路由分层) 这里把真正的内容渲染ui-view放到了pageTab.html文件中，路径相当都变成/pageTab/pagex..

1、新建main.html文件，引入对应的angularjs相关文件，并写好内容容器；

<div ui-view=""></div>

2、新建母版文件pageTab.html，在母版文件里写上对应的a链接，并提供内容容器ui-view；

<!--嵌套视图外层模板 ui-sref=".xxx" ‘.‘表示下一级 这里为pageTab.page1 对应state也是pageTab.page1 　　内容容器在‘/pageTab‘路径下，这里ui-view渲染的内容都是/pageTab下的二级目录-->
<div>
    <div>
        <span style="width:100px"><a href="" ui-sref=".page1">Page-1</a></span>
        <span style="width:100px"><a href="" ui-sref=".page2">Page-2</a></span>
        <span style="width:100px"><a href="" ui-sref=".page3">Page-3</a></span>
    </div>
    <div>
        <div ui-view=""/>
    </div>
</div>

3、路由设置的js代码

var myApp = angular.module("myApp", [‘ui.router‘]); //新建angular模块，注入ui.router模板

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

    $urlRouterProvider.when("", "/pageTab");    //默认路径

    $stateProvider
        .state("pageTab", {
            url: "/pageTab",    //路径 ‘/pageTab‘ 默认值
            templateUrl: "pageTab.html"
        })
        .state("pageTab.page1", {   //
            url:"/page1",   // 这里"根目录"指向/pageTab 此处为二级目录‘/pageTab/page1‘
            templateUrl: "page1.html"
        })
        .state("pageTab.page2", {
            url:"/page2",
            templateUrl: "page2.html"
        })
        .state("pageTab.page3", {
            url:"/page3",
            templateUrl: "page3.html"
        });
});

4、运行main.html，自动重定向到"/pageTab"，展示出三个a链接选项，点击a链接，会进入二级目录下，如"/pageTab/page1"。

在此记录下ui-router一些简单用法，加深理解记忆，也方便以后使用。