AngularJS的ng-route模块为控制器和视图提供了[Deep-Linking]URL。 通俗来讲，ng-route模块中的$routeService监测$location.url()的变化，并将它映射到预先定义的控制器。也就是在客户端进行URL的路由。 下面首先给出$route的使用示例，然后引入一个更加强大的客户端路由框架ui-router。

Angular 路由

在APP中定义多个页面的控制器，并给出对应的模板。然后$routeProvider进行配置，即可将URL映射到这些控制器和视图。 首先定义一个基本的Angular APP，并引入ngRoute：

Angular$routeService在ngRoute模块里。需要引入它对应的javascript文件，并在我们的APP里ngRoute添加为模块依赖（如何添加模块依赖？）。

var app = angular.module('ngRouteExample', ['ngRoute'])

.controller('MainController', function($scope) {

})

.config(function($routeProvider, $locationProvider) {

$routeProvider

.when('/users', {

templateUrl: 'user-list.html',

controller: 'UserListCtrl'

})

.when('/users/:username', {

templateUrl: 'user.html',

controller: 'UserCtrl'

});

// configure html5

$locationProvider.html5Mode(true);

});

上述代码中，$routeProvider定义了两个URL的映射：/users使用user-list.html作为模板，UserListCtrl作为控制器； /users/:username则会匹配类似/users/alice之类的URL，稍后你会看到如何获得:username匹配到的值。先看首页的模板：

HTML5Mode： 服务器端路由和客户端路由的URL以#分隔。例如/foo/bar#/users/alice，Angular通过操作锚点来进行路由。 然而html5Mode(true)将会去除#，URL变成/foo/bar/users/alice（这需要浏览器支持HTML5的，因为此时Angular通过pushState来进行路由）。 此时服务器对所有的客户端路由的URL都需要返回首页（/foo/bar）视图，再交给Angular路由到/foo/bar/users/alice对应的视图。

<div ng-controller="MainController">

Choose:

<a href="users">user list</a> |

<a href="users/alice">user: alice</a>

<div ng-view></div>

</div>

注意到模板文件中有一个div[ng-view]，子页面将会载入到这里。

路由参数

接着我们定义上述路由配置的子页面控制器和视图模板。用户列表页面：

app.controller('UserListCtrl', function($scope) {});

<!--user-list.html-->

<h1>User List Page</h1>

用户页面：

app.controller('UserCtrl', function($scope, $routeParams) {

$scope.params = $routeParams;

});

<!--user.html-->

<h1>User Page</h1>

<span ng-bind="params.userName"></span>

我们点击首页的/users/alice时，将会载入user.html，span的值为alice。$routeParams提供了当前的路由参数，例如：

// Given:

// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby

// Route: /Chapter/:chapterId/Section/:sectionId

//

// Then

$routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}

除了$routeParams，Angular还提供了$location来获取和设置URL。

UI-Router

UI-Router是Angular-UI提供的客户端路由框架，它解决了原生的ng-route的很多不足：

  1. 视图不能嵌套。这意味着$scope会发生不必要的重新载入。这也是我们在Onboard中引入ui-route的原因。
  2. 同一URL下不支持多个视图。这一需求也是常见的：我们希望导航栏用一个视图（和相应的控制器）、内容部分用另一个视图（和相应的控制器）。

UI-Router提出了$state的概念。一个$state是一个当前导航和UI的状态，每个$state需要绑定一个URL Pattern。 在控制器和模板中，通过改变$state来进行URL的跳转和路由。这是一个简单的例子：

<!-- in index.html -->

<body ng-controller="MainCtrl">

<section ui-view></section>

</body>

// in app-states.js

$stateProvider

.state('contacts', {

url: '/contacts',

template: 'contacts.html',

controller: 'ContactCtrl'

})

.state('contacts.detail', {

url: "/contacts/:contactId",

templateUrl: 'contacts.detail.html',

controller: function ($stateParams) {

// If we got here from a url of /contacts/42

$stateParams.contactId === "42";

}

});

当访问/contacts时，contacts $state被激活，载入对应的控制器和视图。在ui-router时，通常使用$state来完成页面跳转， 而不是直接操作URL。例如，在脚本使用$state.go：

$state.go('contacts');  // 指定state名，相当于跳转到 /contacts

$state.go('contacts.detail', {contactId: 42});  // 相当于跳转到 /contacts/42

在模板中使用ui-sref（这是一个Directive）：

<a ui-sref="contacts">Contacts</a>

<a ui-sref="contacts.detail({contactId: 42})">Contact 42</a>

嵌套视图

不同于Angular原生的ng-route，ui-router的视图可以嵌套，视图嵌套通常对应着$state的嵌套。 contacts.detail是contacts的子$state，contacts.detail.html也将作为contacts.html的子页面：

<!-- contacts.html -->

<h1>My Contacts</h1>

<div ui-view></div>

<!-- contacts.detail.html -->

<span ng-bind='contactId'></span>

上述ui-view的用法和ng-view看起来很相似，但不同的是ui-view可以配合$state进行任意层级的嵌套， 即contacts.detail.html中仍然可以包含一个ui-view，它的$state可能是contacts.detail.hobbies。

命名视图

在ui-router中，一个$state下可以有多个视图，它们有各自的模板和控制器。这一点也是ng-route所没有的， 给了前端路由极大的灵活性。来看例子：

<!-- index.html -->

<body>

<div ui-view="filters"></div>

<div ui-view="tabledata"></div>

<div ui-view="graph"></div>

</body>

这一个模板包含了三个命名的ui-view，可以给它们分别设置模板和控制器：

$stateProvider

.state('report',{

views: {

'filters': {

templateUrl: 'report-filters.html',

controller: function($scope){ ... controller stuff just for filters view ... }

},

'tabledata': {

templateUrl: 'report-table.html',

controller: function($scope){ ... controller stuff just for tabledata view ... }

},

'graph': {

templateUrl: 'report-graph.html',

controller: function($scope){ ... controller stuff just for graph view ... }

}

}

})

AngularJS 路由：ng-route 与 ui-router的更多相关文章

  1. 【原创】ui.router源码解析

    Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...

  2. ngRoute 与ui.router区别

    angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...

  3. angularjs路由path方式实现原理探究

    angularjs路由 https://angular.io/guide/router 通过URL解释, 来定位客户端生成的浏览器端视图. 你可绑定路由到页面的链接上, 当用户点击链接, 可以浏览到相 ...

  4. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

  5. [转]AngularJS 使用 UI Router 实现表单向导

    本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...

  6. [转]AngularJS+UI Router(1) 多步表单

    本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现   在线demo演示地址https://rawgit.com/dream ...

  7. angularjs ngRoute和ui.router对比

    ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...

  8. angular ui.router 路由传参数

    angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...

  9. angularJS ui router 多视图单独刷新问题

    场景:视图层级如下 view1 --view11 --view111 需求:view11的一个动作过后,单独刷新view12 解决方式:修改层级设计 view1 --view11 --view111 ...

  10. AngularJS之高级Route【三】（八）

    前言 我们知道默认的路由提供(Route Provider)在复杂的应用程序中是不太适合应用场景,它存在诸多限制,所以在Angular 1.2之后此时我们不得不将路由提供作为一个单独的模块当我们需要使 ...

随机推荐

  1. 我的一些简单的shell脚本实例

    1.模拟linnux登录shell #/bin/bashecho -n "login:" read nameecho -n "password:"read pa ...

  2. TortoiseSVN 冲突解决详细步骤 （图）

    冲突还是很好解决的,但我没有试过在IDE里边集成怎样.记得VSS在Visual Studio里边解决冲突就非常完美,冲突自动报告,自动弹出冲突解决窗口,让你处理该怎么合并两份版本.合并后自动签入com ...

  3. android 水纹上涨与水滴滴下效果

    这两天项目比较紧,本来打算完成以后再写博客的,今天终于实现了一个炫的功能,怀着激动的心情,趁热打铁,把项目经验记录一下,效果图如下:  对功能的几点说明: 1.圆形边框旋转 2.水纹上涨 3.水滴滴下 ...

  4. Appium+python自动化55-appium desktop每次启动安装Unlock和Appium Setting问题

    前言 部分真机可能会出现每次运行代码,启动app之前都会重复安装Unlock和Appium Setting这两个小工具,有的手机会自动安装,这个还好. 有的手机每次都会弹出一个安装确认框(如部分小米和 ...

  5. Host 'localhost' has multiple addresses. 解决办法

    phpstorm调试php 错误提示: Host 'localhost' has multiple addresses. You must choose one explicitly!Couldn't ...

  6. Dedecms <= V5.6 Final模板执行漏洞

    漏洞版本: Dedecms V5.6 Final 漏洞描述: Dedecms V5.6 Final版本中的各个文件存在一系列问题,经过精心构造的含有恶意代表的模板内容可以通过用户后台的上传附件的功能上 ...

  7. 不要让Javascript的等价表格看上去那么难看

    时不时的会有人贴出一张表格,用来展现javascript的 '==' 比较出来的结果.像最近的这个例子,看看这张表格有多么的无序. 这些文章基本上都是对的,他们指出 '==' 设计的很糟糕.但是他们通 ...

  8. javascript数组去重的4个方法(转)

    原文地址:http://blog.csdn.net/chengxuyuan20100425/article/details/8497277 面试前端必须准备的一个问题:怎样去掉Javascript的A ...

  9. 给 Easyui Datagrid 扩展方法

    $.extend($.fn.datagrid.methods, { /** * 更新 非编辑列值 * @param rowIndex : 行索引 * @param cellName : 列索引或列名 ...

  10. PlSQL Oracle 中的 对应 SQL server 中的 IsNull(Expr1,Expr2)

    NVL(Expr1,Expr2)如果Expr1为NULL,返回Expr2的值,否则返回Expr1的值NVL2(Expr1,Expr2,Expr3)如果Expr1为NULL,返回Expr2的值,否则返回 ...