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. eclipse安装Run-Jetty-Run插件，修改实时生效

    http://marketplace.eclipse.org/content/run-jetty-run   1.直接拖拽到eclipse安装(7/8/9版本都安装) 2.以调试的方式启动jetty( ...

  2. 第九章openwrt 703N 网口转串口+串口转网口TTL 数据传输

    原生串口      1.WR703N 自带 TTL 电平串口,设备文件为/dev/ttyATH0, 波特率 115200.但是硬件串口 没有接出来,需要自己焊线.破壳. 图 1. 正面图.两根线 TP ...

  3. linux服务器之间的文件同步;rsync+inotifywait；同步多个目录

    1.双向同步:unison+inotify 2.单向同步:rsync+inotify python版的pyinotify 本文介绍第二种方法: 1.Inotify 是一个 Linux特性,它监控文件系 ...

  4. Android宝典入门篇-进阶

    学习Android前后有快有1个月了,本着不耍流氓,谈恋爱就要结婚的信念(其实AD开发也挺有趣的),做了自己的第一个Android小应用.本来准备今天和大家分享的,考虑到在不同屏幕上的效果没测试和本着 ...

  5. javascript实现浏览器窗口传递参数

    a.html <html> <head> <title>主页面</title> <script language="javascript ...

  6. C++如何禁止掉对象的复制操作

    最容易想到的是将拷贝构造函数与赋值函数声明为private.但是,private只是说外部不能直接调用,但是可以间接通过类的成员函数与友元函数对其访问.那么怎么办呢? ---->在类中,允许声明 ...

  7. Python mongoHelper模块

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- ''' Defines a MongoOperator class and allows you to m ...

  8. Windows Server 2012 R2如何编辑hosts文件

    在我的Windows Server 2012 R2系统里编辑hosts文件则会出现没有无法保存的问题,原因是权限不足 错误信息:" Unable to save C:\Windows\Sys ...

  9. 一次踩坑记录（使用rpc前后端分离服务总是注册不上）

    问题简述: 项目架构使用了前后端分离,使用rpc进行服务调用与注册,这里没有用dubbo之类的,仅仅用zookeeper,每次在启动项目时总是报错rpcException异常跟NPE异常,后台查看zo ...

  10. 【PM】关于系统数据库和服务现场升级的一些看法

    工作快满一年了,立即着手准备第二次出差去升级我们的系统,可是突然想到一件事情,让我颇有感触,是关于系统现场升级的. 我们迭代开发的系统隔一段时间就会须要到用户的现场去为其进行系统升级,当中升级包含cl ...