【angularjs】【学习心得】路由基础篇

原文：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了。现在学习了路由的基本用法，其它问题的话我们碰到一个再解决一个吧。

时间： 2024-10-10 02:47:11

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

Java快速教程--vamei 学习笔记（基础篇）

链接:http://www.cnblogs.com/vamei/archive/2013/03/31/2991531.html java快速教程第1课 从HelloWorld到面向对象 学习网址:http://www.cnblogs.com/vamei/archive/2013/03/14/2958654.html java快速教程第2课 方法与数据成员 学习网址:http://www.cnblogs.com/vamei/archive/2013/03/25/2964430.html java快

做web开发需要学习哪些技术--基础篇

做一个web网站,包含哪些技术,自己需要学习哪些技术 自己想到哪里就写到哪里 -- 给自己做的一个记录 1: 页面的展示, 一个web的开发语言  1.1 一个web的开发语言需要注意哪方面,才能符合你的网站业务发展     1:语言的选择     2:框架的设计 - 怎么符合未来业务的发展     3:对于业务的了解     4:了解http协议      那么就要了解tcp/ip协议 3: web安全     web安全又有哪些方面需要注意的呢     3.1 xss     3.2 sql

AngularJS学习---Routing(路由) &amp; Multiple Views(多个视图) step 7

1.切换分支到step7,并启动项目 git checkout step-7 npm start 2.需求: 在步骤7之前,应用只给我们的用户提供了一个简单的界面(一张所有手机的列表),并且所有的模板代码位于index.html文件中.下一步是增加一个能够显示我们列表中每一部手机详细信息的页面.可以先看一下step6和7的代码区别 . 为了增加详细信息视图,我们可以拓展index.html来同时包含两个视图的模板代码,但是这样会很快给我们带来巨大的麻烦.相反,我们要把index.html模板转变

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

新手刚开始学习比较迷茫,参考下面,然后找相关资料学习 1 Spark基础篇      1.1 Spark生态和安装部署          在安装过程中,理解其基本操作步骤.          安装部署            Spark安装简介            Spark的源码编译            Spark Standalone安装            Spark Standalone HA安装            Spark应用程序部署工具spark-submit      

mysql学习笔记之基础篇

数据库学习之基础篇 ① 开放数据库互连(Open Database Connectivity,ODBC ② 结构化查询语言(Structured Query Language) ③ 进入mysql:Mysql -u cz -p cz; ④ 显示系统的database: show databases; ⑤ 创建database:create database 名字; ⑥ 选择database:use 名字; ⑦ 删除数据库:drop database name;或者表 ⑧ 查看表:show tab

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

Python学习第一篇 一:写在前面 啊,最近我的新博客一直都没有更新学习内容了,只是最近一直都在忙着寻找实习机会(或许这只是一个借口,真实原因是我太懒惰了,改改改!).终于今天又投递了几个新的实习职位之后幡然醒悟,我的执行力还是太弱了,我得更加有自律性更加坚持才行.所以今天,我把之前学习的Python基础知识总结一下. 二:认识Python 首先我们得清楚这个:Python这个名字是从Monty Python借鉴过来的,而不是源于大家所知道的大蟒蛇的意思.我们为什么要学习Python呢?就我而

Emacs学习心得之 基础操作

1.前言与学习计划2.Emacs基础操作 一. 前言与学习计划 本篇博文记录了Emacs的一些基础操作与概念,相关的阅读如下: (emacs tutorial 中文精简版 )    http://blog.chinaunix.net/uid-24386676-id-119687.html (emacs user's guide)  http://www.cbi.pku.edu.cn/chinese/documents/csdoc/emacs/ (学习Emacs系列教程 )  http://www

学习mysql语法--基础篇（二）

  前  言  mysql  mysql语法--本篇学习都是通过使用Navicat Premium(数据库管理工具),连接mysql数据. 本篇学习主要有两个部分: [SQL语句的组成]   DML 数据操作语言(插入.删除和修改数据库中的数据)INSERT UPDATE DELETE   DQL 数据查询语言(用来查询数据库中的数据)SELECT   DCL 数据控制语言(用来控制存取许可.存取权限等)CREATE   DDL 数据定义语言(用来建立数据库.数据库对象和定义表的列)CREATE

学习mysql语法--基础篇（一）

  前  言  mysql  mysql语法--本篇学习都是通过使用Navicat Premium(数据库管理工具),连接mysql数据. 本篇学习主要有两个部分:    一.创建用户,创建数据库,给用户分配权限,删除用户权限.    二.MYSQL中常见的数据类型 三.表-创建表.主键.外键    四.数据库设计的三大范式 以下所有代码全部在新建查询表里面使用mysql语法编辑. 1.创建用户,创建数据库,给用户分配权限,删除用户权限. /* SQL 多行注释 */-- SQL 单行注释 创建