原文: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】【学习心得】路由基础篇的更多相关文章
-
Emacs学习心得之 基础配置
作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Emacs学习心得之 基础配置 1.前言2.基础配置 一.前言 本篇博文记录了Emacs的一 ...
-
Emacs学习心得之 基础操作
作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Emacs学习心得之 基础操作 1.前言与学习计划2.Emacs基础操作 一. 前言与学习计 ...
-
IntelliJ IDEA使用心得之基础篇
今天和大家分享一个非常好用的Java开发工具-IntelliJ IDEA. 下载地址:https://www.jetbrains.com/idea/ 目录: 1)IntelliJ IDEA使用心得之基 ...
-
Django学习笔记(基础篇)
Django学习笔记(基础篇):http://www.cnblogs.com/wupeiqi/articles/5237704.html
-
Spark学习体系整理(基础篇、中级篇、高级篇所涉及内容)
新手刚开始学习比较迷茫,参考下面,然后找相关资料学习 1 Spark基础篇 1.1 Spark生态和安装部署 在安装过程中,理解其基本操作步骤. 安装部署 ...
-
Python学习笔记之基础篇(-)python介绍与安装
Python学习笔记之基础篇(-)初识python Python的理念:崇尚优美.清晰.简单,是一个优秀并广泛使用的语言. python的历史: 1989年,为了打发圣诞节假期,作者Guido开始写P ...
-
mysql学习笔记之基础篇
数据库学习之基础篇 ① 开放数据库互连(Open Database Connectivity,ODBC ② 结构化查询语言(Structured Query Language) ③ 进入mysql:M ...
-
Python学习总结之一 -- 基础篇
Python学习第一篇 一:写在前面 啊,最近我的新博客一直都没有更新学习内容了,只是最近一直都在忙着寻找实习机会(或许这只是一个借口,真实原因是我太懒惰了,改改改!).终于今天又投递了几个新的实习职 ...
-
与你一起学习MS Project&mdash;&mdash;基础篇:Project基础应用
为了更清晰容易地熟悉掌握Project的基础应用,我们在基础篇中一起来学习掌握在Project中如何做进度计划.资源计划.成本计划以及跟踪项目的执行情况并生成所需的项目报表. 一.进度计划 这里,首先 ...
随机推荐
-
Android UI体验之全屏沉浸式透明状态栏效果
前言: Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体 ...
-
iOS 设置不同的字体颜色
//设置不同字体颜色 -(void)fuwenbenLabel:(UILabel *)labell FontNumber:(UIFont *)font AndRange:(NSRange)range ...
-
MyBatis源码分析(1)——整体依赖关系图
后续补充更新
-
mac 安装Beautiful Soup
Beautiful Soup是一个Python的一个库,主要为一些短周期项目比如屏幕抓取而设计.有三个特性使得它非常强大: 1.Beautiful Soup提供了一些简单的方法和Python术语,用于 ...
-
吐血bug-- 多个input框接连blur事件导致alert接连弹出
本来今天想记录一下Flow在vue源码中的应用,结果临时触发了个bug... bug描述: elementUi + Vue 技术 需求:一个表格中有至少两条数据,每条数据都有input框,在失去焦点后 ...
-
[Solution] JZOJ-5806 简单的操作
[Solution] JZOJ-5806 简单的操作 题面 Description 从前有个包含n个点,m条边,无自环和重边的无向图. 对于两个没有直接连边的点u;v,你可以将它们合并.具体来说,你可 ...
-
【PAT】B1041 考试座位号(15 分)
/* */ #include<stdio.h> #include<algorithm> using namespace std; struct stu{ char number ...
-
解题:洛谷2633 Count on a tree
题面 在树上建主席树...... 每个点从父亲那里建过来,最后建出来就是从根到$i$这条链上的主席树,查询的时候一边差分一边查询 ($cmt[u]+cmt[v]-cmt[lca(u,v)]-cmt[a ...
-
到底什么是BFC、IFC、GFC和FFC,次奥?
软件开发的一般被称为民工,搞前端的,有人形容为是掏粪工,说白了连民工级别高都没有.说直接点就是个制作界面的,注意,连设计界面的都算不上,一般前端都是拿着设计稿去照这样子开发的. 说这些无非是觉得前端前 ...
-
vs2017创建dotnetcore web项目,并部署到centos7上
一.打开vs2017创建web项目 二.简单的创建项目后,发布项目 三. 在centos上创建webroot目录,将发布的项目文件复制到该目录下(本人用虚拟机测试) 四.在webroot目录下打开终端 ...