2016-10-01 8 views
0

現在ログインしているユーザーを表示するホームページに簡単な機能を追加しようとしています。私は/ userエンドポイントにGETを送信して、それを返す。この角度学習曲線は私が他のすべてが働いているときにこれがなぜ機能しないのか理解できないので、私がすべての私の髪をゆっくりと引っ張る原因となっています。私がなぜそれがうまくいかないのかと思う唯一の理由は、別のコントローラ(ログイン用)で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コントローラはログインコントローラのために働きます。とても簡単なので、私はそれを含めませんでした。私は最後の "li"要素に "nav"という名前を入れており、navセクションにコントローラを宣言しているので、home.htmlは注入されていますが、ここでは関係ありません。ログアウト機能も同様に機能するので、どんなアイデアも高く評価されます。

答えて

0

私は、<nav>の要素がng-viewの外部にあるため、このコントローラはページのロード時に一度だけインスタンス化されていたため、ログ後に更新されないことがわかったこれを解決した関数にget()を入れる。

関連する問題