AngularJS路由系列(3)-- UI-Router初体验
本系列探寻AngularJS的路由机制,在WebStorm下开发。
AngularJS路由系列包括:
1、AngularJS路由系列(1)--基本路由配置
2、AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式,获取路由参数,路由的Resolve
3、AngularJS路由系列(3)-- UI-Router初体验
4、AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数
5、AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件
6、AngularJS路由系列(6)-- UI-Router的嵌套State
项目文件结构
node_modules/
public/
.....app/
..........bower_components/
...............toastr/
....................toastr.min.css
....................toastr.min.js
...............jquery/
....................dist/
.........................jquery.min.js
...............angular/
....................angular.min.js
...............angular-ui-router/
....................release/
.........................angular-ui-router.min.js
...............angular-route/
.........................angular-route.min.js
..........controllers/
...............HomeController.js
...............AllSchoolsController.js
...............AllClassroomsController.js
...............AllActivityiesController.js
...............ClassroomController.js
...............ClassroomSummaryController.js
...............ClassroomMessageController.js
..........css/
...............bootstrap.cerulean.min.css
..........filters/
...............activityMonthFilter.js
..........services/
...............dataServices.js
...............notifier.js
..........templates/
...............home.html
...............allSchools.html
...............allClassrooms.html
...............allActivities.html
...............classroom.html
...............classroomDetail.html
...............classroom_parent.html
..........app.js
.....index.html
.....favicon.ico
server/
.....data/
.....routes/
.....views/
.....helpers.js
package.json
server.js
关于UI-Router
相比ngRoute, UI-Router不仅包含ngRoute的全部功能,还包括其它更多的功能,提供了一种state-based的路由机制。
UI-Router中的state指什么?
AngularJS应用程序中的places。
如何获取UI-Router?
bower intall angular-ui-router#0.2.15
或
npm install angular-ui-router@0.2.15
或
https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js
或
http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js
如何使用获取UI-Router?
→ 添加angular-ui-router.js的引用
→ 添加对ui.router模块的依赖
→ 在视图中使用ui-view
如何配置UI-Router?
(function(){
var app = angular.module('app',['ui.router']);
app.config(['$stateProvider', function($stateProvider){
$stateProvider
.state('home',{
url:'/',
controller: 'HomeController',
controllerAs: 'home',
templateUrl: 'app/templates/home.html'
})
}]);
}());
■ 激活一个State
● $state.go('classrooms');
● <a ui-sref="classrooms">Classrooms</a>
● <a href="/classrooms">Classrooms</a>
使用UI-Router初体验
■ index.html,重新设计,使用UI-Router
bootstrap.cerulean.min.css
toastr.min.css <!--Angular-->
angular.min.js
angular-ui-router.min.js <!--Application-->
app.js <!--Services-->
dataServices.js
notifier.js <!--Filters-->
activityMonthFilter.js <!--Controls-->
HomeController.js
AllSchoolsController.js
AllClassroomsController.js
AllActivityiesController.js
ClassroomController.js
ClassroomSummaryController.js
ClassroomMessageController.js <body ng-app="app">
<a href="#/">School Buddy</a>
<a href="#/schools">Schools</a>
<a href="#/activities">Activities</a> <div ui-view></div>
</body>
■ app.js, 重新设计,使用UI-Router
(function(){
var app = angular.module('app',['ui.router']); app.config(['$logProvider', '$stateProvider', function($logProvider, $stateProvider){
$logProvider.debugEnabled(true); $stateProvider
.state('home',{
url: '/',
template: '<h1>This is an inline template</h1>'
});
}]);
}());
UI-Router的templateUrl属性
■ app.js, 使用templateUrl属性
(function(){
var app = angular.module('app',['ui.router']); app.config(['$logProvider', '$stateProvider', function($logProvider, $stateProvider){
$logProvider.debugEnabled(true); $stateProvider
.state('home',{
url: '/',
templateUrl: '/app/templates/home.html',
controller: 'HomeController', //也可以写成HomeController as home
controllerAs: 'home'
});
}]);
}());
■ app.js, 添加更多的路由
(function(){
var app = angular.module('app',['ui.router']); app.config(['$logProvider', '$stateProvider', function($logProvider, $stateProvider){
$logProvider.debugEnabled(true); $stateProvider
.state('home',{
url: '/',
templateUrl: '/app/templates/home.html',
controller: 'HomeController', //也可以写成HomeController as home
controllerAs: 'home'
})
.state('schools',{
url: '/schools',
controller: 'AllSchoolController',
controllerAs: 'schools',
templateUrl: '/app/templates/allSchools.thml'
})
.state('classrooms',{
url:'/classrooms',
controller: 'AllClassroomsController',
controllerAs: 'classrooms',
templateUrl: '/app/tempates/allClassrooms.html'
})
.state('activities', {
url: '/activities',
controller: 'AllActivitiesController',
controllerAs: 'activities',
templateUrl: '/app/templates/allActivities.html'
})
}]);
}());
未完待续~~
AngularJS路由系列(3)-- UI-Router初体验的更多相关文章
- AngularJS路由系列(6)-- UI-Router的嵌套State
本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...
- AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...
- AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...
- AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式,获取路由参数,路由的Resolve
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...
- AngularJS路由系列(1)--基本路由配置
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 路由的Big Picture ● $routeProvider配置路由 ● 使用template属性 ● 使用temp ...
- Android开发学习之路--UI之初体验
之前都是学习Activity,对于布局都没有做过学习,这里就简单学习下吧.下面看下Android Studio下有哪些控件: 这里分为Widgets,Text Fields,Containers,Da ...
- java -ui自动化初体验
本文来讲一下ui自动化的环境搭建,以及最初级的打开网页操作 说起ui自动化,想想大概是前年的时候我开始接触和学习的吧,怎么说呢无论是pc还是app,ios还是android,确实很神奇而且很华丽,但是 ...
- Angular2入门系列教程2-项目初体验-编写自己的第一个组件
上一篇 使用Angular-cli搭建Angular2开发环境 Angular2采用组件的编写模式,或者说,Angular2必须使用组件编写,没有组件,你甚至不能将Angular2项目启动起来 紧接着 ...
- 小马哥-Java 微服务实践 - Spring Boot 系列-01Java 微服务实践 - Spring Boot 系列(一)初体验
课程github地址 https://github.com/mercyblitz/segmentfault-lessons 传统的web应用架构.微服务是一种架构.不限定什么语言 单体应用和微服务的对 ...
随机推荐
- PHPStorm 配置本地服务器
本篇教程为配置 PHPStorm 本地服务器,以方便程序调试. 本地服务器工具:XAMPP for windows 7.1.1-0 / Apache 2.4.25 ( Win32 ) / PHP 7. ...
- Deep learnin简介
从今天开始,准备入DL的大坑,希望自己能坚持下来. 网上有不少介绍: 深度学习的历 史:http://www.goldencui.org/2014/12/02/%E7%AE%8 ...
- liunx 安装和解压命令
tar.gz格式 sudo tar -xvf file.tar.gz -C /目录/ //注意C为大写,-C /目录是可选的 zip sudo jar xvf file.zip //jar ...
- 如何简单区分Web前后端与MVC
MVC是开发所有软件所必须涉及的基本几个划分 M主要负责数据与模型,V主要负责显示C主要负责交互与业务所以不管是前端还是后端,都是有MVC的.MVC是一个对于软件简单的抽象,不管是M还是V,还是C都是 ...
- spring applicationContext.xml中<beans>中属性概述
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w ...
- Java总结——常见Java集合实现细节(1)
Java提高——常见Java集合实现细节(1) 2018年04月18日 15:07:35 阅读数:25 集合关系图 Set和Map set代表一种集合元素无序.集合元素不可重复的集合 map代表一种由 ...
- vs2010 打包安装
https://jingyan.baidu.com/article/b7001fe184e4e50e7382dd4e.html 1 建立安装项目2 要安装的文件都添加到应用程序文件夹3 在应用程序文件 ...
- spark web ui中的skipped的含义
顾名思义,跳出的意思啦. 例如如图: skipped的stages代表是已经执行过了.所以不需要再执行了. 如何,你有一个 testRdd.然后先做 testRdd.Filter("xxx& ...
- java中父类和子类初始化顺序
顺序 1. 父类中静态成员变量和静态代码块 2. 子类中静态成员变量和静态代码块 3. 父类中普通成员变量和代码块,父类的构造函数 4. 子类中普通成员变量和代码块,子类的构造函数 其中“和”字两端的 ...
- 自制 COCO api 直接读取类 COCO 的标注数据的压缩文件
第6章 COCO API 的使用 COCO 数据库是由微软发布的一个大型图像数据集,该数据集专为对象检测.分割.人体关键点检测.语义分割和字幕生成而设计.如果你要了解 COCO 数据库的一些细节,你可 ...