如何在AngularJS ui-router中预加载状态而不导航至该状态？

针对AngularJS + ui-router的多页面应用场景，确实可以在不触发页面导航的前提下，预加载目标状态的视图资源，以下是几种可行的实现方案：

1. 利用$state的resolve手动触发预加载 #

ui-router状态定义中的resolve原本用于预加载状态依赖，你可以在当前状态加载完成后，手动调用目标状态的resolve函数，提前将所需的资源（模板、接口数据、控制器依赖等）加载到缓存中。

示例代码：

app.controller('CurrentPageCtrl', function($state, $q, $injector, $templateCache, $http) {
  // 指定需要预加载的目标状态名
  const preloadStateNames = ['user.profile', 'settings.notifications'];

  preloadStateNames.forEach(stateName => {
    const targetState = $state.get(stateName);
    if (!targetState) return;

    // 执行目标状态的resolve依赖
    if (targetState.resolve) {
      const resolvePromises = Object.values(targetState.resolve).map(resolveFn => {
        return $q.when($injector.invoke(resolveFn));
      });
      
      // 同时预加载模板到缓存
      $q.all(resolvePromises).then(() => {
        if (targetState.templateUrl && !$templateCache.get(targetState.templateUrl)) {
          $http.get(targetState.templateUrl, { cache: $templateCache });
        }
      });
    }
  });
});

2. 直接预加载模板到$templateCache #

如果你的核心需求只是预加载视图HTML模板，可以直接通过$http请求模板并存入$templateCache，后续导航到对应状态时，ui-router会直接从缓存读取，无需重复发起网络请求。

示例代码：

app.run(function($templateCache, $http, $rootScope) {
  // 监听当前状态加载完成事件
  $rootScope.$on('$stateChangeSuccess', (event, currentState) => {
    // 指定需要预加载的模板路径
    const preloadTemplateUrls = [
      '/templates/user-profile.html',
      '/templates/notification-settings.html'
    ];

    preloadTemplateUrls.forEach(tplUrl => {
      // 避免重复加载已缓存的模板
      if (!$templateCache.get(tplUrl)) {
        $http.get(tplUrl, { cache: $templateCache });
      }
    });
  });
});

3. 封装预加载服务统一处理逻辑 #

可以将预加载逻辑封装为独立服务，方便在多个控制器或状态中复用，同时统一处理状态的resolve、模板、控制器依赖加载：

app.service('StatePreloader', function($state, $q, $injector, $templateCache, $http) {
  this.preload = function(stateNames) {
    const allPromises = [];

    stateNames.forEach(stateName => {
      const state = $state.get(stateName);
      if (!state) return;

      // 处理resolve依赖
      if (state.resolve) {
        const resolveTasks = Object.values(state.resolve).map(resolve => {
          return $q.when($injector.invoke(resolve));
        });
        allPromises.push($q.all(resolveTasks));
      }

      // 处理模板预加载
      if (state.templateUrl && !$templateCache.get(state.templateUrl)) {
        allPromises.push($http.get(state.templateUrl, { cache: $templateCache }));
      }
    });

    return $q.all(allPromises);
  };
});

// 在当前页面控制器中调用
app.controller('CurrentPageCtrl', function(StatePreloader) {
  StatePreloader.preload(['user.profile', 'settings.notifications'])
    .then(() => console.log('目标状态资源预加载完成'));
});

注意事项 #

• 预加载会增加当前页面加载后的网络请求量，需根据用户访问优先级选择预加载的目标状态，避免过度加载影响页面性能；
• 如果应用使用了懒加载方案（如ocLazyLoad），需要结合懒加载API额外处理模块文件的预加载，例如调用ocLazyLoad.load()加载对应模块；
• 预加载前建议通过$templateCache.get()检查资源是否已缓存，避免重复请求。

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