AngularJS:在第一个查询返回成功(不是401响应)之前不要加载视图

AngularJS: do not load view until first query return success (not 401 response)

本文关键字：响应 视图 加载 不是 第一个 查询 返回 成功 AngularJS      更新时间：2023-09-26

在我的应用程序(生成与约曼)我有这样的结构:

视图:

index.html和ng-view用于渲染控制器视图

控制器:

每个控制器尝试使用API 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.

怎么做?

我在web上看到了一些解决方案，但他们都是巨大的，我需要一些真正快速和简单的)

好的，我猜你试着建立一个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: '/'
       });
    }]);

如果这些依赖项中的任何一个是承诺，它们将在控制器实例化和触发$ statechangessuccess事件之前被解析并转换为一个值。

resolve属性是一个映射对象。map对象包含以下键/值对:

key - {string}:要注入到控制器中的依赖项的名称。Factory - {string|function}:如果是字符串，那么它就是服务的别名。否则，如果函数，则注入该函数，并将返回值视为依赖项。如果结果是promise，则在实例化控制器并将其值注入控制器之前解析它。

相关文章：