原文：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. PAT (Advanced Level) 1051. Pop Sequence (25)

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

  2. jQuery实现瀑布流(pc、移动通用)

    使用 jQuery 的 Masonry 插件来实现这种页面形式 1,分别下载 jQuery 与 Masonry ,然后把他们都加载到页面中使用. 加载代码: <script src=" ...

  3. C. Bear and Colors

    C. Bear and Colors time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  4. 定制化jQuery

    毋庸置疑,jQuery很强大,很方便,但是......越来越臃肿,怎么办?,jquery只基于模块化开发的,可以通过工具定制jquery,选择你需要的模块即可. 下面这个网站可以帮你完成定制 http ...

  5. 关于NIOS ii烧写的几种方式

    1. 方法一:.sof和.elf全部保存在FPGA内,程序加载和运行也是在FPGA内部. 把FPGA的配置文件.sof通过JTAG方式下载(其实是在线运行)进入FPGA本身,此时在NIOS II的界面 ...

  6. LintCode 11 二叉查找树的搜索区间

    题目链接:http://www.lintcode.com/zh-cn/problem/search-range-in-binary-search-tree/ 1.描述 给定两个值 k1 和 k2(k1 ...

  7. Ubuntu“无法解析或打开软件包的列表或是状态文件”的解决办法。_StarSasumi_新浪博客

    Ubuntu"无法解析或打开软件包的列表或是状态文件"的解决办法. (2011-04-30 14:56:14) 转载▼ 标签: ubuntu apt 分类: Ubuntu/Linu ...

  8. Spring+struts+ibatis(一)环境准备工作

    首先我们先了解几个jar包的作用和一些未曾见过的接口和类 xwork-2.0.7.jar XWork是一个标准的Command模式实现,并且完全从web层脱离出来.Xwork提供了很多核心功能:前端拦 ...

  9. <Natural Language Processing with Python>学习笔记一

    Spoken input (top left) is analyzed, words are recognized, sentences are parsed and interpreted in c ...

  10. WPF 制作电子相册浏览器

    周末的时候,闲着无聊,做了一个电子相册浏览器.比较简单.界面如下: 主要部分代码如下: MainWindow.xaml <local:HeaderedWindow x:Class="P ...