Question

我在这里遇到了一些麻烦。

我有一个连接到API的AngularJS应用程序，允许用户登录，注册等。用户收到一个令牌，然后存储到$ localStorage（通过ngstorage）。

$localStorage[JWT] = data.token;

当用户使用存储的令牌访问我的应用程序时，我想向他显示一个加载页面（无论他试图查看哪个页面），直到我验证他的令牌是正确的，然后像往常一样加载视图/控制器

我已经研究了不同的方法，但我无法弄明白。任何指针都表示赞赏！

感谢。

Answer 1

您可以将默认的ngRoute模块用于此类简单情况。

首先，使用默认解析属性配置路由。我们在这里说决心应该包含一系列电影。

app.config(function($routeProvider){
  $routeProvider.when('/',{
    templateUrl:'initial.html',
    controller:'MainCtrl'
  })
  .when('/two',{
    templateUrl: 'post.html',
    controller: 'PostCtrl',
    resolve: {
      movieList: function($movies) {
        return $movies.get();
      }
    }
  })
  .otherwise({
    redirectTo:'/'
  });
});

其次，我们有兴趣了解角度系统的关键事件。因此，对于这个小示例应用，我们要禁用用于触发页面更改的按钮，并在页面更改过程开始时显示文本loading... ...

(app.js)：

app.controller('MainCtrl', function($scope, $location) {
  $scope.go = function() {
    $location.path('/two');
  };

  $scope.$on('$routeChangeStart', function(evt){
    $scope.showLoading = true;  
  });

  $scope.showLoading = false;

});

(initial.html)：

<a href="#/two" class="btn btn-default" ng-disabled="showLoading">Go</a>
<br>
<p ng-if="showLoading" style="color:red">Loading...</p>

整个代码here

有关ngRoute

的更多信息

在加载控制器之前加载数据＆amp;意见

1 个答案: