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. 使用VMware创建Linux虚拟机

    准备工作: 下载安装:VMware8.0 (这版本相对稳定,体积小) 下载:rhel-server-5.8-i386-dvd.iso Ready? Go! 1.新建空的虚拟机,相当于多了一台电脑 除了 ...

  2. Python学习（四）数据结构 —— str

    Python 字符串 str 本章大致介绍了 Python 的字符串类型 str,包括字符串的赋值及转义.字符串运算符.字符串格式化输出 以及 一些字符串的内建函数等. 字符串赋值及转义 我们可以使用 ...

  3. iOS: 首次使用App时,显示半透明新手指引

    在很多的app,我们都会发现这样一个功能:就是app启动后进入主界面时,会有一个半透明的指引图,它会提示用户如何一步步进行操作,快速的熟悉app的使用规则,极大地方便了用户的使用,也加快了app的推广 ...

  4. iOS: 如何调节UITabbarItem的图片和文字位置

    转载自:http://blog.csdn.net/kevinwlc/article/details/21467499/ 在ios7中,方法setFinishedSelectedImage:withFi ...

  5. ZeroMQZeroMQ研究与应用分析

    1  ZeroMQ概述 ZeroMQ是一种基于消息队列的多线程网络库,其对套接字类型.连接处理.帧.甚至路由的底层细节进行抽象,提供跨越多种传输协议的套接字.ZeroMQ是网络通信中新的一层,介于应用 ...

  6. 【Hadoop基础】hadoop fs 命令

    1,hadoop fs –fs [local | <file system URI>]:声明hadoop使用的文件系统,如果不声明的话,使用当前配置文件配置的,按如下顺序查找:hadoop ...

  7. Wifidog及认证过程初分析

    Wifidog初分析 一.综述 wifidog是搭建无线热点认证系统的解决方案之一,他比nocat.nodog更适合互联网营销思路.常见的使用在openwrt系统上,它实现了路由器和认证服务器的数据交 ...

  8. Android多点触控技术，实现对图片的放大缩小平移，惯性滑动等功能

    首先推荐一下鸿洋大大的打造个性的图片预览与多点触控视频教程,这套教程教我们一步一步实现了多点触控实现对图片的平移和缩放的功能.这篇文章我将在鸿洋大大的基础之上做了一些扩展功能: 1.图片的惯性滑动 2 ...

  9. ASPX导入JS,JavaScript乱码怎么办

    不管你把JS改成UTF-8还是ASCII格式,弹出都是乱码. 你只要在ASPX文件顶部加上"ResponseEncoding="gb2312" ContentType=& ...

  10. 算法笔记_138:稳定婚姻问题(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 何为稳定婚姻问题? 有一个男士的集合Y = {m1,m2,m3...,mn}和一个女士的计划X = {n1,n2,n3,...,nn}.每一个男士有 ...