无需预先加载即可使AngularJS Transition更清洁

Question

我记得读过一个指南，该指南如何确保角度在最终渲染之前的几秒钟内不会预加载{{}}和其他各种位，但是我无法对其进行深入研究。

谁能指出我正确的方向？

Answer 1

您可以使用ui-route的$ stateChangeStart事件来检查用户是否尝试进入需要身份验证的状态。 您需要在应用的运行阶段监听该事件，您可以检查以下内容。

angular.module("yourApp").run(function($rootScope, $state){
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
         if(toState === "yourStateWhichRequiresAuthentication" && authenticationFailed){
         event.preventDefault();
         $state.go("loginState");

}}）}）;

更好的是，您可以将数据添加到状态中，并使用以下数据值来定义哪些状态需要认证，并检查toState是否需要认证：

//Data Definition in your state definition
$stateProvider
  .state("main", {
    url: "main",
    template: "<div>Main State</div>",
    data: {needsAuthentication: true})

if (toState.data && toState.data.needsAuthentication) {
   if (!$rootScope.isAuthenticated()) { // user is not logged in
      event.preventDefault();
      $state.go("login");
   }
}