J. West J. West - 22 days ago 9
AngularJS Question

Spring + Angular GET not registering

I'm trying to add a simple functionality to the home page that displays the currently logged in user. I'm sending a GET to the /user endpoint which returns the principle. This Angular learning curve is causing me to slowly pull all my hair out because I cannot figure out why this doesn't work when everything else is working. The only reason I can think of why it may not work is that I'm already sending a GET to /user in a different controller (for login), but I don't why that would cause it not to even show up in Chrome XHR.

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("/");
});
}
});


Let me know if there are any other controllers you need to see to be able to know why this doesn't work. The REST controller within Spring works for the login controller and is very simple so I didn't include it. The home.html is injected but not relevant here, as I am putting the name in the last "li" element in "nav", and have declared the controller in the nav section. The logout function works as well, so any ideas are much appreciated.

Answer

For anyone who stumbles across this in the future, I figured out that because my <nav> elements were outside of the ng-view, this controller was getting instantiated only once upon loading the page, which is why it wouldn't update after logging in. Putting the get() into a function solved this.