夺命雷公狗—angularjs—19—angular-route

ngRoute包括的内容

ng的路由机制是靠ngRoute提供的,通过hash和history两种方式实现了路由,可以检测浏览器是否支持history来灵活调用相应的方式。ng的路由(ngRoute)是一个单独的模块,包含以下内容:

$routeProvider 服务用来定义一个路由表,即地址栏与视图模板的映射

$routeParams 服务保存了地址栏中的参数,例如{id : 1, name : ‘tom’}

$route 服务完成路由匹配,并且提供路由相关的属性访问及事件,如访问当前路由对应的controller

指令ngView用来在主视图中指定加载子视图的区域

以上内容再加上$location服务,我们就可以实现一个单页面应用了。下面来看一下具体如何使用这些内容。

使用ng的路由机制

第一步:引入文件和依赖

ngRoute模块包含在一个单独的文件中,所以第一步需要在页面上引入这个文件,如下:

<script src="http://only.showtop.com/js/1.2.5/angular.min.js"></script>
<script src="http://only.showtp.com/js/1.2.5/angular-route.min.js"></script>

光引入还不够,我们还需在模块声明中注入对ngRoute的依赖,如下:

var app = angular.module(‘MyApp‘, [‘ngRoute‘]);

完成了这些,我们就可以在模板或是controller中使用上面的服务和指令了。下面我们需要定义一个路由表。

第二步:定义路由表

$routeProvider 提供了定义路由表的服务,它有两个核心方法,when(path,route) 和 otherwise(params),先看一下核心中的核心 when(path,route) 方法。

when(path,route) 方法接收两个参数,path 是一个string类型,表示该条路由规则所匹配的路径,它将与地址栏的内容($location.path)值进行匹配。如果需要匹配参数,可以在path中使用冒号加名称的方式,如:path为/show/:name,如果地址栏是/show/tom,那么参数name和所对应的值tom便会被保存在$routeParams中,像这样:{name : tom}。我们也可以用*进行模糊匹配,如:/show*/:name将匹配/showInfo/tom。

route参数是一个object,用来指定当path匹配后所需的一系列配置项,包括以下内容:

controller //function或string类型。在当前模板上执行的controller函数,生成新的scope
controllerAs //string类型,为controller指定别名
template //string或function类型,视图所用的模板,这部分内容将被ngView引用
templateUrl //string或function类型,当视图模板为单独的html文件或是使用了<script type=”text/ng-template”>定义模板时使用
resolve //指定当前controller所依赖的其他模块
redirectTo //重定向的地址

最简单情况,我们定义一个html文件为模板,并初始化一个指定的controller:

function emailRouteConfig($routeProvider){
    $routeProvider.
    when(‘/show‘, {
        controller: ShowController,
        templateUrl: ‘show.html‘
    }).
    when(‘/put/:name‘,{
       controller: PutController,
       templateUrl: ‘put.html‘
    });
};

otherwise(params)方法对应路径匹配不到时的情况,这时候我们可以配置一个redirectTo参数,让它重定向到404页面或者是首页。

第三步:在主视图模板中指定加载子视图的位置

我们的单页面程序都是局部刷新的,那这个“局部”是哪里呢,这就轮到ngView出马了,只需在模板中简单的使用此指令,在哪里用,哪里就是“局部”。例如:

<div ng-view></div>

或者:

<ng-view></ng-view>
时间: 2024-08-10 17:08:42

夺命雷公狗—angularjs—19—angular-route的相关文章

夺命雷公狗—angularjs—6—单条数据的遍历

我们在实际的工作中常常会处理到一些数据的遍历,这些数据都是后端传到前端的,有些公司会让前端帮忙处理一点遍历的工作,废话不多说,直接上代: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href=&q

夺命雷公狗—angularjs—13—post参数的接收

我们强悍的angularjs为我们不仅仅提供了他的get接收方式,而且也有post的接收方式,我们现在做一个模拟接收后端传递过来的json的数据: <?php $arr = ['user'=>'admin','pass'=>'admin888']; $arr = json_encode($arr); echo $arr; <!doctype html> <html lang="en"> <head> <meta charset

夺命雷公狗—angularjs—16—angularjs里面的缓存

强大的angularjs也给我们预留了一套他的缓存机智,这样在某个程度上来说还是可以做到减轻一点服务器压力的.... <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/amaze

夺命雷公狗—angularjs—24—extend继承对象

我们的angularjs中也是给我们留下了方法来做继承的,那么他就是传授中的extend... 不过要如下所示,第二个参数是继承到第一个对象里面的... <!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title> <script sr

夺命雷公狗—angularjs—22—bind改指向和传参方式

在angularjs中的传参的jquery的方式是极度相似的噢,而且还可以通过bind来改变指向 <!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js&qu

夺命雷公狗—angularjs—23—copy拷贝对象

copy这在angularjs中是一个拷贝对象的方法: <!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script>

夺命雷公狗—angularjs—9—ng-class的自定义函数的用法

angularjs里面其实给我们留下了一个很不错的地方,他就是可以直接调用函数从而对该位置进行处理, 被点击后展示效果如下所示: 开始走代码吧.... <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet"

夺命雷公狗—angularjs—15—内置封装好的计时器$interval和$timeout

这里其实和js源生的效果是一样的,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> </head> <body ng-

夺命雷公狗—angularjs—14—$location的作用

废话不多说看下,我们直接来走代码看下效果如何 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> </head> <body ng-ap