Я пытаюсь запустить функцию $ http, когда первое приложение AngularJS загружается.
Эта функция $ http должна завершиться до того, как любой из контроллеров моего приложения сможет нормально функционировать. Как мне это сделать? Это звучит как обещание, но похоже, что я буду создавать обещание в каждом контроллере...
В настоящее время у меня есть функция, которую я хочу запустить сначала следующим образом:
app.run(function() {
$http.get('link').success(function(data) {
// success function. The data that I get from this HTTP call will be saved to a service.
}).error(function(error) {
});
});
Тем не менее, иногда контроллер будет загружаться до завершения вызова http.
Угловой не динамический, вы не можете динамически добавлять контроллер ни на заводе, ни на другое. Также вы не можете отложить загрузку контроллера, угловые нагрузки все вместе, и это довольно невыгодно (будет зафиксировано в Angular 2)
Но сам javascript имеет очень важную функцию - закрытие, которое работает в любом месте и в любое время.
У угловых есть некоторые внутренние услуги, которые могут быть введены вне угловой экосистемы, даже в консоль браузера. Эти услуги вводятся, как показано ниже. Мы технически могли использовать что-нибудь еще (jQuery.ajax, window.fetch или даже с XMLHttpRequest), но пусть придерживаться полного углового решения
var $http_injected = angular.injector(["ng"]).get("$http");
Прежде всего, мы откладываем все углы приложения, загружаем HTTP-сервис. Затем вы делаете свой необходимый запрос, получаете данные, а затем закрываете работу, мы передаем полученные данные в какую-то службу, или мы также можем назначить некоторые угловые.constant или angular.value, но позвольте просто сделать демо с угловым сервисом, поэтому когда у вашей службы есть данные, загрузите все приложение, чтобы все контроллеры инициализировались необходимыми данными
В основном такие задачи решаются так
<body>
<div ng-controller="Controller1">
<b>Controller1</b>
{{text}}
{{setting.data.name}}
</div>
<hr>
<div ng-controller="Controller2">
<b>Controller2</b>
{{text}}
{{setting.data.name}}
</div>
<script>
//define preloader
var $http_injected = angular.injector(["ng"]).get("$http");
$http_injected.get('http://jsonplaceholder.typicode.com/users/1').then(function(successResponse) {
//define app
angular.module('app', []);
//define test controllers
//note, usually we see 'controller1 loaded' text before 'settings applied', because controller initialized with this data, but in this demo, we will not see 'controller1 loaded' text, as we use closure to assign data, so it instantly changed
angular.module('app').controller('Controller1', function($scope, AppSetting) {
$scope.text = 'controller1 loaded';
$scope.setting = AppSetting.setting;
$scope.$watch('setting', function(e1 ,e2){
$scope.text = 'settings applied'
});
});
angular.module('app').controller('Controller2', function($scope, AppSetting) {
$scope.text = 'controller2 loaded';
$scope.setting = AppSetting.setting;
$scope.$watch('setting', function(e1 ,e2){
$scope.text = 'settings applied'
});
});
//define test services, note we assign it here, it possible
//because of javascript awesomeness (closure)
angular.module('app').service('AppSetting', function() {
this.setting = successResponse;
});
//bootstrap app, we cannot use ng-app, as it loads app instantly
//but we bootstrap it manually when you settings come
angular.bootstrap(document.body, ['app']);
});
</script>
</body>
Это можно сделать при настройке маршрутов
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'MainCtrl',
templateUrl: 'main.html',
resolve: {
data: ['$http',
function($http)
{
return $http.get('/api/data').then(
function success(response) { return response.data.rows[0]; },
function error(reason) { return false; }
);
}
]
}
});
}]);
Аналогичный вопрос: AngularJS - routeProvider разрешает вызов метода услуги
AngularJS: $ routeProvider при разрешении $ http возвращает ответ obj вместо моего obj
Heres plunkr, который я нашел, используя сервис, который я бы рекомендовал. http://plnkr.co/edit/XKGC1h?p=info