2016-10-01 144 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()納入一個函數解決了這個問題。