AngularJS: не загружайте вид до первого запроса успеха возврата (не 401 ответа)

Question

В моем приложении (генерируемый Yeoman) у меня есть такая структура:

вид:

index.html с ng-view для рендеринга вида контроллера

контроллер:

каждый контроллер попытаться получить некоторые данные с апи urlm как:

$scope.getArticles = function() { 
    $http.get(settings.apiBaseUri + '/app/articles/', { 
     headers: { 
     'Content-Type': 'application/json', 
     'Pragma': 'no-cache', 
     'Cache-Control': 'no-cache', 
     'If-Modified-Since': '' 
     } 
    }) 
    .success(function(response) { 
     /* do some magic here :) */ 
    }); 
}; 

$scope.getArticles(); 

и поэтому в каждом контроллере (+ много других запросов)

и теперь я немного смущен: , как ничего не вынести, пока мой первый запрос не получить 200, но не 401?

вот мой перехватчик:

var deleteAuth = function(){ 
    $location.path('/signin'); 
    delete $localStorage.authStatus; 
}; 

var responseError = function(rejection) { 
    ... 
    if (rejection.status === 401 || rejection.status === 403) { 
    authStatus = $localStorage.authStatus; 
    if (authStatus && authStatus.isAuth && authStatus.authToken && !ipCookie('authToken') && !renewTokenAttempt) { 
     deleteAuth(); 
    } 
    } 
    ... 
    return $q.reject(rejection); 
}; 

и все работает почти «как должно быть», но ...

каждый раз, я получаю мой index.html загружается (с боковой панели, логотип и т. д.), и только тогда я пытаюсь получить (например) мои статьи, а затем, если я получаю 401, я перенаправлен на auth-page, и это не так хорошо: потому что я вижу небольшое мигание со всеми стилями, и только после этого страницы входа ,

Действительно ли, чтобы проверить, если я получу 200, и только тогда визуализирую страницу с боковой панелью и т. Д., А если нет: тогда auth-page.

Как это сделать?

я видел некоторые решения в Интернете, но все они огромны, что мне нужно что-то очень быстро и просто)

Answer 1

Хорошо, я предполагаю, что вы пытаетесь построить SPA и у вас есть маршруты в вашем приложении. Вы можете использовать resolve, прежде чем что-то сделать. Посмотрите здесь http://www.johnpapa.net/route-resolve-and-controller-activate-in-angularjs/

Вы будете иметь что-то вроде этого:

'use strict'; 

var yeomanTestApp = angular.module('yeomanTestApp', []) 
    .config(['$routeProvider', function($routeProvider) { 
     $routeProvider 
     .when('/', { 
      templateUrl: 'views/main.html', 
      controller: 'MainCtrl', 
      resolve : { 
       // add your code here to see it the user has rights or not 
      } 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
    }]); 

Если какой-либо из этих зависимостей обещает, что они будут решены, и преобразуется в значение до того, как контроллер конкретизируется и $ Событие stateChangeSuccess запускается.

Свойство resolve - объект карты. Объект карты содержит пары ключ/значение:

ключ - {строка}: имя зависимости, которое должно быть введено в контроллер. factory - {string | function}: Если строка, то это псевдоним для службы. В противном случае, если функция, то она вводится, а возвращаемое значение рассматривается как зависимость. Если результат является обещанием, он разрешается до создания экземпляра контроллера и его значение вводится в контроллер.