AngularJS - загрузка данных перед загрузкой любого контроллера

Question

Я делаю одностраничное приложение (SPA). Я создал контроллер под названием InitialControler для загрузки данных с сервера по этому URL-адресу (local.app/init).

Я хочу, чтобы этот URL-адрес был открыт перед любым другим URL-адресом. Я использую UI-маршрутизатор, я сделал $state.go('init') в функции .run(), но она по-прежнему загружает запрошенную страницу до 'init' страницы

Answer 1

Один из способов сделать это, в конфигурации декларирует только «инициализацию» состояние. И в InitialController, после загрузки данных (функция разрешения вызова службы), настройте другие состояния. Но в этом подходе, когда вы обновляете страницу, URL-адрес будет изменен на local.app.init.

Чтобы остаться в этом конкретном состоянии даже после перезагрузки, решение, которое я нашел, это иметь приложение StartUp, в котором я загрузил требуемые данные, и после этого я загрузил основное приложение вручную с помощью angular.bootstrap.

Answer 2

Сначала нужно создать состояние называется приложение

$stateProvider.state('app', { 
    abstract: true, 
    templateUrl: "assets/partials/container.html", 
    controller: 'AppCtrl', 
    resolve: { 
     init: function(MyFactory) { 
      return MyFactory.resolver(); 
     } 
    } 
}); 

Теперь любое новое состояние вы создаете должно быть ребенок состоянием app государства. Это также хорошо, потому что это становится вашей корневой областью. И состояние не будет обрабатываться, если ваша фабрика не решит.

Это, как вы создаете свой завод

app.factory('MyFactory', function($http){ 
    var items = []; 
    return { 
     resolver: function(){ 
      return $http.get('my/api').success(function(data){ 
       items = data; 
      }) 
     }, 
     get() { 
      return items; 
     } 
    } 
}); 

Теперь в любом другом государстве

$stateProvider.state('app.items', { 
    url: '/items', 
    templateUrl: "assets/partials/items.html", 
    controller: function($scope, MyFactory){ 
     $scope.items = MyFactory.get(); 
    } 
}); 

Подробнее о насытить решимостью

https://github.com/angular-ui/ui-router/wiki#resolve

Answer 3

Если вы используете UI-маршрутизатор то вы можете разрешить это с помощью вложенных состояний. Например:

$stateProvider 
    .state("main", { 
     url: "/", 
     template: '<div ui-view></div>', 
     controller: 'InitController' 
    }) 
    .state("main.landing", { 
     url: "landing", 
     templateUrl: "modules/home/views/landing.html", 
     controller: 'LandingPageController' 
    }) 
    .state("main.profile", { 
     url: "profile", 
     templateUrl: "modules/home/views/profile.html", 
     controller: 'ProfileController' 
    }); 

В этом примере вы определили 3 маршрута: "/", "/ посадки", "/ профиль"

Так, InitController (связанные с "/" маршрут) вызывается всегда , даже если пользователь вводит непосредственно в/выгрузки или/профиль

Важно: не забудьте включить <div ui-view></div> для того, чтобы дочерние состояния нагрузки контроллера на этом участке