Angular-UI-Router
路由 Route
为什么用 Route
- AJAX 请求不会留下 History 记录
- 用户无法直接通过 URL 进入应用中的指定页面(保存书签、链接分享给朋友)
AJAX 对 SEO 是个灾难
var bookStoreApp = angular.module('bookStoreApp', [
'ngRoute',
'ngAnimate',
'bookStoreCtrls',
'bookStoreFilters',
'bookStoreServices',
'bookStoreDirectives'
]); bookStoreApp.config( // 路由机制
function($routeProvider) {
$routeProvider.when('/hello', {
templateUrl: 'tpls/hello.html',
controller: 'HelloCtrl'
}).when('/list/:bookId', {
templateUrl: 'tpls/bookList.html',
constoller: 'BookListCtrl'
}).otherwise({
redirectTo: '/hello'
});
}
);
嵌套 View (Nested Routing for AngularJS)
AngularUI-Router AngularUI
<div ui-view></div>
前端路由的基本原理
- 哈希 #
- HTML5 中新的 history API
- 路由的核心是给应用定义 "状态"
- 使用路由机制会影响到应用的整体编码方式(需预先定义好状态)
- 考虑兼容性问题与 "优雅降级"
Angular-UI-Router
ui-sref 指令链接到特定状态
<a ui-sref="home">Home</a>
<a ui-sref="about">About</a>
<a ui-sref="contacts.list">Contacts</a>
$state.includes 返回 true
/ false
以上方法为查看当前状态是否在某父状态内,比如$state.includes('contacts')
返回 true
/ false
<!-- 包含在 /contacts 状态内部,即其作为 parant state -->
<li ng-class="{active: $state.includes('contacts')}">
<a ui-serif="contacts.list">Contacts</a>
</li>
ui-sref-active 查看当前激活状态并设置 Class
<li ui-sref-active="active"><a ui-sref="about">About</a></li>
包含模块
angular.module('uiRouter', ['ui.router']);
方便获得当前状态的方法,绑到根作用域
app.run(['$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]);
路由重定向 $urlRouterProvider
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider
// 错误的路由重定向
.when('/c?id', '/contacts/:id')
.when('/user/:id', '/contacts/:id')
.otherwise('/');
}
]);
状态配置
$stateProvider.
state('about', {
url: '/about',
template: '<h1>Welcome to UI-Router Demo</h1>',
// optional below
templateProvider: ['$timeout',
function($timeout) {
return $timeout(function() {
return '<p class="lead">UI-Router Resource</p>' +
'<p>The second line</p>'
}, 100);
}
],
templateUrl: 'about.html',
templateUrl: function() {
return 'about.html';
},
controller: 'UIRouterCtrl',
// below is a state controller picked from UI-Router official sample
controller: ['$scope', '$state', 'contacts', 'utils',
function ($scope, $state, contacts, utils) {
$scope.contacts = contacts;
$scope.goToRandom = function () {
var randId = utils.newRandomKey($scope.contacts, 'id', $state.params.contactId);
$state.go('contacts.details', { contactId: randId });
}
}
]
});
嵌套配置 Configure
JavaScript Codes
Parent Router
$stateProvider.
.state('contacts', {
// abstract: true 表明此状态不能被显性激活,只能被子状态隐性激活
abstract: true,
url: '/contacts',
templateUrl: 'contacts.html',
// resolve 被使用来处理异步数据调用,以下是返回一个 promise -> contacts.all()
resolve: {
contacts: ['contacts',
function(contacts) {
// 以下方法被放在 contacts.service.js 中,以 factory 存在
return contacts.all();
}
]
},
// below is a state controller picked from UI-Router official sample
controller: ['$scope', '$state', 'contacts', 'utils',
function ($scope, $state, contacts, utils) {
$scope.contacts = contacts;
$scope.goToRandom = function () {
var randId = utils.newRandomKey($scope.contacts, 'id', $state.params.contactId);
$state.go('contacts.details', { contactId: randId });
}
}
]
})
Children Router (Nested Router)
$stateProvider
.state('contacts.list', {
url: '',
templateUrl: 'contacts.list.html'
})
.state('contacts.detail', {
url: '/{contactId:[0-9]{1,4}}',
// view 用在该状态下有多个 ui-view 的情况,可以对不同的 ui-view 使用特定的 template, controller, resolve data
// 绝对 view 使用 '@' 符号来区别,比如 'foo@bar' 表明名为 'foo' 的 ui-view 使用了 'bar' 状态的模板(template),相对 view 则无
views: {
// 无名 view
'': {
templateUrl: 'contacts.detail.html',
controller: ['$scope', '$stateParams', 'utils',
function ($scope, $stateParams, utils) {
$scope.contact = utils.findById($scope.contacts, $stateParams.contactId);
}
]
},
// for "ui-view='hint'"
'hint@': {
template: 'This is contacts.defail populating the "hint" ui-view'
},
// for "ui-view='menuTip'"
'menuTip': {
templateProvider: ['$stateParams',
function($stateParams) {
return '<hr><small class="muted">Contact ID: ' + $stateParams.contactId + '</small>';
}
]
}
}
})
HTML Codes
<h2>All Contacts</h2>
<ul>
<li ng-repeat="contact in contacts">
<a ui-sref="contacts.detail({contactId:contact.id})">{{contact.name}}</a>
</li>
</ul>
Angular-UI-Router的更多相关文章
- angular ui.router 路由传参数
angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...
- 规范 : angular ui router path & params
在seo文章中提到url的path 必须是 why-us,而不是whyUS 所以定了规范,所有的path 必须why-us path ?后尾的是用来filter的,所以可以WhyUs 如果是不需要给s ...
- angular 的ui.router 定义不同的state 对应相同的url
Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...
- angular : $location & $state(UI router)的关系
次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, o ...
- 【原创】ui.router源码解析
Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...
- angularjs ngRoute和ui.router对比
ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...
- ngRoute 与ui.router区别
angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...
- AngularJS 使用 UI Router 实现表单向导
Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...
- ngRoute 和 ui.router 的使用方法和区别
在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...
- [转]AngularJS 使用 UI Router 实现表单向导
本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...
随机推荐
- 【HTML+CSS】浅谈:相对定位与绝对定位
相对定位和绝对定位 ·定位标签:position ·包括属性:relative(相对) absolute(绝对) 1.position:relative; 假设对一个元素进行相对定位.首先它将出如今 ...
- 【特殊的图+DP】【11月校赛】大家一起玩游戏
大家一起玩游戏 Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Submi ...
- Sublime Text插件FileHeader实践
FileHeader是一个文件模板插件,可以定制各种文件模板和文件头部信息,保存时可以自动更新文件的修改时间.在多人开发中这个功能相当实用. 具体介绍我就不细说了,主要是分享一下在使用FileHead ...
- 【数据处理】各门店POS销售导入
--抓取西部POS数据DELETE FROM POSLSBF INSERT INTO POSLSBFselect * from [192.168.1.100].[SCMIS].DBO.possrlbf ...
- mysql中select into 和sql中的select into 对比
现在有张表为student,我想将这个表里面的数据复制到一个为dust的新表中去.answer 01: create table dust select * from student;//用于复制前未 ...
- seajs路径问题及源码分析
seajs如此神奇,究竟是如何做到的呢,想知基原理,方可看其源码~~之前冲忙写下的,可能有点乱哦~~有什么不对的,欢迎拍砖! 如果进入seajs了管理范围,那么路径分为: 1. / 或 ...
- shopnc数据库 批量修改商品价格
1.商品价格统一上调50 2.商品价格个别上调50 UPDATE `nc_goods` SET `goods_price` = `goods_price` +50 where goods_id!=10 ...
- 使用notepad++学习python爬虫,print网页中文乱码问题
今天学习使用python爬虫的时候发现爬到的网页中文会乱码,一直网上搜索解决办法,一个一个试验过去,发现还是乱码,然后我就开始使用其它方法测试,用python自带的编辑器打开是正常的,发现是notep ...
- iOS中判断设备系统版本
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
- 补丁惹的祸-ContractName Microsoft.VisualStudio.Text.ITextDocumentFactoryService
未找到与约束ContractName Microsoft.VisualStudio.Text.ITextDocumentFactoryService...匹配的导出 问题: 重新安装了VS2012,结 ...