#angularjs #spring
#angularjs #весна
Вопрос:
Я пытаюсь добавить простую функциональность на домашнюю страницу, на которой отображается текущий зарегистрированный пользователь. Я отправляю GET в конечную точку / user, которая возвращает принцип. Эта кривая обучения Angular заставляет меня медленно вытаскивать все свои волосы, потому что я не могу понять, почему это не работает, когда все остальное работает. Единственная причина, по которой я могу думать о том, почему это может не сработать, заключается в том, что я уже отправляю GET в / user на другом контроллере (для входа в систему), но я не понимаю, почему это может привести к тому, что он даже не появится в 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("/");
});
}
});
Дайте мне знать, есть ли какие-либо другие контроллеры, которые вам нужно увидеть, чтобы узнать, почему это не работает. Контроллер REST в Spring работает для контроллера входа в систему и очень прост, поэтому я его не включал. The home.html вводится, но здесь не имеет значения, так как я помещаю имя в последний элемент «li» в «nav» и объявил контроллер в разделе nav. Функция выхода из системы также работает, поэтому любые идеи приветствуются.
Ответ №1:
Для тех, кто столкнется с этим в будущем, я выяснил, что, поскольку мои <nav> элементы находились за пределами ng-view , этот контроллер создавался только один раз при загрузке страницы, поэтому он не обновлялся после входа в систему. Помещение get() в функцию решило эту проблему.