javascript - otro - observable angular 4 ejemplo

Cómo hacer que los datos estén disponibles en todos los ámbitos en Angularjs

Question

Deseo obtener datos del lado del servidor usando $http y ponerlos a disposición de todas las rutas y controladores en mi aplicación.

Muestra del código JavaScript

myApp.factory(''menuService'', function($http){

 $http.get(''/pages'').success(function(data){

        return data; //list of pages
    });
});

myApp.run(function($rootScope, menuService){

    $rootScope.menu = menuService;
});

Muestra del código HTML

<ul >
    <li ng-repeat="page in menu">{{page.title}}</li>
</ul>

Este código realmente devuelve los datos pero no los imprime en mi página html. Por favor alguien puede ayudar? Gracias

Answer 1

Estás invirtiendo el patrón de promesa diferida.

En cambio, tu código debería ser:

myApp.factory(''menuService'', function($http){

     return $http.get(''/pages'');


});

myApp.run(function($rootScope, menuService){

     menuService.then(function(data) {
          $rootScope.menu = data;
    }) 
});

Answer 2

Puede beneficiarse al configurar su menuService un poco diferente. Prueba lo siguiente ...

myApp.factory(''menuService'', function($http) {

    function getData() {
        return $http.get(''/pages'');
    }

    return {
        ''getData'' : getData
    }
});

Ahora tenemos una función envuelta en nuestra llamada $http en una función getData() , ahora podemos aprovechar fácilmente then() para resolver la promesa devuelta por getData() en .run() , asegurando que obtengamos un valor resuelto y $rootScope.menu se asigna los valores que queremos. Esta nueva configuración en menuService ahora establece el panorama para agregar otras funciones más adelante, lo que probablemente querremos.

myApp.run(function($rootScope, menuService) {
    menuService.getData().then(function(response) {
        $rootScope.menu = response;
    })
});

Consulte los $ http docs para una mejor comprensión del comportamiento asincrónico