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

时间:2017-11-20 12:14:52

标签: 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。所以我需要其他想法/建议。对你的帮助表示感谢。

1 个答案:

答案 0 :(得分:2)

正如问题所提到的,这通常是通过路由器解析器来解决的,因为路由控制器的初始化可以通过这种方式自然推迟。由于AngularJS路由器使用hashbang mode by default,因此它可以与非SPA一起使用(并且可以推荐用于复杂的非SPA小部件):

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

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

此外,route definitions can be processed会自动为所有路由添加公共本地依赖项(l10n)。

应该异步初始化的全局服务的问题也可以通过异步引导和APP_INITIALIZER提供程序在Angular 2及更高版本中解决。 AngularJS没有这种能力。正如this answer所解释的那样,为了在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动态定义的,第二个选项(初始化程序应用程序)不适用,这应该使用第一个选项(路由解析器)执行。