在调用控制器之前初始化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.所以我需要其他想法/建议.对你的帮助表示感谢.

正如问题已经提到的那样,这通常是通过路由器解析器解决的,因为路由控制器的初始化可以自然地以这种方式推迟.由于AngularJS路由器使用 hashbang mode by default,因此可以与非SPA一起使用(可以推荐用于复杂的非SPA小部件):
resolve: { 
  l10n: (localisationService) => {
    return localisationService.getMessages(localisationService.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动态定义的,第二个选项(初始化程序应用程序)不适用,这应该使用第一个选项(路由解析器)执行.

猜你在找的Angularjs相关文章