AngularJS 视图和路由
用,我们用它设置了一个默认跳转到'/'路径的路由
低优先级指令
创建一个新的作用域;
移除上一个视图,同时上一个作用域也会被清除;
将新的作用域同当前模板关联在一起;
如果路由中有相关的定义,那么就把对应的控制器同当前作用域关联起来;
触发$viewContentLoaded事件;
如果提供了onload属性,调用该属性所指定的函数。
。
'MyController'
{}
'<div><h2>Route</h2></div>'
'views/template_name.html'
属性所指定的路径通过XHR读取视图(或者从$templateCache中读
AngularJS会将模板的内容渲染到具有ng-view指令的DOM
{
$http.get('/api').then(
response.data; },
false; }
AngularJS会将列表中的元素都注入到控制器中。如果这些依赖是
工厂,即可以是一个服务的名字,也可以是一个返回值,它是会被注入到控制器中的函
resolve会发送一个$http请求,并将data的值替换为返回结果的值。列
function(route,path,search)
AngularJS会在调用它时传入下面三个参数中:
[]).
function($routeProvider) {
'HomeController',
'views/home.html'
'InboxController',
'views/inbox.html'
'/'});
otherwise方法会在没有任何路由匹配时被调
视图的生命周期由作为一个模板开始, 它将和模型合并并最终
渲染到浏览器的DOM中。 与其他模板系统不同的是,
AngularJS使用一种独特的形式来渲染视图
HTML是声明是的, 声明式的语言适合用来编写UI。 视图不应该包含任何行
为。
因为控制器和视图没有直接的调用关系,
所以可以使多个视图对应同一个控制器。 这对“换肤” 、 适配不同设备( 比如移动设备和台式机) 、 测试, 都非常重要。
模型必须在作用域中时可以被引用, 这样才能被渲染
生成视图。 和其他框架不一样的是, Angularjs对模型本身没有任何限制和要求。
你不需要继承任何类
也不需要实现指定的方法以供调用或者改变模型。 模型可以是原生的对象哈希形式的, 也可以是完整
对象类型的。 简而言之,
模型可以是原生的Javascript对象。
用来获取页面当前的路径
$location.path();
// 返回当前路径
路由或地址
希望跳转后不能点击后退按钮, AngularJS提供了replace()
方法来实现这个功能
$location.absUrl()
$location.hash();
// 返回当前的hash片段
host() 方法用来获取URL中的主机:
$location.host();//
当前URL的主机
port() 方法用来获取URL中的端口号:
$location.port();//
当前URL的端口
protocol() 方法用来获取URL中的协议:
$location.protocol();//
当前URL的协议
search() 方法用来获取URL中的查询串:
$location.search();
//
用对象设置查询
$location.search({name:
'Ari', username: 'auser'});
$location.search('name=Ari&username=auser');
search方法可以接受两个参数
search(可选,字符串或对象)
这个参数代表新的查询参数。
hash对象的值可以是数组。
paramValue(可选,字符串)
如果search参数的类型是字符串,那么paramValue会做为该参数的值覆盖URL当中的对应
值。如果paramValue的值是null
,对应的参数会被移除掉。
url() 方法用来获取当前页面的URL:
$location.url();
// 该URL的字符串
如果调用url()
方法时传了参数,会设置并修改当前的URL,这会同时修改URL中的路径、
查询串和hash,并返回$location。
$location.url('/home?name=Ari#hashthing');
url()
方法可以接受两个参数。
url
(可选,字符串)
新的URL的基础的前缀。
replace(可选,字符串)
想要修改成的路径。
当Angular从$location服务(通过$location.path() 、 $location.search()
等)对浏览器
的地址作更新时,会触发$locationChangeStart事件。
当且仅当浏览器的地址成功变更,又没有阻止
$locationChangeStart事件的情况下,
$locationChangeSuccess事件会从$rootScope上广播出来。
资料整理,声明以上资料来源与网络
AngularJS 视图和路由的更多相关文章
- [Angularjs]视图和路由(四)
写在前面 关于angularjs的路由的概念基本上这篇就要结束了,通过学习,以及在实际项目中的实践,还是比较容易上手的.自己也通过angularjs做了一个在app上的一个模块,效果还是可以的. 系列 ...
- [Angularjs]视图和路由(二)
写在前面 上篇文章主要介绍了视图和路由的基本概念,并在文章最后举了一个简单的使用案例.这篇文章将继续学习路由的配置,及相关参数的说明. 系列文章 [Angularjs]ng-select和ng-opt ...
- [Angularjs]视图和路由(三)
写在前面 上篇文章主要介绍了路由中when方法的第二个参数,常见的几个属性,以及作用.本篇文章,将介绍和路由相关的几个常见的服务. 系列文章 [Angularjs]ng-select和ng-optio ...
- [Angularjs]视图和路由(一)
写在前面 对单页应用来讲,视图和路由的作用可以从一个视图跳转到另外一个视图,可以合理管理用户在使用过程中看到的界面. 将视图分解成布局和模版视图,并且根据用户当前访问的URL来展示对应的视图,将会是一 ...
- AngularJs多重视图和路由的使用
使用AngularJs来做多重视图和路由是在方便不过了,在开发过程中,都有许多的页面,而这些页面都有相同的部分,比如页面的头部和尾部通常都是一样的,变化的都是主体部分,还有就是一些后端管理的一些项目, ...
- AngularJS 的嵌套路由 UI-Router
AngularJS 的嵌套路由 UI-Router 本篇文章翻译自:https://scotch.io/tutorials/angular-routing-using-ui-router 演示网站请查 ...
- AngularJS ui-router (嵌套路由)
http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...
- 关于AngularJs中的路由学习总结
AngularJs中的路由,应用比较广泛,主要是允许我们通过不同的url访问不同的内容,可实现多视图的单页web应用.下面看看具体怎么使用. 关于路由 通常我们的URL形式为http://jtjds ...
- [转]AngularJS ui-router (嵌套路由)
本文转自:http://www.oschina.net/translate/angularjs-ui-router-nested-routes http://www.codeproject.com/A ...
随机推荐
- xilinx 赛灵思fpga verilog hdl 教程
http://www.eefocus.com/article/08-03/37231s.html http://wenku.baidu.com/link?url=5mdkMmm4BGGi7gRdgSk ...
- c# 扩展方法奇思妙用基础篇八:Distinct 扩展
刚看了篇文章 <Linq的Distinct太不给力了>,文中给出了一个解决办法,略显复杂. 试想如果能写成下面的样子,是不是更简单优雅 var p1 = products.Distinct ...
- MySQL的limit子句
1.理解: limit用来取结果集中的固定几条记录 2.参数: limit offset,pagesize offset:偏移量,为0时,可以省略 pagesize:每页显示的行数,通常是固定的 0表 ...
- Laravel5.1 Migration数据库迁移文件
Migration方便于团队开发,它就像数据库的版本控制一样,它的功能就是可以和别人共享你的数据库结构.这么说可能不太好理解,你跟着敲敲就明白了. 0 前提工作-配置数据库 找到你根目录的 .env ...
- es6 async与await实战
在使用js的时候,我们经常会遇到一个问题,就是我们需要等待请求返回再做下一步处理,之前的处理方式是通过ajax的success或者callback之类的方法,不过一层一层真的恶心,而且只是针对单个页面 ...
- php通过post将表单数据保存到数据库实例
html的form表单 <form id="contact-form" method="POST" action="../php/msg.php ...
- 《从零开始学Swift》学习笔记(Day 9)——离开表达式你试试!
原创文章,欢迎转载.转载请注明:关东升的博客 表达式啊是很重要地. 在Swift中,表达式有3种形式. 不指定数据类型 var a1 = 10 指定数据类型 var a1:Int = 10 使用分号 ...
- 初步认识dubbo--小案例
Dubbo是Alibaba开源的分布式服务框架,它最大的特点是按照分层的方式来架构,使用这种方式可以使各个层之间解耦合(或者最大限度地松耦合).从服务模型的角度来看,Dubbo采用的是一种非常简单的模 ...
- php var_dump()函数的详解
说明:var_dump()方法,判断一个变量的类型与长度,并输出变量的数值,如果变量有值,则输出是变量的值,并返回数据类型.显示关于一个或多个表达式的结构信息,包括表达式的类型与值.数组将递归展开值, ...
- 2048 worker_connections are not enough while connecting to upstream
2048 worker_connections are not enough while connecting to upstream http://mailman.nginx.org/piperma ...