$routeChangeSuccess 的奇怪行为：首次加载时不触发（但不抛出任何错误）

AngularJS

$routeChangeSuccess 奇怪行为的案例代码：

angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/', {
        template: '<h1>Welcome to my app</h1>'
      })
      .when('/about', {
        template: '<h1>About page</h1>'
      })
      .otherwise({
        redirectTo: '/'
      });
  })
  .run(function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function() {
      console.log('$routeChangeSuccess event triggered');
    });
  });

标题：$routeChangeSuccess 的奇怪行为

在使用 AngularJS 构建单页应用时，我们经常会使用 ngRoute 模块来处理路由。ngRoute 模块提供了一组指令和服务，使得我们可以轻松地实现页面之间的切换和导航。

在 ngRoute 模块中，$route 服务用于监听路由变化的事件，并触发相应的回调函数。其中，$routeChangeSuccess 事件在路由成功切换后被触发。

然而，有时候我们会遇到一个奇怪的问题：$routeChangeSuccess 事件在首次加载页面时不会触发。这个问题引起了许多开发者的困惑，因为按照理论，$routeChangeSuccess 事件应该在页面加载完毕后自动触发。

为了更好地理解这个问题，我们来看一个具体的案例。假设我们的应用有两个页面：首页和关于页面。我们使用 ngRoute 模块来定义路由，并在每个页面中添加一个标题。

html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="https://Ajax.Googleapis.com/Ajax/libs/AngularJS/1.8.2/angular.min.JS"></script>
  <script src="https://Ajax.Googleapis.com/Ajax/libs/AngularJS/1.8.2/angular-route.min.JS"></script>
  <script src="app.JS"></script>
</head>
<body>
  Home
  About
  
  <div ng-view></div>
</body>
</html>

Javascript
angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/', {
        template: '<h1>Welcome to my app</h1>'
      })
      .when('/about', {
        template: '<h1>About page</h1>'
      })
      .otherwise({
        redirectTo: '/'
      });
  })
  .run(function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function() {
      console.log('$routeChangeSuccess event triggered');
    });
  });

当我们运行这个应用时，我们会发现在首次加载页面时，控制台并没有输出 $routeChangeSuccess event triggered。然而，当我们点击链接切换页面时，控制台会输出相应的日志。

原因分析

为什么会出现这种奇怪的行为呢？经过查阅文档和资料，我们发现了一个可能的原因。

在 ngRoute 模块中，$route 服务是通过 $location 服务来监听 URL 的变化的。当我们首次加载页面时，$location 服务会检测当前 URL 是否与路由配置匹配，并根据匹配结果来决定加载哪个页面的模板。

然而，$routeChangeSuccess 事件是在页面模板加载完成后触发的。因此，在首次加载页面时，$location 服务可能还没有完成 URL 的匹配和模板的加载，从而导致 $routeChangeSuccess 事件没有被触发。

解决方案

虽然 $routeChangeSuccess 事件在首次加载页面时不会触发，但我们可以通过其他方式来监听页面加载的事件，以达到相同的效果。

一个常用的方法是使用 $routeProvider 的 resolve 属性。我们可以在路由配置中添加一个 resolve 函数，该函数可以返回一个 promise，当 promise 被解析时，表示页面已经加载完成。

Javascript
.when('/', {
  template: '<h1>Welcome to my app</h1>',
  resolve: {
    load: function() {
      console.log('Page loaded');
      return Promise.resolve();
    }
  }
})

在这个例子中，我们在首页路由配置中添加了一个 resolve 函数。该函数会输出 Page loaded，并返回一个已解析的 promise，表示页面已经加载完成。

通过这种方式，我们可以在页面加载完成后执行相应的操作，达到与 $routeChangeSuccess 事件相同的效果。

$routeChangeSuccess 事件在首次加载页面时不会触发的奇怪行为可能是由于 $location 服务的机制所导致的。我们可以通过使用 resolve 函数来监听页面加载的事件，以达到相同的效果。这个问题虽然有些奇怪，但我们可以通过一些技巧来解决，确保应用的正常运行。