Question

在我的应用程序中，有一些数据被其他控制器用来完成它们的工作。

例如，我需要用户和其他一些实体对服务器进行REST调用。

目前我有一个AppController (app.js)，它加载将由所有ng-views (see index.html).的控制器使用的基本数据函数loadUser() and loadRequiredEntity()存储从indexedDb中的REST调用接收的值。

显示(see ng-view in index.html)的任何ng-views控制器都会从indexedDb读取已加载的数据。

我认为这种方法存在一些市长问题：

在ng-view的控制器尝试访问它们之前，AppController是否加载所有数据？
loadUser() and loadRequiredEntity()调用服务（例如userService）执行rest-calls并返回promises，以便AppController在加载整个数据之前完成，对吧？因此，在存储任何值之前，ng-views的控制器开始从indexedDb读取。

如何加载其他控制器需要的基本数据？ AngularJs控制器是正确的选择吗？

的index.html：

<body ng-app="app" id="appBody" ng-controller="AppController as appCtrl">
    <md-content id="content" ng-view=""></md-content>
</body>

app.ts：

/// <reference path="../typings/tsd.d.ts" />
module app {
      export class AppController {

          static $inject = ['$log'];

          private _LOG_PREFIX : string = 'AppController: ';

          constructor(private $log: ng.ILogService) {
          this.$log.info(this._LOG_PREFIX + 'started');
          this.loadUser()
          .then(this.loadRequiredEntity)
          .then(this.markAsAuthenticated, this.handleLoadBasedataError);
          }
          ...
      }
}

Answer 1

访问数据 您应该将数据存储在服务中，例如UserService。 $http来电应仅来自服务。这是基于意见的，但许多人都有共享，例如参见this really popular style guide

在加载控制器之前加载数据：在路由器配置中，您可以定义resolve选项（在角度默认路由器和ui-router中可用）。使用此resolve选项可在访问应用页面之前加载数据。请参阅ui router或default router

决定，call userService.load()
然后，您可以在每个控制器中访问数据，例如：userService.getUsers()

Answer 2

正如Melou提到的ui-router解决了这个问题。

基本数据以抽象状态加载。

module app.core {
    "use strict";
    import LoadBasicDataService = app.core.services.LoadBasicDataService;

    function loadBasicDataForControllers(loadBasicDataService: LoadBasicDataService) : ng.IPromise<any> {
        return loadBasicDataService.load();
    }
    loadBasicDataForControllers.$inject = ['loadBasicDataService'];

    function configureCore($urlRouterProvider: angular.ui.IUrlRouterProvider, $stateProvider: angular.ui.IStateProvider){

    $urlRouterProvider.otherwise("/myComponent1");        

    $stateProvider
        .state("main",{
           templateUrl: "layout/main.html",
           abstract: true,
           resolve: {
               'loadBasicDataForController': loadBasicDataForControllers
           }
        })
        .state("main.myComponent2",{
           url: "/myComponent2",
           template: "<myComponent2></myComponent2>"
        })
        .state("main.myComponent1",{
           url: "/myComponent1",
           template: "<myComponent1></myComponent1>"
        });
    }
    configureCore.$inject = ["$urlRouterProvider", "$stateProvider"];

    angular
    .module("app.core")
    .config(configureCore);
}

如何加载整个AngularJs应用程序使用的数据？

2 个答案: