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. jdbcTemplate：包含占位符的SQL无法打印参数信息

    网上的解决方案是在log4j设置以下参数:(如:http://my.oschina.net/wamdy/blog/468491) log4j.logger.org.springframework.jd ...

  2. Jacob调用COM组件总结,实例

    转自:http://blog.csdn.net/whw6_faye/article/details/5418506 最近做了一个Java Jacob调用COM组件的东西,其中遇到了不少问题,现在把经验 ...

  3. JAVA常见算法题(三十一)---冒泡排序

    package com.jege.spring.boot.hello.world; /** * java算法之冒泡排序<br> * 将数组按照从大到小的顺序排列<br> * * ...

  4. Spring+Mybatis+SpringMVC后台与前台分页展示实例（附工程）

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文实现了一个后台由Spring+Mybatis+SpringMVC组成,分页采用Pag ...

  5. LaTeX图片环境 Picture environment

    Picture environment If you need to include simple diagrams or figures in your document, the picture  ...

  6. ContextLoaderListener 与 ServletDispatcher

    网上找了一下关于ContextLoaderListener和ServletDispatcher的解释,这是原文 http://simone-folino.blogspot.com/2012/05/di ...

  7. 多种非接触卡 ATQA 字节说明

      原文地址 13.56 MHz RFID Software An Open Source implementation of an NFC stack, and various related ut ...

  8. kubernetes基础概念

    kubernetes是基于容器技术的分布式架构领先方案.具有完备的集群管理能力,包括多层次的安全防护和准入机制.多租户应用支撑能力.透明的服务注册和服务发现机制.内建智能负载均衡器.强大的故障发现和自 ...

  9. DWG/DGN格式导入Arcgis；转化为shp格式；更改地理坐标；导入Google Earth【转】

      其实本来,我就是需要把一个autocad的dwg/dgn格式的东西导入到google earth里面:但是首先我对dwg/dgn格式的东西根本就不熟:其次我拿到的dwg/dgn格式文件是用的HK8 ...

  10. 如何更换Office 2013的product key?

    第一步 第二步 第三步 ... ... ... ... ^_^   参考资料 ======================== Change Product Key Office 2013 Home ...