如何确保AngularJS run()块中的Promise完成后再执行后续流程？

我懂你的需求——你希望AngularJS在完成所有关键的初始化异步操作（比如从后端拉取配置、初始化全局状态）之后，再开始执行指令、控制器这些后续流程，避免因为初始化未完成导致的错误。你之前写的run块代码之所以没生效，是因为AngularJS的run块本身不会自动等待异步Promise完成，它只是在应用启动阶段执行代码，不会阻塞整个启动流程。

下面给你两种最常用的解决方案，根据你的应用场景选择：

方案一：手动启动AngularJS应用（最可靠） #

这种方式完全掌控应用的启动时机，确保初始化Promise完成后才让AngularJS接管页面，是全局初始化场景下的首选。

步骤如下：

1. 移除页面上的ng-app指令（因为我们要手动触发启动）
2. 先执行初始化逻辑，完成后调用angular.bootstrap启动应用

示例代码：

// 定义你的应用模块和初始化服务
var myApp = angular.module('myApp', []);

myApp.service('initService', ['$http', '$q', function($http, $q) {
  this.init = function() {
    // 模拟实际的异步初始化操作（比如加载配置、认证信息）
    return $http.get('/api/global-config')
      .then(function(response) {
        // 在这里处理初始化结果，比如保存到服务供全局使用
        this.globalConfig = response.data;
        console.log('初始化完成');
        return true;
      }.bind(this))
      .catch(function(error) {
        // 处理初始化失败的情况，比如记录日志、提示用户
        console.error('初始化失败:', error);
        return $q.reject(error);
      });
  };
}]);

// 等待DOM加载完成后执行初始化
angular.element(document).ready(function() {
  // 创建临时注入器获取initService实例
  var injector = angular.injector(['ng', 'myApp']);
  var initService = injector.get('initService');

  // 等待初始化Promise完成后启动应用
  initService.init().then(function() {
    angular.bootstrap(document, ['myApp']);
  }).catch(function() {
    // 初始化失败时的降级处理，比如显示错误页面
    document.body.innerHTML = '<div style="text-align:center; margin-top:50px;">应用初始化失败，请刷新页面重试</div>';
  });
});

这种方式的优势在于：应用的所有组件（指令、控制器、过滤器）都会在初始化完成后才被实例化，彻底避免了初始化未完成导致的问题。

方案二：路由Resolve（适用于路由驱动的单页应用） #

如果你的应用是基于AngularJS路由（ngRoute）的单页应用，可以通过路由的resolve属性，让每个路由都等待初始化Promise完成后再加载对应的视图和控制器。

示例代码：

myApp.run(['initService', '$rootScope', function(initService, $rootScope) {
  // 将初始化Promise挂载到$rootScope，供路由resolve使用
  $rootScope.initPromise = initService.init();
}]);

myApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'home.html',
      controller: 'HomeController',
      resolve: {
        // 等待初始化完成后再加载该路由
        waitForInit: ['$rootScope', '$q', function($rootScope, $q) {
          return $rootScope.initPromise || $q.when(true);
        }]
      }
    })
    .when('/dashboard', {
      templateUrl: 'dashboard.html',
      controller: 'DashboardController',
      resolve: {
        waitForInit: ['$rootScope', '$q', function($rootScope, $q) {
          return $rootScope.initPromise || $q.when(true);
        }]
      }
    })
    .otherwise({ redirectTo: '/' });
}]);

这种方式的特点是：AngularJS会先启动，但路由的加载会被阻塞直到初始化完成。如果用户直接访问某个路由，页面会在初始化完成后才显示对应的内容，适合不需要完全阻塞应用启动，只需要确保路由组件加载前完成初始化的场景。

需要注意的是，如果初始化失败，你需要在run块或者路由的错误处理中捕获并处理，避免用户一直处于等待状态。

内容的提问来源于stack exchange，提问作者Itay Golan