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