当前位置: 首页 > 面试题库 >

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

谭梓
2023-03-14
问题内容

我有一个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)自动添加到所有路由。

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



 类似资料:
  • 问题内容: 为了确定用户的会话是否已通过身份验证,我需要在加载第一个路由之前向服务器发出$ http请求。在加载每个路由之前,身份验证服务会检查用户的状态以及该路由所需的访问级别,如果未对该用户进行身份验证,它将重定向到登录页面。但是,当首次加载该应用程序时,它并不了解用户,因此,即使他们具有经过身份验证的会话,它也将始终重定向到登录页面。因此,为了解决此问题,我正在尝试向服务器发出用户状态请求,

  • 问题内容: 我有3个执行类似任务的控制器: PastController 向API查询过去的系统中断。 CurrentController 向API查询当前系统中断 FutureController 向API查询将来的系统中断 它们每个都是唯一的(尽管它们具有相似的功能)。但是,它们都从定义相同的变量开始: 我可以使用服务或工厂在一处初始化这些变量,而不用重复代码吗? 问题答案: 我没有测试代码,

  • 在我的AngularJS应用程序中执行任何控制器之前,我有一些全局数据需要加载(即在AngularJS中全局解析依赖项)。 例如,我有一个,它带有方法,它向后端服务器发出请求,以获取关于当前通过身份验证的用户的数据。我有一个控制器需要这些数据来启动另一个请求(例如加载用户的余额)。 我怎样才能做到呢?

  • 例如:- 我想在我的应用程序初始化的时候设置这个常数,并且能够在我的组件之间共享这个常数。 什么是实现这一目标的最佳方法?

  • 问题内容: 在AngularJS应用程序中执行任何控制器之前,我需要加载一些全局数据(即,在AngularJS中全局解析依赖项)。 例如,我有一个with 方法,该方法向后端服务器发出请求,以获取有关当前经过身份验证的用户的数据。我有一个控制器,需要该数据才能启动另一个请求(例如,加载用户的余额)。 我该如何实现? 问题答案: 如果可能,请考虑使用《使用服务器端数据异步引导AngularJS应用程

  • 问题内容: 我想延迟控制器的初始化,直到从服务器收到必要的数据为止。 我找到了针对Angular1.0.1的解决方案:延迟AngularJS路由更改,直到加载模型以防止闪烁,但无法使其与Angular1.1.0一起使用 模板 ​ JavaScript http://jsfiddle.net/dTJ9N/1/ 问题答案: 由于$ http返回了promise,因此创建自己的deferred仅在htt