AngularJS Dashboard-Einstellungen mit $ htttp vor der Initialisierung eines Dashboard-Controllers

Question

Also ich bin immer noch auf einem Crash-Kurs mit Angular. Ich arbeite an einem ziemlich komplizierten Dashboard-Framework, alles in eckiger Form geschrieben. Bevor ich die Controller lade, muss ich zunächst eine Reihe von Dashboard-Einstellungen vom Server mit $ HTTP abrufen. Diese Einstellungen werden dann verwendet, um das Layout der Dashboards zu steuern. Also lese ich die Art und Weise eckigen Builds ist zunächst Config-Methoden, dann Methoden, dann die Controller. Ich kann nicht $ HTTP in einer Config-Methode verwenden, so dass ich dies in meinem main.js gebaut:

MetronicApp.run(['$rootScope','$http', function($rootScope,$http) { 

    var CUID = Cookies("CUID"); 
    console.log('portlet settings for '+ CUID); 
    $http.get('/myurl/V3_portlet_settings?p_user_id='+CUID) 
     .then(function(response) { 
      console.log(response.data); 
      console.log('portlet status: ' + response.status); 
      $rootScope.$broadcast("dashSettings",response.data); 
     }); 

}]); 

Wenn ich laufe, alles dies funktioniert glücklich und ich sehe die Daten in der Konsole.

Da ist in meinem Controller:

$scope.$on("dashSettings", 
function(event,data){ 
    $scope.dData = data; 
    console.log('dash data service identified in dash controller'); 
    console.log($scope.dData.count); 
    }); 

paar Fragen:

1. Ist dies der beste Weg, die Einstellungen zu bekommen, bevor der Strich zu initialisieren. Mein Plan würde sein, die Anrufe einzubetten, die den Strich in meinem $ scope. $ Auf Block aufbauen. Ich fing an, zu schauen, wie man eine Laufmethode synchron vor der Initialisierung der Steuereinheiten ausführt, aber vielleicht muss ich nicht.

2. Irgendeine offensichtliche Idee, warum die Methode $ scope. $ On nicht zu feuern scheint?

Vielen Dank im Voraus

Answer 1

Ein anderer Ansatz wäre Ihre $http Funktionen in einem Dienst oder Werk zu setzen und diese dann in Ihrem Controller zu lösen. Der Schlüssel hier ist die Verwendung von promise. Winkel Dokumentation beschreibt dies als

Ein Dienst, den Sie asynchron ausgeführt Funktionen hilft, und nutzen ihre Rückgabewerte (oder Ausnahmen), wenn sie fertig sind die Verarbeitung

Zuerst erstellen Sie einen Dienst:

app.factory('DataService', function($http) { 
    var getValues= function() { 
    var url = '/myurl/V3_portlet_settings?p_user_id='+ CUID; 
    return $http.jsonp(url) // returns a promise 
    }; 

    return { 
    getValues: getValues 
    } 
}); 

Und dann in Ihrem Controller:

myApp.controller('MyController', function ($scope, DataService) {  
    DataService.getValues().then(// resolve the promise using .then() 
    function(data){ 
     // successcallback 
     // you can now safely populate the data in you controller 
     console.log(data); 
    }, 
    function(error){ 
     // errorcallback 
     console.log(error); 
    }) 
}); 

Ich denke, es ist ein besserer Ansatz, Datenservices zu verwenden, um Datenoperationen wie $ http Anfragen zu behandeln.
Die Rückgabe von Versprechen ermöglicht die Verkettung von (Mehrfach-) Versprechen und eine bessere Handhabung von Async-Anrufen. //docs.angularjs:

Sie könnten John Papa's style guide nützlich, vor allem im Abschnitt über 'Separate Datenrufe' (Y060) und 'Return ein Versprechen von Data Calls' (Y061)