在调用控制器之前初始化AngularJs应用

一尘不染

在调用控制器之前初始化AngularJs应用

angularjs

我有一个AngularJs应用程序，我想在其中一开始就加载消息和应用程序版本，并将它们保存在本地存储中，然后再在控制器中使用它们。我现在所拥有的是每个控制器中的服务调用（目前为三个）：

 localisationService.getMessages($scope.language).then(
            function (data) {
                $scope.messages = data;
                //initialze kendo grids with the messages etc.
                //all of the controller logic is here
 }

我只想获取一次应用程序版本并将其存储在此处。我不必每次都检查版本，对（如果新版本中添加了新消息）？

我发现使用$routeProvider的建议，但我的应用程序不是SPA。所以我需要其他想法/建议。对你的帮助表示感谢。

阅读 190

2020-07-04

共1个答案

一尘不染

正如问题已经提到的那样，这通常可以通过路由器解析器解决，因为路由控制器的初始化自然可以通过这种方式推迟。由于AngularJS路由器默认情况下使用hashbang模式，因此它可以与非SPA一起使用（并推荐用于复杂的非SPA小部件）：

resolve: { 
  l10n: (localisationService) => {
    return localisationService.getMessages(localisationService.language)
  }
}

可以选择将结果缓存起来，以避免在language未更改时发出请求。

此外，可以处理路由定义以将公共本地依赖项（l10n）自动添加到所有路由。

应该异步初始化的全局服务问题也可以在Angular
2和更高版本中通过异步引导和APP_INITIALIZER提供程序解决。AngularJS没有此功能。正如此答案所解释的，为了在AngularJS中实现此目的，应该有两个应用程序，其中初始化程序应用程序加载所有必需的数据，然后引导主应用程序：

angular.module('app', [/* ... */]);

angular.module('appInitializer', [])
.factory('loader', ($http) => {
  return $http.get('...').then((result) => result.data);
})
.factory('initializer', (loader, $document) => {
  return loader.then((data) => {
    angular.module('app').constant('l10n', data);

    $document.ready(() => {
      angular.bootstrap($document.find('body'), ['app']);
    });
  });
});

angular.injector(['ng', 'appInitializer'])
.get('initializer')
.catch((err) => console.error(err));

考虑到在原始代码中使用来动态定义语言$scope.language，第二个选项（初始化应用程序）不适用，因此应使用第一个选项（路由解析器）执行。

2020-07-04