AngularJS应用加载执行代码及跨应用跳转告警留存问题

看起来你碰到了两个关联的实际场景问题：跨顶级AngularJS应用跳转时告警丢失，以及需要在应用加载阶段执行指定代码。咱们一步步拆解解决：

一、让告警在跨应用跳转后留存 #

因为跨顶级应用的跳转触发了硬刷新，AngularJS内存中的alertService状态会被完全清空，所以核心思路是把告警信息持久化到浏览器的本地存储中。这里推荐用sessionStorage（关闭标签页自动清空，适配临时告警场景），如果需要长期留存也可以改用localStorage。

修改alertService的实现逻辑 #

更新你的服务，在触发告警时同步把信息存入存储，同时新增初始化方法，供应用启动时读取并显示未处理的告警：

angular.module('yourSharedCommonModule')
  .service('alertService', function() {
    const ALERT_STORAGE_KEY = 'pendingCrossAppAlerts';

    // 从存储读取待显示的告警
    function getPendingAlerts() {
      const storedAlerts = sessionStorage.getItem(ALERT_STORAGE_KEY);
      return storedAlerts ? JSON.parse(storedAlerts) : [];
    }

    // 将告警存入存储
    function savePendingAlerts(alerts) {
      sessionStorage.setItem(ALERT_STORAGE_KEY, JSON.stringify(alerts));
    }

    // 告警显示的核心逻辑（保留你原有DOM渲染逻辑）
    function renderAlert(type, message) {
      // 这里是你原来的弹窗渲染代码，比如往页面插入告警元素
      console.log(`[${type}告警] ${message}`);
    }

    // 对外暴露的告警触发方法
    this.danger = function(message) {
      // 先在当前应用显示告警
      renderAlert('danger', message);
      // 同步存入存储，供其他应用加载时读取
      const pendingAlerts = getPendingAlerts();
      pendingAlerts.push({ type: 'danger', message });
      savePendingAlerts(pendingAlerts);
    };

    // 应用启动时的初始化方法：加载并显示留存的告警
    this.init = function() {
      const pendingAlerts = getPendingAlerts();
      pendingAlerts.forEach(alert => renderAlert(alert.type, alert.message));
      // 显示完成后清空存储，避免重复渲染
      sessionStorage.removeItem(ALERT_STORAGE_KEY);
    };

    // 其他告警类型（success/warning等）同理扩展
  });

二、在AngularJS应用加载时执行指定代码 #

AngularJS中最适合做应用启动初始化的是run块，它会在模块依赖加载完成后立即执行，完全匹配应用加载的时机。

在每个顶级应用中添加初始化逻辑 #

把alertService.init()以及其他需要启动时执行的代码，放到每个应用的run块里：

angular.module('yourFirstApp')
  .run(function(alertService) {
    // 初始化告警服务，显示跨应用留存的告警
    alertService.init();

    // 这里可以添加当前应用加载时需要执行的其他代码
    console.log('第一个AngularJS应用加载完成！');
  });

angular.module('yourSecondApp')
  .run(function(alertService) {
    alertService.init();
    console.log('第二个AngularJS应用加载完成！');
  });

额外优化建议 #

• 如果你的多个应用共享公共模块，可以把alertService和初始化逻辑都封装到这个公共模块中，每个应用只需依赖该模块即可，避免重复代码。
• 可以给告警添加过期时间戳，避免存储中的旧告警在很久之后被误显示。
• 如果跳转是通过UI Router的$state.go但触发了硬刷新（比如跳转到其他应用的路由），当前实现已经在触发告警时同步存储，无需额外处理。

这样修改后，当你在App1调用alertService.danger("You broke it!")然后跳转到App2，App2加载时会自动读取sessionStorage里的告警并显示，完美解决留存问题，同时也实现了应用加载时执行初始化代码的需求。

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