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. 史上最全的Unity面试题（持续更新总结。。。。。。） 包含答案的Unity面试题

    这个是我刚刚整理出的Unity面试题,为了帮助大家面试,同时帮助大家更好地复习Unity知识点,如果大家发现有什么错误,(包括错别字和知识点),或者发现哪里描述的不清晰,请在下面留言,我会重新更新,希 ...

  2. 【转载】Java并发编程：volatile关键字解析 by 海子

    volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果.在Java 5之后,volatile关键字才得以 ...

  3. OpenShift和F5的集成手册

    OpenShift和F5的集成步骤,记录如下,如实际操作中有变更会再度编辑修改. 1.整体架构 使用BIG-IP作为Openshift的Router,能实现以下功能: 为Services创建BIG-I ...

  4. VisualStudio使用GIT

    使用GIT进行源码管理 -- 在VisualStudio中使用GIT GIT作为源码管理的方式现在是越来越流行了,在VisualStudio 2012中,就通过插件的现实对GIT进行了官方支持,并且这 ...

  5. myeclipse使用maven教程

    本教程包括 1.使用myeclipse构建maven下载jar包 2.使用myeclipse运行maven命令 3.使用myeclipse管理maven项目 搭建maven教程以后有时间了贴进来. 1 ...

  6. go语言基础之格式化输出

    1.fmt包的格式化输出输入 格式说明 格式 含义 %% 一个%字面量 %b 一个二进制整数值(基数为2),或者是一个(高级的)用科学计数法表示的指数为2的浮点数 %c 字符型.可以把输入的数字按照A ...

  7. Java import javax.servlet 出错

    Error: The import javax.servlet cannot be resolved The import javax.servlet.http.HttpServletRequest ...

  8. Java中this与super

    l  对象的this引用 作用: this关键字就是让类中一个方法,访问该类中的另一个方法或属性. 1.构造器中引用该构造器正在初始化的对象. 2.在方法中引用调用该方法的对象(哪个对象调用的方法,t ...

  9. [Ext JS 4] 实战之 带week(星期)的日期选择控件

    前言 Ext JS 3 和 Ext JS 4中都有提供日期选择的组件(当然早期版本也有). 但是有一些日期选择的需求是要看到星期,就是日期中的哪一天是这一年的第几周. 遗憾的是Ext js 并没有提供 ...

  10. 算法笔记_142:无向图的欧拉回路求解(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 John's trip Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8 ...