在AngularJS ui路由器中，状态已更改，url已更改，但模板url未更改

In AngularJS ui-router, state changed, url changed but template url not

本文关键字：url AngularJS ui 状态 路由器      更新时间：2023-09-26

我试图遵循本教程，但使用Node.JS

问题是当我点击登录按钮时，它是从服务器端授权的，url被更改为http://localhost:3000/#/venue但视图仍然是一样的，当我在控制台中检查状态时，它也已经变为场所状态了。

这是我的app.js代码

  var myApp = angular.module('authApp', ['ui.router', 'satellizer']);
    myApp.config(function($stateProvider, $urlRouterProvider, $authProvider) {
      console.log("Hello World from module");
      $authProvider.loginUrl = '/api/authenticate';
      $urlRouterProvider.otherwise('/auth');      
      $stateProvider
        .state('auth', {
          url: '/auth',
          templateUrl: '/index.html',
          controller:  'AuthController'
        })
        .state('venue', {
          url: '/venue',
          templateUrl: 'venue.html',
          controller: 'VenueController'
        });
    })
  myApp.controller('AuthController',function($scope, $auth, $state) {
    console.log("Hello World from auth controller");
    console.log("current state1: ",$state);
     $scope.login = function() {
      var credentials = {
        username: $scope.username,
        password: $scope.password
      }
      $auth.login(credentials).then(function(data) {
        $state.go('venue',{});
        console.log("current state2: ",$state);
      }, function(error) {   
        console.log(error);
      });
    }
  });
  myApp.controller('VenueController', function($scope, $auth, $state) {
    console.log("Hello World from venue controller");
    $scope.getVenues = function() {
      $http.get('http://localhost:3000/api/venue/1').success(function(response) {
        console.log("I got the data I requested");          
        $scope.users = response;
      }).error(function(error) {
        console.log('error');
      });
    }
  });

这是我的登录页面（index.html）

  <body ng-app="authApp" >
<div class="body"></div>
    <div class="grad"></div>
    <div class="header">
        <div>Field Booking</div>
    </div>
    <br>
    <div class="login" ng-controller="AuthController" >
            <input type="text" placeholder="username" ng-model="username"><br>
            <input type="password" placeholder="password" ng-model="password"><br>
            <button ng-click="login()" > Login </button>
    </div>

我已经在标题中包含了angular和ui路由器源代码，并尝试将ui视图添加到venue.html中，但不知何故它没有加载。

请帮忙，我是AngularJS的新手，需要尽快完成

谢谢！！！

如果没有要传递的stateParams，则不需要$state.go中的第二个参数。请使用以下内容：

$state.go('venue');

此外，问题是您没有任何ui-view指令来加载您的状态。像这样在你的html中添加一个ui-view指令，它就会在中工作

<div ui-view></div>

点击此处阅读有关ui-view的更多信息：https://github.com/angular-ui/ui-router/wiki#where-模板是否插入

相关文章：