在调用控制器之前初始化AngularJs应用 [英] Initialize AngularJs app before calling the controllers

问题描述

我有一个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.所以我需要其他想法/建议.对你的帮助表示感谢.

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

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

可以选择是否缓存结果，以免在language不变的情况下发出请求.

此外，可以处理路由定义，以将通用的本地依赖项(l10n)自动添加到所有路由./p>

应该异步初始化的全局服务问题也可以在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动态定义的，因此第二个选项(初始化应用程序)不适用，而应该使用第一个选项(路由解析器)执行.

I have an AngularJs application in which I want to load the messages and application version at the very beginning and save them in local storage, then use them in the controllers afterwards. What I have for now is a service call in each of the controllers (which are three for now):

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

I want to take the application version only once and store it there. I don't have to check the version each time, right (In case a new message was added in the new version)?

I found a suggestion to use $routeProvider but my application is not a SPA. So I need other ideas/suggestions. Your help will be greatly appreciated.

解决方案

As the question already mentions, this is usually solved with router resolvers because the initialization of route controllers can be naturally postponed this way. Since AngularJS router uses hashbang mode by default, it can be used with non-SPA (and can be recommended for complex non-SPA widgets):

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

The result can be optionally cached to avoid requests when language is unchanged.

Additionally, route definitions can be processed to add common local dependency (l10n) to all routes automatically.

The problem with global services that should be asynchronously initialized can also be solved in Angular 2 and higher with asynchronous bootstrapping and APP_INITIALIZER provider. AngularJS doesn't have this capability. As this answer explains, in order to implement this in AngularJS there should be two applications, where initializer application loads all necessary data and then bootstraps main application:

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));

Considering that in original code the language is defined dynamically with $scope.language, second option (initializer application) is not applicable, and this should be performed with first option (route resolvers).

这篇关于在调用控制器之前初始化AngularJs应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！