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和伟大的 ...
随机推荐
- IOS创建单例的两种方法
1.0 苹果官方写法: static AccountManager *DefaultManager = nil; + (AccountManager *)defaultManager { if ( ...
- JAVA异常使用_每个人都曾用过、但未必都用得好
一.抛出异常 vs. 返回错误代码 有人说“Well, an exception is a goto.”,但也有人言“makes the code simpler by visibly separat ...
- Git 分支管理详解
大纲: 1.前言 2.创建分支 3.切换分支 4.合并分支(快速合并) 5.删除分支 6.分支合并冲突 7.合并分支(普通合并) 8.分支管理策略 9.团队多人开发协作 10.总结 注,测试机 Cen ...
- Android Assert工具类
/* * Copyright (C) 2013 The Android Open Source Project * * Licensed under the Apache License, Versi ...
- Android Studio rename module Can't rename root module
Android Studio修改工程根目录的时候会报错, rename module Can't rename root module. 主要是该工程已经打开,再命名必须要关闭改工程,就跟正在写一个t ...
- Words-specialty
1-100 101-200 community n.社区; 共同体; 社会团体; [生态] 群落 overview n.概观; 总的看法; 回顾,复习 transforming vi.改变,使 ...
- What does cmd /C mean? [closed] 关于nodejs的子进程部分
之前一直很不明白为什么 child_process.spawn(command[, args][, options]) shell <Boolean> | <String> I ...
- 整理幾種常見PCB表面處理的優缺點
這只是一篇整理文,而且我個人僅從事過後段的電路板組裝,而未從事過電路板製程,所以有些見解純粹只是個人看法,如果有些不一樣的聲音或錯誤也歡迎留言討論. 隨著時代的演進,科技的進步,環保的要求,電子業也隨 ...
- 生成war的jdk版本高于tomcat使用的jdk版本,导致项目不能正常被访问
记录一个耽误30分钟的一个坑: 生成war的jdk版本高于tomcat使用的jdk版本,导致项目不能正常被访问 报404错误
- 转:Memcached常用命令及使用说明
一.存储命令 存储命令的格式: 1 2 <command name> <key> <flags> <exptime> <bytes> < ...