AngularJS - Запуск функции один раз при загрузке

0

Я пытаюсь запустить функцию $ 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.

  • 0
    Какие данные загружает этот запрос?
  • 0
    Это загружает идентификационный номер, который используется для всех последующих запросов. Идентификатор сохраняется в сервисе.
Показать ещё 1 комментарий
Теги:

2 ответа

2
Лучший ответ

Проблема

Угловой не динамический, вы не можете динамически добавлять контроллер ни на заводе, ни на другое. Также вы не можете отложить загрузку контроллера, угловые нагрузки все вместе, и это довольно невыгодно (будет зафиксировано в 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>

Демо-версия Plunker

0

Это можно сделать при настройке маршрутов

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

  • 0
    как этот вопрос мог решить для всего государства ..?
  • 0
    Это должно быть самым верхним состоянием
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню