AngularJS 路由：ng-route 与 ui-router
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的很多不足：
- 视图不能嵌套。这意味着$scope会发生不必要的重新载入。这也是我们在Onboard中引入ui-route的原因。
- 同一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的更多相关文章
- 【原创】ui.router源码解析
Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...
- ngRoute 与ui.router区别
angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...
- angularjs路由path方式实现原理探究
angularjs路由 https://angular.io/guide/router 通过URL解释, 来定位客户端生成的浏览器端视图. 你可绑定路由到页面的链接上, 当用户点击链接, 可以浏览到相 ...
- AngularJS 使用 UI Router 实现表单向导
Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...
- [转]AngularJS 使用 UI Router 实现表单向导
本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...
- [转]AngularJS+UI Router(1) 多步表单
本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现 在线demo演示地址https://rawgit.com/dream ...
- angularjs ngRoute和ui.router对比
ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...
- angular ui.router 路由传参数
angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...
- angularJS ui router 多视图单独刷新问题
场景:视图层级如下 view1 --view11 --view111 需求:view11的一个动作过后,单独刷新view12 解决方式:修改层级设计 view1 --view11 --view111 ...
- AngularJS之高级Route【三】（八）
前言 我们知道默认的路由提供(Route Provider)在复杂的应用程序中是不太适合应用场景,它存在诸多限制,所以在Angular 1.2之后此时我们不得不将路由提供作为一个单独的模块当我们需要使 ...
随机推荐
- sql 内连接、外连接、自然连接等各种连接
1.内联接(典型的联接运算,使用像 = 或 <> 之类的比较运算符).包括相等联接和自然联接. 内联接使用比较运算符根据每个表共有的列的值匹配两个表中的行.例如,检索 students和c ...
- 以前写SpringMVC的时候，如果需要访问一个页面，必须要写Controller类，然后再写一个方法跳转到页面，感觉好麻烦，其实重写WebMvcConfigurerAdapter中的addViewControllers方法即可达到效果了
以前写SpringMVC的时候,如果需要访问一个页面,必须要写Controller类,然后再写一个方法跳转到页面,感觉好麻烦,其实重写WebMvcConfigurerAdapter中的addViewC ...
- EntityFramework：迁移工具入门
背景 刚毕业做项目的时候,没有用“迁移”这个概念,系统发布和更新的过程让人非常痛苦,在学习 Ruby On Rails 的过程解除了“迁移”,以后的所有项目都会先确定好“迁移”的方案,本文介绍一下En ...
- The application’s PagerAdapter changed the adapter’s contents without calling PagerAdapter#notifyDa
错误原因是在于修改了PageAdapter,却没有调用 PageAdapter的nodifyDataSetChanged方法.注意刷新数据 需要在主线程. 今天在做项目时出现了这个问题,一直报没有调用 ...
- SIGSEGV异常时打印函数调用链
C语言写的程序跑飞了,怎样打印出函数调用链呢? linux_dev_framework软件包中的trace_exception_test.c就是一个实现演示样例. 该程序有益产生一个内存訪问异常,然后 ...
- 各浏览器CSS兼容问题
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml ...
- SVN — subclipse操作指引
摘自: http://jiangzhengjun.iteye.com/blog/491824 安装插件:请参照http://subclipse.tigris.org/servlets/ProjectP ...
- Ubuntu挂载samba共享目录
Ubuntu中现在没有smbfs了,所以smbmount命令也用不了了,现在可以使用mount.cifs命令来挂载. Usage: mount.cifs <remotetarget> & ...
- Code a simple telnet client using sockets in python
测试端口是否开放的python脚本 原文: https://www.binarytides.com/code-telnet-client-sockets-python/ 配置: 120.79.14.8 ...
- 怎样获取shell函数的返回值及shell命令的返回值？
1.获取shell函数调用的返回值: #!/bin/sh info() { cat jlb.sh } res=`info` echo "state: "$? echo " ...