原文：http://www.imooc.com/wenda/detail/236998

AngularJS自带有路由模块ngRoute，但是有经验的老师都推荐我们使用功能更完善更强大的ui-router来做路由。那到底什么是路 由呢？我自己的理解是：路由可以看作一个总控制器，它会根据页面的不同状态来填充页面的内容，这就是路由的主要用处。前端路由能极大地减少对服务器资源的 请求数量，因此在前端做路由显得尤为重要。

-----------------------------------------------------------------

由于路由是控制整个应用的显示状态的，所以我们要让路由模块第一时间接管整个应用。

使用ui-router很简单，下载它的包，在index.html中引入js文件，然后在模块的依赖中引入即可。

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

ui-router的本质其实是向我们预留的部分填充模板，它会在页面中去寻找ui-view这条指令，然后根据当前页面状态把对应的模板填充到ui-view所在的区块中。

比如一个典型的页面是nav+footer固定不变，中间主要部分作为内容显示区域时常发生变化。对应的页面结构就是

    <body>
        <nav>This is nav</nav>
        <div ui-view></div>
        <footer>This is footer</footer>
    </body>

然后我们的路由根据页面的状态，选择不同的html模板填充到ui-view的这个div里面。

在js中具体怎么使用ui-router呢

routerApp.config(function($stateProvider,$urlRouterProvider) {
        $urlRouterProvider.otherwise('/index');
        $stateProvider
               .state('index',{
                       url           : '/index',
                       templateUrl    : 'tpls/index.html'
               })
               .state('list',{
                       url           : '/list',
                       templateUrl     : 'tpls/list.html'
               })
               .state('detail',{
                       url           : '/detail',
                       templateUrl     : 'tpls/detail.html'
               });
});

以上就是angular路由最基本的模板。但是要注意一个问题，state的第一个参数并不是匹配规则，而是叫状态名，也就是说这个参数事实上可以是任意的，它用来给当前状态增加一个名字，触发路由规则还是看url的内容。比如这样

    .state('home',{
        url         : '/index',
        templateUrl : 'tpls/index.html'
    })

我们必须要地址栏输入www.xx.com/index，才会加载对应的模板而不是输入home，它仅仅是一个名字而已。

但是说，这个名字也是有它的作用的。看一个例子就明白了。

index.html

    <nav>This is the nav</nav>
    <div ui-view></div>
    <footer>This is the footer</footer>

list.html

    <div>
        <p>this is the list page</p>
        <div ui-view></div>
    </div>

list-main.html

        <div>
               <p>This is list-main Page</p>
        </div>

如果我们的路由这么写

               .state('aaa',{
                       url           : '/list',
                       templateUrl : 'tpls/list.html'
               })
               .state('bbb',{
                       url           : '/list/main',
                       templateUrl : 'tpls/list-main.html'
               })

那当我们在浏览器中输入www.xx.com/list/main的时候，页面结果为

如果我们的路由这么写

               .state('aaa',{
                       url            : '/list',
                       templateUrl : 'tpls/list.html'
               })
               .state('aaa.bbb',{
                       url            : '/main',
                       templateUrl : 'tpls/list-main.html'
               })

那当我么输入www.xx.com/list/main的时候，页面结果为

也 就是说state的的第一个参数为页面定义了一个名字，这个页面的模板只能放到它的父级中的ui-view去。如果没有.这种写法，那么默认的父级是 index.html，所以第一种写法bbb模板的父级是index.html，所以输入/list/main时会把对应模板加载到index.html 中的ui-view里面。而第二种写法aaa.bbb，这意思是说bbb的父级是aaa，所以bbb的模板要放到aaa模板(也就是list.html) 中的ui-view中。这时的url是在aaa页面的url后的url。

当然还有页面的嵌套，这部分其实大漠老师在视频中已经讲得很清楚了。

这是路由需要注意的一个作用域问题。

-----------------------------------------------------------------------

当然路由还有很多其他问题，因为路由是angularjs中很重要的一部分，但基本的用法就是上面所讲的了，如果把所有静态页面都写好了，那么用以上的内容就已经能做出一个精美的web了。现在学习了路由的基本用法，其它问题的话我们碰到一个再解决一个吧。

【angularjs】【学习心得】路由基础篇的更多相关文章

  1. Emacs学习心得之 基础配置

    作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Emacs学习心得之 基础配置 1.前言2.基础配置 一.前言 本篇博文记录了Emacs的一 ...

  2. Emacs学习心得之 基础操作

    作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Emacs学习心得之 基础操作 1.前言与学习计划2.Emacs基础操作 一. 前言与学习计 ...

  3. IntelliJ IDEA使用心得之基础篇

    今天和大家分享一个非常好用的Java开发工具-IntelliJ IDEA. 下载地址:https://www.jetbrains.com/idea/ 目录: 1)IntelliJ IDEA使用心得之基 ...

  4. Django学习笔记（基础篇）

    Django学习笔记(基础篇):http://www.cnblogs.com/wupeiqi/articles/5237704.html

  5. Spark学习体系整理(基础篇、中级篇、高级篇所涉及内容)

    新手刚开始学习比较迷茫,参考下面,然后找相关资料学习 1 Spark基础篇      1.1 Spark生态和安装部署          在安装过程中,理解其基本操作步骤.          安装部署 ...

  6. Python学习笔记之基础篇（-）python介绍与安装

    Python学习笔记之基础篇(-)初识python Python的理念:崇尚优美.清晰.简单,是一个优秀并广泛使用的语言. python的历史: 1989年,为了打发圣诞节假期,作者Guido开始写P ...

  7. mysql学习笔记之基础篇

    数据库学习之基础篇 ① 开放数据库互连(Open Database Connectivity,ODBC ② 结构化查询语言(Structured Query Language) ③ 进入mysql:M ...

  8. Python学习总结之一 -- 基础篇

    Python学习第一篇 一:写在前面 啊,最近我的新博客一直都没有更新学习内容了,只是最近一直都在忙着寻找实习机会(或许这只是一个借口,真实原因是我太懒惰了,改改改!).终于今天又投递了几个新的实习职 ...

  9. 与你一起学习MS Project——基础篇：Project基础应用

    为了更清晰容易地熟悉掌握Project的基础应用,我们在基础篇中一起来学习掌握在Project中如何做进度计划.资源计划.成本计划以及跟踪项目的执行情况并生成所需的项目报表. 一.进度计划 这里,首先 ...

随机推荐

  1. 关于Tcpreplay

    tcpprep -p -o /root/Desktop/ZS/Tcpreplay/cache_test.cache -i /root/Desktop/ZS/Tcpreplay/9.17.pcap tc ...

  2. tomcat webdav

    <servlet> <servlet-name>webdav</servlet-name> <servlet-class>org.apache.cata ...

  3. Cow Hopscotch

    Cow Hopscotch 题目描述 Just like humans enjoy playing the game of Hopscotch, Farmer John's cows have inv ...

  4. PAT (Advanced Level) 1025. PAT Ranking (25)

    简单题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm> ...

  5. CodeForces 581D Three Logos

    爆搜. #include<cstdio> #include<string.h> #include<math.h> #include<queue> #in ...

  6. Firefox 插件 JSview是一套比较实用的JS，CSS文件查看工具，很方便，很快捷地查看页面引用了哪些文件，作为Web前端开发者是一套必备的插件，由于Firefox升级过快，插件很快不兼容了，这里对插件做了一些调整，可以兼容最新Firefox浏览器（目前FireFox 21）

    JSView Firefox Plugins Download  点击下载

  7. 创建表结构相同的表，表结构相同的表之间复制数据，Oracle 中 insert into XXX select from 的用法

    /**1. 用select 创建相同表结构的表*/create table test_tbl2 as select * from test_tbl1 where 1<>1; /**  2. ...

  8. php 中的全局变量的理解

    $GLOBALS 是php中的一个全局变量的数组. $GLOBALS['var1']  代表的是 外部的全局变量 $var1 本身.global $var是外部$var的同名引用或者指针 例1: &l ...

  9. 使用Javascript/jQuery将javascript对象转换为json格式数据 - 海涛的CSDN博客 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  10. ios开发环境配置及cordova安装与常用命令

    一.ios开发环境配置 1.首先要有台Mac Book,如果有Mac Book,跳过步骤2.3.4,如果没有,执行步骤2.3.4: 2.下载并安装VMware Workstation,最好是下最新版本 ...