路由

15. 七月 2016 AngularJS 1

route

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。

通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA)。

通常我们的URL形式为 http://hairecord.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如:

当我们点击以上的任意一个链接时,向服务端请的地址都是一样的 (http://hairecord.com/)。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

在$route(路由)中,提供了两个依赖性服务:$location、$routeParams; $location、$routeParams均可在controller中使用,可通过$routeParams获取路由时所传参数,可通过$location进行路由跳转。

讲解一下实例

1、载入了实现路由的 js 文件:angular-route.js。
2、包含了 ngRoute 模块作为主应用模块的依赖模块。
         var app = angular.module(‘appModule’,[‘ngRoute‘]);
3、使用 ngView 指令。
        <div ng-view></div>
        该 div 内的 HTML 内容会根据路由的变化而变化。
4、配置 $routeProvider,AngularJS $routeProvider 用来定义路由规则。
    app.config(function($routeProvider){
            $routeProvider.when(…….).when(…..)    
    })
以下是数组模式的写法,为了是防止压缩转移

AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI,我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。

$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由,函数包含两个参数:

  • 第一个参数是 URL 或者 URL 正则规则。

第二个参数是路由配置对象。

5、在$route(路由)中,提供了两个依赖性服务:$location、$routeParams; $location、$routeParams均可在controller中使用,如上otherDetailCtrl中,可通过$routeParams获取路由时所传参数,可通过$location进行路由跳转。


ui-router

ui-router和route的不同之处

        监听路由的变化,应该放到 run方法中,因为run方法是主方法,所以会默认执行,这样就能实时监听了,如果放在controller中,只要controller不执行就没用了
路由变化的时候默认会向上级发射事件,所以在$rootScope中用on捕获到就好了。

路由嵌套-多视图

 


1 thought on “路由”

  • 1
    小伙 on 2016年7月16日 回复

    😈

发表评论

电子邮件地址不会被公开。