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

男娘i 2021-11-02 12:32 326阅读 0赞

本系列探寻AngularJS的路由机制，在WebStorm下开发。主要包括：

● 刷新路由  
● 查看当前路由以及所有路由  
● 路由触发事件  
● 获取路由参数

● 路由的resolve属性  
● 路由URL格式

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*

## 刷新路由 ##

有时候我们需要刷新路由而不是整个页面。该如何做呢？ngRoute这个module为我们准备了$route服务的reload()方法可以实现。

![417212-20151120170402061-1314623341.png][]

■ HomeController.js， 添加刷新路由功能，$route.reload

■ home.html, 添加刷新路由的按钮

\{ \{home.message\}\}  
\{ \{home.schoolCount\}\}  
\{ \{home.activityCount\}\}

当点击"刷新"按钮，刷新的只是路由，不是整个页面。

![417212-20151120170516671-655156884.png][]

## 查看当前路由以及所有路由 ##

$route服务提供了current和routes属性。

■ HomeController.js， 查看当前路由以及所有路由，使用$route的current和routes属性

$route.current相关的如下：

![417212-20151120170621530-2094951809.png][]

$route.routes相关如下：

![417212-20151120170631155-766213596.png][]

## 路由触发事件 ##

$route服务提供以下几个事件：

● $routeChangeStart  
● $routeChangesSuccess  
● $routeChangeError  
● $routeUpdate  
使用$on来调用事件

这些事件是在路由发生变化、路由成功、路由异常、路由更新时被触发。谁来做这些事件的载体呢？我们可以使用$on方法把这些事件注册到$rootScope上去，这样，在全局范围内触发这些事件。

■ app.js，为$rootScope添加路由事件

以上，使用resolve在controller初始化之前定义一个promise方法故意抛出一个异常。

在localhost:3000/\#/下刷新浏览器，即触发了$rootScope的$routeChangeSuccess事件。

![417212-20151120170808186-11485274.png][]

可见，event用来存放当前触发事件；current用来存放当前路由，previous用来存放上一个路由。

清空控制台记录，点击导航栏上的Activities

![417212-20151120170825218-2005371705.png][]

previous显示了上一个路由。

清空控制台记录，点击导航栏上的Classroom,即我们故意在该路由中设置了一个异常。

![417212-20151120170844436-1100661470.png][]

## 获取路由参数 ##

有时候我们需要获取路由中的参数，ngRoute为我们提供了$routeParams服务。

![417212-20151120170907186-47596941.png][]

.when('/classrooms/:id',\{

\})

在控制器中大致这样：

function ClassroomController($routeParams){
        var classroomID = $routeParams.id;
        //使用classroomID获取相关Classroom
    }

■ app.js，针对Classroom添加一个带参数的路由

■ ClassroomController.js

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

![417212-20151120171054702-1644876369.png][]

■ app.js，针对Classroom添加带更多参数的路由

■ ClassroomController.js

■ AllActivitiesController.js

![417212-20151120171222358-101820644.png][]

可见，使用$location.url(route)方法可以轻松转到任何路由。

## 路由的Resolve属性 ##

在配置路由的时候有一个Resolve属性，接受一个Object对象，对象的每一个属性接收一个函数，resolve中的事件发生在controller初始化之前，最终也将被注入到controller中。

.when('/activities', {
        controller: 'AllActivitiesController',
        controllerAd: 'activities',
        templateUrl: '/app/tempaltes/allActivities.html',
        resolve: {
            activities: function(dataService){
                return dataService.getAllActivities();
            }
        }
    })

以上，dataService.getAllActivities方法返回一个promise,必须要被resolved之后才会转到相应的视图页。接着，activities可以被注入到AllActivitiesController中。

■ app.js, 在/activities路由下加上resolve属性

■ AllActivitiesController.js,把路由resolve属性中的activities注入到控制器中来

使用resolve的好处是：当视图页向$scope要数据的时候，由于在controller实例化之前已经准备好了数据，所以页面延迟时间大大缩短。

## 路由URL格式 ##

● Hashbang格式: localhost:3000/\#/classrooms/1/detail/12，默认的就是这种格式  
● HTML5格式：localhost:3000/classrooms/1/detail/12，需要使用$locationProvider配置，如果使用这种格式，但浏览器不支持HTML5的历史API，Angular就会使用Hashbang格式。

![417212-20151120171416593-916958179.png][]

■ app.js, 引用$locationProvider配置自定义url格式

■ index.html,为了配合以上的自定义url格式需要做些改变

<a href="#!/">School Buddy</a>
    
    <a href="#!/schools">Schools</a>
    <a href="#!/classrooms">Classrooms</a>
    <a href="#!/activities">Activities</a>

![417212-20151120171526608-2114380715.png][]

■ app.js, 引用$locationProvider配置HTML5的url格式

■ index.html,为了配合URL的HTML5格式需要做些改变

<head>
        <base href="/">
    </head>
    
    <a href="/">School Buddy</a>
    
    <a href="/schools">Schools</a>
    <a href="/classrooms">Classrooms</a>
    <a href="/activities">Activities</a>

但是url使用HTML5格式有一个不好的地方，当输入一个不存在的url就会报一个404的错。

![417212-20151120171646108-244856041.png][]

未完待续~~

转载于:https://www.cnblogs.com/darrenji/p/4981505.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-20151120170402061-1314623341.png]: /images/20211101/f288a8dccb4c42988bd477e65a3a8ac5.png
[417212-20151120170516671-655156884.png]: /images/20211101/372e6ce37f7c417da446b80ee7c41a82.png
[417212-20151120170621530-2094951809.png]: /images/20211101/8ffc163c8b2c4d65a01bc6ddd16f3c45.png
[417212-20151120170631155-766213596.png]: /images/20211101/b81a559c15814b29aeeb50505f72e1b3.png
[417212-20151120170808186-11485274.png]: /images/20211101/148c8329089d49889f5497523dd0a3c2.png
[417212-20151120170825218-2005371705.png]: /images/20211101/192c5a0fa7c846a19f0ed1365a96011a.png
[417212-20151120170844436-1100661470.png]: /images/20211101/e33cb702bce34a3ca6d01e709cc7be2f.png
[417212-20151120170907186-47596941.png]: /images/20211101/21d80eda751b4d2b90fd63ab476ac300.png
[417212-20151120171054702-1644876369.png]: /images/20211101/fd52683c7b5c430bb9b6358464f05414.png
[417212-20151120171222358-101820644.png]: /images/20211101/4ae8acc863b54fd0ab5a18e618999088.png
[417212-20151120171416593-916958179.png]: /images/20211101/7e3d17b500c34ce78ed73ffad973c72e.png
[417212-20151120171526608-2114380715.png]: /images/20211101/4e420bb797e84e9e9a4c2e905550e6c6.png
[417212-20151120171646108-244856041.png]: /images/20211101/0f9d7bfa89024713a16f7c81b7d2a276.png