Question

在我的应用程序中（由yeoman生成）我有这样的结构：

观点：

带有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);
};

所有的作品几乎都必须是＆＃39;，但是......

每一次，我都会加载我的index.html（带有侧边栏，徽标等），然后我尝试获取（例如）我的文章，然后，如果我得到401，我会被重定向到{{ 1}}这并不是那么好：因为我看到所有风格的小闪烁，只有登录页面。

是真的，首先检查，如果我得到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: '/'
       });
    }]);

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

resolve属性是一个地图对象。 map对象包含键/值对：

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

AngularJS：在第一次查询返回成功之前不加载视图（不是401响应）

1 个答案: