$ state.go沒有重定向到頁面

我正在爲某個已經擁有網站的人員進行登錄和註冊。不知道它是否重要，但index.html是着陸頁，我點擊登錄轉到登錄頁面。項目的其餘部分並不是Web應用的唯一登錄和註冊（index.html沒有任何angularjs代碼，也沒有加載任何控制器或app.js）。

在登錄響應從服務器返回，但它並沒有去到test頁面，但鏈接的變化從http://express.app/dashboard/login.html#!/到http://express.app/dashboard/login.html#!/test我不知道爲什麼#!/被擺在首位添加。但是，如果我看看我的網絡控制檯，我可以看到test.html正在加載，如果我看預覽，我可以看到頁面。

我已經嘗試了許多不同的組合，如設置templateURL到dashboard/test.html，只是把它作爲/test.html，但似乎沒有任何工作。我究竟做錯了什麼？

app.js

angular.module('app',['angular-jwt','angular-storage', 'ngRoute', 'ui.router']) 
    .config(function ($stateProvider, $urlRouterProvider, jwtInterceptorProvider, $httpProvider, jwtOptionsProvider) { 
    $urlRouterProvider.otherwise('/'); 
    $stateProvider 
     .state("login", { 
      url:"/login", 
      controller: "loginController", 
      templateUrl: "dashboard/login.html" 
     }) 
     .state("signup", { 
      url:"/signup", 
      controller: "signupController", 
      templateUrl: "dashboard/register.html" 
     }) 
     .state("test", { 
      url:"/test", 
      controller: "testController", 
      templateUrl: "test.html" 
     }); 

    jwtInterceptorProvider.tokenGetter = function (store) { 
     return store.get('jwt'); 
    }; 
     jwtOptionsProvider.config({ 
      whiteListedDomains: ['express.api', 'localhost'] 
    }); 

    $httpProvider.interceptors.push('jwtInterceptor'); 
}) 
    .run(function($rootScope, $state, store, jwtHelper) { 
    $rootScope.$on('$stateChangeStart', function(e, to) { 
     if (to.data && to.data.requiresLogin) { 
      if (!store.get('jwt') || jwtHelper.isTokenExpired(store.get('jwt'))) { 
       e.preventDefault(); 
       $state.go('login'); 
      } 
     } 
});

'use strict'; 

angular.module('app') 
    .controller('loginController', function ($scope, $http, $state, store) { 
    $scope.user = {}; 
    $scope.login = function() { 
     $http({ 
      url: 'http://expressapi.com/login', 
      method: 'POST', 
      data: $scope.user 
     }).then(function(response) { 
      console.log("res", response.data.token); 
      store.set('jwt', response.data.token); 
      var test1 = store.get('jwt'); 
      console.log("get", test1); 
      $state.go("test"); 
     }, function(error) { 
      console.log(error); 
      alert(error); 
     }); 
    } 
});

test.js

'use strict'; 

angular.module('app') 
    .controller('testController', function ($scope, $http, $state, store) { 
    console.log("TEst"); 
     $scope.test = function() { 
     } 
});

的login.html

<body class="main" ng-app="app" ng-controller="loginController"> 
    <div class="form" data-ix="new-interaction-2"> 
    <label class="field-label" for="Name-2">Email</label> 
     <input class="text-field-2 w-input" data-name="name" id="Name-2" maxlength="256" name="name" placeholder="Email" required="required" type="email" ng-model="user.email"> 
    <label for="Password-2">Password:</label> 
     <input class="text-field w-input" data-name="Password" id="Password-2" maxlength="256" name="Password" placeholder="Password" required="required" type="password" ng-model="user.password"> 
    </div> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.6.4/angular-messages.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-storage/0.0.15/angular-storage.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-resource.js" type="text/javascript"></script> 
<script src="/app.js"></script> 
<script src="/node_modules/angular-jwt/dist/angular-jwt.js"></script> 
<script src="/Controllers/loginController.js"></script> 
<script src="/Controllers/testController.js"></script>

的test.html

<body ng-app="app" ng-controller="testController"> 
Worked! 

<script src="../js/express.js" type="text/javascript"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.6.4/angular-messages.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-storage/0.0.15/angular-storage.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-resource.js" type="text/javascript"></script> 

<script type="application/javascript" src="../app.js"> </script> 
<script src="../node_modules/angular-jwt/dist/angular-jwt.js"></script> 
<script src="../controllers/loginController.js"></script> 
<script src="../controllers/testController.js"></script> 
<script src="../controllers/signupController.js"></script> 
</body>

文件夾結構

/ 
controllers 
-loginController.js 
-testController.js 
app.js 
index.html 
contact.html 
info.html 
dashboard 
    -login.html 
    -test.html

來源

2017-06-04 Anonguy123

我的猜測是因爲hash bang（＃！）這個URL被髮送到UI路由器中的.otherwise案例，它是http://express.app/dashboard/login.html#!/。當UI路由器在login.html中加載時，哈希爆炸會自動添加到URL中。此時你需要加載角度/ UI路由器嗎？你可以驗證，發送到索引，然後加載角 –

我在登錄頁面上使用幾個助手庫，所以我相信angularjs需要加載，我相信使用狀態提供商，你必須加載它 – Anonguy123

而不是$ state.go （「測試」），你可以重定向到測試與香草解決方案，可能是這樣的window.location =「http://expressapi.com/test.html」 –

如果你想使用UI路由器重定向的login.js功能需要移動到的LoginController文件。這是login.html中的標記所附帶的控制器。

來源

2017-06-05 21:27:04

這是我的一個錯字我打算說登錄controller.js – Anonguy123

$ state.go沒有重定向到頁面

回答

相關問題