AngularJsアプリケーション全体で使用されているデータを読み込む方法は？

私のアプリケーションには、他のコントローラが仕事をするために使用するデータがあります。AngularJsアプリケーション全体で使用されているデータを読み込む方法は？

たとえば、サーバーへのREST呼び出しを行うには、ユーザーと他のエンティティが必要です。私はindexedDbでREST-コールから受信したすべてのng-views (see index.html). 機能loadUser() and loadRequiredEntity()ストア値のコントローラによって使用される基本的なデータをロードするのAppController (app.js)を持っている瞬間

。

表示されているng-viewのすべてのコントローラ(see ng-view in index.html)は、ロードされたデータをindexedDbから読み取ります。それらにアクセスしようとするすべてのデータのNG-ビューのコントローラの前に

んのAppController負荷：

私はこのアプローチにはいくつかの市長の問題があると思いますか？
loadUser() and loadRequiredEntity() rest-callsを実行して約束を返すコールサービス（たとえばuserService）は、データ全体がロードされる前に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); 
      } 
      ... 
     } 
}

出典

2016-07-13 Max

正しい選択がありますが、主に意見に基づいています。 –

Melouは、UI-ルータが問題を解決述べたように。

基本データは抽象的な状態でロードされます。

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

出典

2016-07-22 07:56:26 Max

：あなたは、サービス、例えばUserServiceにデータを保存する必要があります。 $httpサービスからの呼び出しのみが必要です。これは、ベースの意見ですが、多くが共有する、コントローラをロードする前に、例えばthis really popular style guide

データのロードを参照してください。ルータの設定では、あなたが（角デフォルトルータとUI-ルータで利用可能）resolveオプションを定義することができます。このresolveオプションを使用すると、アプリのページにアクセスする前にデータを読み込むことができます。各コントローラには、ui routerや決意でdefault router

にcall userService.load()
を参照してください、あなたは、例えば、データにアクセスすることができますuserService.getUsers()

出典

2016-07-13 09:19:31 Melou

ご返信ありがとうございます。データへのアクセス：あなたが提案したように私はすでにそれをしています。コントローラをロードする前にデータをロードする：ルータに解決オプションを実装しようとします。私はAppControllerがロードされていない場合、他のコントローラはAppControllerの前にロードされないだろうと思います。それはうまくいくかもしれません。私はそれを試してみます... – Max

ルータによってロードされたすべてのコンポーネントについては、データをロードするために解決を使用するように動作します。しかし、トップナビゲーションバーのようなコンポーネントの場合は機能しません。助言がありますか？たぶん実行ブロックでロード機能を実行しますか？ – Max

ui-routerを使用すると、親/子ルートを宣言できます。あなたの「メイン」ルートはデータを読み込み、あなたのツールバーを含んでいます。他のすべてのルートは親ルートとしてmainを持つことができます。たとえば、 "main.subroute1"、 "main.subroute2" ... runblockは別の候補です。 – Melou

AngularJsアプリケーション全体で使用されているデータを読み込む方法は？

答えて

関連する問題