Question

我正在为已有网站的人登录和注册。不确定是否重要，但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');
          }
      }
});

login.Controller.js

'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

Answer 1

如果要使用UI路由器进行重定向，则需要将login.js功能移动到loginController文件。这是login.html中的标记附加到的控制器。

$ state.go没有重定向到页面

1 个答案: