个人中心
gpt4 book ai didi

javascript - 在 AngularJS ui-router 中，状态已更改，url 已更改但模板 url 未更改

转载 作者：行者123 更新时间：2023-11-30 00:10:34 25 4
gpt4 key购买 nike

我试着关注this tutorial但是使用 Node.JS

问题是当我点击登录按钮时，它是从服务器端授权的，url 更改为 http://localhost:3000/#/venue但 View 仍然相同，当我在控制台中检查状态时，它也已经更改为 field 状态。

这是我的 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-view 添加到 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-does-the-template-get-inserted

关于javascript - 在 AngularJS ui-router 中，状态已更改，url 已更改但模板 url 未更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36674600/

25 4 0
文章推荐： javascript - 在 Twitch.tv 上监听 URL 变化
文章推荐： C# 数据网格刷新
文章推荐： android - 为什么在调用第一个 fragment 时会自动调用第二个 fragment ？
文章推荐： mysql - 查询为空 SQL=
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com