2016-10-01 68 views
0

我想添加一个简单的功能到显示当前登录用户的主页。我发送一个GET到/ user端点返回原理。这个Angular的学习曲线让我慢慢拉出所有的头发,因为我无法弄清楚为什么在其他所有工作都不起作用的情况下这种方式无效。我可以想到为什么它可能无法正常工作的唯一原因是我已经向另一个控制器(用于登录)发送GET /用户,但我不明白为什么这会导致它甚至不会显示在Chrome中XHR。Spring + Angular GET没有注册

的index.html:

   <!doctype html> 
       <html ng-app="wishingWell"> 
       <head> 
        <meta charset="UTF-8"> 
        <meta name="viewport" 
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
        <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
        <link rel="stylesheet" href="/css/normalize.css"> 



        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script> 
        <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> 
        <script src="/javascript/app.js"></script> 

        <title>Wishing Well</title> 
       </head> 

       <body> 
         <nav class="nav" ng-controller="home as controller"> 
          <ul class="navback"> 
           <li> 
            <a class="active" href="#/">The Well</a> 
           </li> 
           <li ng-hide="!authenticated"> 
            <a href="#/profile" >Profile</a> 
           </li> 
           <li ng-hide="authenticated"> 
            <a href="#/sign-up">Sign Up</a> 
           </li> 
           <li ng-hide="authenticated"> 
            <a href="#/login">Log In</a> 
           </li> 
           <li ng-hide="!authenticated"> 
            <a href="" ng-click="controller.logout()">Sign Out</a> 
           </li> 
           <li id="right" ng-hide="!authenticated"> 
            <p>{{controller.user.name}}</p> 
           </li> 
          </ul> 
         </nav> 

         <div ng-view></div> 

         <script src="/javascript/wishAJAX.js"></script> 
       </body> 
       </html> 

app.js:

  var wishingWell = angular.module('wishingWell', [ 'ngRoute' ]); 

      wishingWell.config(function($routeProvider, $httpProvider) { 

       $routeProvider.when('/', { 
        templateUrl : 'home.html', 
        controller : 'home', 
        controllerAs: 'controller' 
       }).when('/login', { 
        templateUrl : 'login.html', 
        controller : 'navigation', 
        controllerAs: 'controller' 
       }).when('/sign-up', { 
        templateUrl : 'sign-up.html', 
        controller : 'register', 
        controllerAs: 'controller' 
       }).otherwise('/'); 

       $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest'; 

      }); 



        wishingWell.controller('home', function($rootScope, $http, $location) { 
        var jsonResponse; 
        var jsonString; 
        var self = this; 
        self.user = {}; 

        $http.get('user').then(function(response) { 
         jsonString = JSON.stringify(response.data); 
         jsonResponse = JSON.parse(jsonString); 

         self.user.name = jsonResponse.principal[0].username; 
         console.log(self.user.name); 
        }); 


        self.logout = function() { 
         $http.post('logout',{}).finally(function() { 
          $rootScope.authenticated = false; 
          $location.path("/"); 
         }); 
        } 
       }); 

让我知道,如果有,你需要看到能够知道为什么这是行不通的任何其他控制器。 Spring中的REST控制器适用于登录控制器,非常简单,所以我没有包含它。 home.html被注入,但在这里不相关,因为我将名称放在“nav”中的最后一个“li”元素中,并在nav部分中声明了该控制器。注销功能也适用,所以任何想法都非常感谢。

回答

0

对于任何在将来遇到此问题的人,我发现因为我的<nav>元素不在ng-view之外,所以此控制器在加载页面时仅实例化一次,这就是为什么在登录后它不会更新将get()纳入一个函数解决了这个问题。