写在前面

上篇文章主要介绍了视图和路由的基本概念,并在文章最后举了一个简单的使用案例。这篇文章将继续学习路由的配置,及相关参数的说明。

系列文章

[Angularjs]ng-select和ng-options

[Angularjs]ng-show和ng-hide

[Angularjs]视图和路由(一)

参数

when方法,上篇文章也提到了配置路由用到的when方法,对when方法的第二个参数可以接收哪些属性,这里将一一列举。
1、controller

controller:'MyController'
//或者
controller:function($scope){}
 <script>
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
//这里指定路由
$routeProvider
.when('/', {
templateUrl: './views/Login.html',
controller: 'LoginController'
})
.when('/Login', {
templateUrl: './views/Login.html',
controller: 'LoginController'
})
}]);
//控制器
app.controller('LoginController', function ($scope) { });
</script>

如果When方法配置了controller属性,那么这个指定的控制器会与路由所创建的新作用域关联在一起。如果参数值是字符型,会在模块中所有注册过的控制器中查找对应的内容,然后与路由关联在一起,如果参数值是函数型,这个函数会作为模板中DOM元素的控制器并与模板进行关联。
2、template

template:'<div><h2>Route</h2></div>'

Angularjs会将配置对象中的HTML模板渲染到对应的具有ng-view指令的dom元素中。
3、templateUrl

templateUrl:'views/template_view.html'

应用会根据templateUrl属性所指定的路径通过XHR读取视图(或者从$templateCache中读取)。如果能找到并读取这个模板,AngularJs会将模板的内容渲染到具有ng-view指令的Dom元素中。
这种方式,出于代码整洁,也是最常见的使用方式。

4、resolve

resolve:{
'data':['$http',function($http){
return $http.get('/api').then(
function success(response){return response.data;},
function error(reason){return false;}
); }]; }

如果设置了resolve属性,Angularjs会将列表中的元素都注入到控制器中。如果这些依赖是promise对象,他们在控制器加载以及$routeChangeSuccess被触发之前,会被resolve并设置成一个值。
列表对象可以是:

键,键值是会被注入到控制器中的依赖的名字。

工厂,即可以是一个服务的名字,也可以是一个返回值,它是会被注入到控制器中的函数或可以被resolve的promise对象。

在上面的例子中,resolve会发送一个$http请求,并将data的值替换为返回结果的值。列表中的键data会被注入到控制器中,所以在控制器中可以使用它。

5、redirectTo

redirectTo:'/home'
//或者
redirectTo:function(route,path,search)

如果redirectTo属性的值是一个字符串,俺么路径会被替换成这个值,并根据这个目标路径触发路由变化。
如果redirectTo属性的值是一个函数,那么路径会被替换成函数的返回值,并根据这个目标路径触发路由变化。

如果redirectTo属性的值是一个函数,AngularJs会在调用它时传入下面三个参数:

  • 从当前路径中提取的路由参数。
  • 当前路径
  • 当前URL中的查询串。

6、reloadOnSearch

如果reloadOnSearch选项被设置为true(默认),当$location.search()发生变化时会重新加载路由。如果设置为false,那么当url中的查询串部分发生变化时就不会重新加载路由。这个小窍门对路由嵌套和原地分页等需求非常有用。

angular.module('MyApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.when('/inbox/:name', {
controller: 'InboxController',
templateUrl: 'views/inbox.html'
})
.otherwise({redirectTo: '/'});
}]);

上面的例子,用when方法设置了两个路由,otherwise方法会在没有任何路由匹配时被调用。我们用它设置一个默认跳转到'/'路径的路由。
当浏览器加载Angularjs应用时,会将url设置成默认路由所指向的路径。除非我们在浏览器中加载不同的url,否则默认会使用'/'路径的路由。

总结

主要学习了when方法的第二个参数的一些属性,在项目中,经常用到,这里就对其具体的描述记录一下,加深印象,在项目中,也是这样做的,这里算是先实践再理论了。

文章来自

Angularjs权威教程

[Angularjs]视图和路由(二)的更多相关文章

  1. [Angularjs]视图和路由(四)

    写在前面 关于angularjs的路由的概念基本上这篇就要结束了,通过学习,以及在实际项目中的实践,还是比较容易上手的.自己也通过angularjs做了一个在app上的一个模块,效果还是可以的. 系列 ...

  2. [Angularjs]视图和路由(三)

    写在前面 上篇文章主要介绍了路由中when方法的第二个参数,常见的几个属性,以及作用.本篇文章,将介绍和路由相关的几个常见的服务. 系列文章 [Angularjs]ng-select和ng-optio ...

  3. [Angularjs]视图和路由(一)

    写在前面 对单页应用来讲,视图和路由的作用可以从一个视图跳转到另外一个视图,可以合理管理用户在使用过程中看到的界面. 将视图分解成布局和模版视图,并且根据用户当前访问的URL来展示对应的视图,将会是一 ...

  4. Django框架的使用教程--视图和路由[二]

    视图和路由 1.创建一个django_test应用 2.setting中设置django_test INSTALLED_APPS = [ 'django.contrib.admin', 'django ...

  5. AngularJS 视图和路由

    在AngularJS之后引用angular-route  路由   ngRoute模块加载声明   AngularJS提供的when和otherwise两个方法来定义应用的路由   otherwise ...

  6. AngularJs多重视图和路由的使用

    使用AngularJs来做多重视图和路由是在方便不过了,在开发过程中,都有许多的页面,而这些页面都有相同的部分,比如页面的头部和尾部通常都是一样的,变化的都是主体部分,还有就是一些后端管理的一些项目, ...

  7. AngularJS 的嵌套路由 UI-Router

    AngularJS 的嵌套路由 UI-Router 本篇文章翻译自:https://scotch.io/tutorials/angular-routing-using-ui-router 演示网站请查 ...

  8. AngularJS ui-router (嵌套路由)

    http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...

  9. 关于AngularJs中的路由学习总结

    AngularJs中的路由,应用比较广泛,主要是允许我们通过不同的url访问不同的内容,可实现多视图的单页web应用.下面看看具体怎么使用. 关于路由  通常我们的URL形式为http://jtjds ...

随机推荐

  1. Android中的IMEI

    国际移动设备识别码(IMEI:International Mobile Equipment Identification Number)是区别移动设备的标志,储存在移动设备中,可用于监控被窃或无效的移 ...

  2. Delphi7 安装ICS,与简单使用

    官网 http://www.overbyte.be/ 下载 OverbyteIcsV816 完成后解压到E:\Delphi7\OverbyteIcsV816\ 1.在library里加入E:\Delp ...

  3. [android界面]android中src和background区别——前景与背景

    ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸.src是图片内容(前 ...

  4. LUA __call

    1. ev={} . functin ev.__call() . print "called from ev" . end . . setmetatable(ev, ev) . . ...

  5. http状态码代表含义

    状态代码 状态信息 含义 100 Continue 初始的请求已经接受,客户应当继续发送请求的其余部分.(HTTP 1.1新) 101 Switching Protocols 服务器将遵从客户的请求转 ...

  6. Linux第十一次学习笔记

    异常控制流 异常控制流(ECF)发生在计算机系统的各个层次 在硬件层,硬件检测到的事件会触发控制突然转移到异常处理程序. 在操作系统层,内核通过上下文转换将控制从一个用户进程转移到另一个用户进程. 在 ...

  7. 20145208 《Java程序设计》第7周学习总结

    20145208 <Java程序设计>第7周学习总结 教材学习内容总结 Lambda 认识Lambda语法 什么是Lambda语法 以下是维基百科上的解释: a function (or ...

  8. bt协议详解 DHT篇(下)

    bt协议详解 DHT篇(下) 最近开发了一个免费教程的网站,产生了仔细了解bt协议的想法,这篇文章是bt协议详解系列的第三篇,后续还会写一些关于搜索和索引的东西,都是在开发这个网站的过程中学习到的技术 ...

  9. Object C学习笔记19-枚举

    一. 枚举类型 枚举类型是一个基本类型,不能再分为为任何其他的类型.在一般的编程语言中都有枚举(enum)这种数据结构类型.枚举类型主要用于将一个变量限定在特定的范围内.比如一周有七天,那么一周的值就 ...

  10. [bzoj2245][SDOI2011]工作安排(费用流)

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=2245 分析: 要注意到题目下面说的w是单增的 明显的费用流: 弄个源点S,汇点T S连 ...