angular的路由实现,ngRoute

你学习一个新的框架都会有一个理由,我学习angular的理由就是因为angular的路由功能,只能说,开发angular的大神太溜了~~~

下面,开始介绍我对ngRoute的使用心得

ngRoute不属于angular的核心库,需要将ngRoute模块额外的引入

然后用ng-view指定范围

路由将会更新此区域

然后在主模块中引入ngRoute模块

var myModule = angular.module("myModule",["ngRoute"]);
准备工作已经完成,使用config模块中的$routeProvider内置服务调用路由

例子:

myModule.config(function($routeProvider){
	$.when("/index",{
		templateUrl:"tpls/index.html",
		controller:"indexCtrl"
	}).when("/list",{
		templateUrl:"tpls/list.html",
		controller:"listCtrl"
	}).otherwise({
		redirectTo:"/index"
	});
});
$routeProvider


$routeProvider是一个用于配置路由的内置服务。由于它是一个服务,根据service的使用建议,我们主要将其当做为工具来使用,所以我们一般直接使用$routeProvider.XXX来调用它的成员方法来实现一定的功能,而不是实例化一个$routeProvider的实例。它主要有以下两个成员函数:


otherwise(params):设定映射信息到$route.current,一般用于指定没有标明的路由如何处理。
when(path, route):向$route服务添加新的路由。path是指定的URL路径,route标明路由的处理。
$routeProvider.when(path, route)中的路由处理参数对象,常用的有如下的属性:


controller:用于指向用于路由处理的控制器。
template:用于指向用于路由的视图模板。
redirectTo:重定向。(使用$location)
不常用属性:


controllerAs:控制器别名,一旦设定,在视图中的scope就得使用这个别名来调用控制器。
templateUrl

resolve


$route
$route用于将控制器与视图相连。它观察$location.url(),并且尝试映射路径到一个已经存在的路由定义中。它依赖$location、$routeParams。它主要有如下成员函数:


reload() 用于重新加载当前的路由,哪怕$location没有改变。调用后,ngView将创建新的Scope等。
它主要有如下事件:


$routeChangeStart:路由改变之前触发;
$routeChangeSuccess:路由改变之后触发;
$routeChangeError:路由改变出错触发;
$routeParams


$routeParams允许你检索当前路由的参数。主要使用$location的search()与path()方法。

本文参考至:https://my.oschina.net/u/1582119/blog/307083



你可能感兴趣的:(angular)