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

àì夳堔傛蜴生んèń 2021-11-02 12:32 344阅读 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][]

未完待续~~

转载于:https://www.cnblogs.com/darrenji/p/4982480.html

[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/20211101/1087b9c98d2748888f2fb27919a9b610.png
[417212-20151120220520608-345655146.png]: /images/20211101/200496be0fd34a3e8763b750e5f89247.png
[417212-20151120220548968-1866820840.png]: /images/20211101/f7557ca7287b4dddbc31cb3c42263ff3.png
[417212-20151120220739390-712999365.png]: /images/20211101/10473ed0ae144616b753e798b805acc0.png
[417212-20151120220754749-1534497658.png]: /images/20211101/ae172cd5312e476ca5d9f1eb36bf5202.png
[417212-20151120220811311-367569500.png]: /images/20211101/22fe377647ee4469a62963ebefe5cacf.png
[417212-20151120220829733-1449888601.png]: /images/20211101/d83eb8a123804e72bdc22f345dbda51d.png
[417212-20151120220845874-1219971851.png]: /images/20211101/31180ee64e5e4840b11e193680a08845.png
[417212-20151120221119265-347817727.png]: /images/20211101/68a50166a7ba47cbacd89469b411eb13.png
[417212-20151120221257577-1599998267.png]: /images/20211101/d820edb86cb2449a9fb33c44cc90e5f7.png