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

Dear 丶 2022-03-29 07:47 196阅读 0赞

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

AngularJS路由系列包括：  
  
1、[AngularJS路由系列(1)--基本路由配置][AngularJS_1_--]  
2、[AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式，获取路由参数，路由的Resolve][AngularJS_2_--_URL_Resolve]  
3、[AngularJS路由系列(3)-- UI-Router初体验][AngularJS_3_-- UI-Router]  
4、[AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数][AngularJS_4_-- UI-Router_state]  
5、[AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件][AngularJS_5_-- UI-Router_Resolve]  
6、[AngularJS路由系列(6)-- UI-Router的嵌套State][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的$state服务 ##

![417212-20151120220342749-1145839422.png][]

方法：  
● go()    
● reload()  
● get()  
  
属性：  
● current  
● params  
  
事件  
● $stateChangeError  
● $stateChangeStart  
● $stateChangeSuccess  
● $stateNotFound  
  
  
■ index.html, 使用ui-sref

bootstrap.cerulean.min.css
    toastr.min.css
    
    
    angular.min.js
    angular-ui-router.min.js
    
    
    app.js
    
    
    dataServices.js
    notifier.js
    
    
    activityMonthFilter.js
    
    
    HomeController.js
    AllSchoolsController.js
    AllClassroomsController.js
    AllActivityiesController.js
    ClassroomController.js
    ClassroomSummaryController.js
    ClassroomMessageController.js
    
    
    <body ng-app="app">
        <a ui-sref="home">School Buddy</a>
        <a ui-sref="schools">Schools</a>
        <a ui-sref="classrooms">Classrooms</a>
        <a ui-sref="activities">Activities</a>
        
        <div ui-view></div>
    </body>

■ HomeController.js

■ home.html  
  
\{ \{home.message\}\}  
\{ \{home.schoolCount\}\}  
\{ \{home.classroomCount\}\}  
\{ \{home.activityCount\}\}  
  
<button ng-click="home.refresh()">刷新</button>  
  
点击"刷新"按钮。

![417212-20151120220520608-345655146.png][]

可见，$state.reload()方法只刷新路由部分，与浏览器的刷新按钮功能是不一样的。  
  
控制台方面，$state.current代表的当前如下：

![417212-20151120220548968-1866820840.png][]

## UI-Router的路由事件 ##

■ app.js, 给$rootScope添加有关路由的事件

■ index.html， 故意制造一个404错误

bootstrap.cerulean.min.css
    toastr.min.css
    
    
    angular.min.js
    angular-ui-router.min.js
    
    
    app.js
    
    
    dataServices.js
    notifier.js
    
    
    activityMonthFilter.js
    
    
    HomeController.js
    AllSchoolsController.js
    AllClassroomsController.js
    AllActivityiesController.js
    ClassroomController.js
    ClassroomSummaryController.js
    ClassroomMessageController.js
    
    
    <body ng-app="app">
        <a ui-sref="home">School Buddy</a>
        <a ui-sref="schools">Schools</a>
        <a ui-sref="classrooms">Classrooms</a>
        <a ui-sref="activitiesAAA">Activities</a>
        
        <div ui-view></div>
    </body>

在<a ui-sref="activitiesAAA">Activities</a>这里制造了一个404错误。  
  
点击首页的"刷新"按钮。  
  
![417212-20151120220739390-712999365.png][]

点击Schools  
![417212-20151120220754749-1534497658.png][]

点击Classroom故意抛出的异常  
![417212-20151120220811311-367569500.png][]

点击Activities故意抛出404异常。  
![417212-20151120220829733-1449888601.png][]

## UI-Router获取路由参数 ##

UI-Router为我们提供了$stateParams服务。  
  
![417212-20151120220845874-1219971851.png][]

.state('classrooms',{
        url: '/classrooms/:id'
    })
    .state('classrooms',{
        url: '/classrooms/{id}'
    })
    .state('activities',{
        url: '/activities',
        params: {
            id: { value: 42}
        }
    })

localhost:3000/\#/classrooms/3

function ClassroomController($stateParams){
        var classroomID = $stateParams.id;
    }

■ app.js, 添加带参数的路由

■ ClassroomController.js

■ allClassrooms.html

<tr ng-repeat="classroom in classrooms.allClassrooms">
        <td><a href="#/classrooms/{
        {classroom.id}}/details">{
        {classroom.name}}</a></td>
        <td>{
        {classroom.school.name}}</td>
        <td><a ui-sref="classroom_summary({id: classroom.id})">{
        {classroom.teacher}}</a></td>
    </tr>

在浏览器中输入：localhost:3000/\#/classrooms/1

![417212-20151120221119265-347817727.png][]

■ app.js, 添加带多个参数的路由

■ ClassroomController.js， 接受更多的路由参数

■ AllActivitiesController.js

浏览器中输入：localhost:3000/\#/classrooms/1/detail/12  
  
![417212-20151120221257577-1599998267.png][]

未完待续~~

[AngularJS_1_--]: http://www.cnblogs.com/darrenji/p/4981008.html
[AngularJS_2_--_URL_Resolve]: http://www.cnblogs.com/darrenji/p/4981505.html
[AngularJS_3_-- UI-Router]: http://www.cnblogs.com/darrenji/p/4982446.html
[AngularJS_4_-- UI-Router_state]: http://www.cnblogs.com/darrenji/p/4982480.html
[AngularJS_5_-- UI-Router_Resolve]: http://www.cnblogs.com/darrenji/p/4982517.html
[AngularJS_6_-- UI-Router_State]: http://www.cnblogs.com/darrenji/p/4982533.html
[417212-20151120220342749-1145839422.png]: /images/20220329/6404279e5d8a4ff4a3ea769779632f2b.png
[417212-20151120220520608-345655146.png]: /images/20220329/be018d5dbaa145a082cd2e323cc110d7.png
[417212-20151120220548968-1866820840.png]: /images/20220329/408d71d4cd4d443c88607b0ca2ac06b2.png
[417212-20151120220739390-712999365.png]: /images/20220329/a7bd0148c6cc435aae251e349d830265.png
[417212-20151120220754749-1534497658.png]: /images/20220329/2db7708705424d179d63aaf5bcc5049d.png
[417212-20151120220811311-367569500.png]: /images/20220329/12d3b5dad78942dc91926bfc225578c1.png
[417212-20151120220829733-1449888601.png]: /images/20220329/6fff49063ce9432fa37ecb4f10299433.png
[417212-20151120220845874-1219971851.png]: /images/20220329/8bc59175bf5643f79f21701adc760147.png
[417212-20151120221119265-347817727.png]: /images/20220329/143b9c53ddf74e5db86f2a7117de8fe9.png
[417212-20151120221257577-1599998267.png]: /images/20220329/fda377684fe44c9c88991b780c0b6118.png