本系列探寻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初体验的更多相关文章

  1. AngularJS路由系列(6)-- UI-Router的嵌套State

    本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...

  2. AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...

  3. AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...

  4. AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式,获取路由参数,路由的Resolve

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...

  5. AngularJS路由系列(1)--基本路由配置

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 路由的Big Picture ● $routeProvider配置路由 ● 使用template属性 ● 使用temp ...

  6. Android开发学习之路--UI之初体验

    之前都是学习Activity,对于布局都没有做过学习,这里就简单学习下吧.下面看下Android Studio下有哪些控件: 这里分为Widgets,Text Fields,Containers,Da ...

  7. java -ui自动化初体验

    本文来讲一下ui自动化的环境搭建,以及最初级的打开网页操作 说起ui自动化,想想大概是前年的时候我开始接触和学习的吧,怎么说呢无论是pc还是app,ios还是android,确实很神奇而且很华丽,但是 ...

  8. Angular2入门系列教程2-项目初体验-编写自己的第一个组件

    上一篇 使用Angular-cli搭建Angular2开发环境 Angular2采用组件的编写模式,或者说,Angular2必须使用组件编写,没有组件,你甚至不能将Angular2项目启动起来 紧接着 ...

  9. 小马哥-Java 微服务实践 - Spring Boot 系列-01Java 微服务实践 - Spring Boot 系列(一)初体验

    课程github地址 https://github.com/mercyblitz/segmentfault-lessons 传统的web应用架构.微服务是一种架构.不限定什么语言 单体应用和微服务的对 ...

随机推荐

  1. linux 串口驱动(三) 【转】

    转自:http://blog.chinaunix.net/uid-27717694-id-3495825.html 三.串口的打开在用户空间执行open操作的时候,就会执行uart_ops->o ...

  2. Linux下USB转串口的驱动【转】

    转自:http://www.linuxidc.com/Linux/2011-02/32218.htm Linux发行版自带usb to serial驱动,以模块方式编译驱动,在内核源代码目录下运行Ma ...

  3. 一个无锁消息队列引发的血案(六)——RingQueue(中) 休眠的艺术 [续]

    目录 (一)起因 (二)混合自旋锁 (三)q3.h 与 RingBuffer (四)RingQueue(上) 自旋锁 (五)RingQueue(中) 休眠的艺术 (六)RingQueue(中) 休眠的 ...

  4. java 遍历指定目录下的文件夹并查找包含指定关键字的文件

    输入指定关键字,在制定目录中查找包含关键字的文件,返回包含指定关键字的文件路径. package net.xsoftlab.baike; import java.io.File; import jav ...

  5. mysql ON DUPLICATE KEY UPDATE重复插入时更新

    mysql当插入重复时更新的方法: 第一种方法: 示例一:插入多条记录 假设有一个主键为 client_id 的 clients 表,可以使用下面的语句: INSERT INTO clients (c ...

  6. Java 把异常传递给控制台

    最简答而又不用写多少代码就能保护异常信息的方法,就是把它们从main()传递到控制台,对于简单的程序可以像这样: package exceptions; //: exceptions/MainExce ...

  7. 关于CCR测评器的自定义校验器(Special Judge)

    引言 有时我们需要使用CCR测评器(CCR-Plus是一个开源的信息学竞赛测评软件,Github链接https://github.com/sxyzccr/CCR-Plus)进行SpecialJudge ...

  8. day--14前端(HTML、CSS)

    浏览器相当于客户端,浏览器访问服务端,收到消息之后里面断开,一次请求,一次响应,一次断开.     Web框架本质    http://www.cnblogs.com/wupeiqi/articles ...

  9. 【AtCoder】ARC100 题解

    C - Linear Approximation 找出\(A_i - i\)的中位数作为\(b\)即可 题解 #include <iostream> #include <cstrin ...

  10. 【Java】 大话数据结构(12) 查找算法(3) (平衡二叉树(AVL树))

    本文根据<大话数据结构>一书及网络资料,实现了Java版的平衡二叉树(AVL树). 平衡二叉树介绍 在上篇博客中所实现的二叉排序树(二叉搜索树),其查找性能取决于二叉排序树的形状,当二叉排 ...