J. West J. West - 10 months ago 70
AngularJS Question

SpringBoot + Angular ng-view Issues

I'm new to Angular and I'm kind of learning js as I go, but I'm trying to run Angular on the front end with Spring Boot. By default Spring renders my index.html page normally, but I'm getting a 404 not found error when I try to go to the /login page. I've tried just about every url combination I can think of for the template url, but no luck. Because I'm new at Angular, I cannot determine if this is a Spring config issue or something simpler.

Angular controller app.js:

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

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

$routeProvider.when('/', {
templateUrl : 'static/home.html',
controller : 'home'
}).when('/login', {
templateUrl : 'static/login.html',
controller : 'navigation'

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


wishingWell.controller('home', function($scope, $http) {
$http.get('/resource/').success(function(data) {
$scope.greeting = data;

wishingWell.controller('navigation', function() {});


<!doctype html>
<html ng-app="wishingWell">
<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"/>
<link rel="stylesheet" href="/css/main.css"/>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//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/Angular/app.js"></script>

<title>Wishing Well</title>

<body ng-controller="home">
<nav class="nav">
<ul class="navback">
<a class="active" href="/">The Well</a>
<a href="/profile" >Profile</a>
<a href="/sign-up">Sign Up</a>
<a href="/login">Log In</a>
<a href="/logout">Sign Out</a>

<div ng-view></div>


folder structure:

enter image description here

Any ideas?

Answer Source

It has nothing to do with Spring as clicking on login link is getting rendered on client side and not on server side (not an ajax call or page submit).

I can see few issues here:

-> In index.html link for angular-route is incorrect

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>

it should be

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>

you forgot https:

-> You need to use #/login in anchor tag, else your page will be redirected to .login that doesn't exists

 <a href="#/login">Log In</a>

->index.html and login.html are in same directory, so in app.js template url should be login.html and not static/login.html

You can see it working here https://plnkr.co/edit/YpAm5FVG2ME7s3EeAigY?p=preview

Note: I have moved index.html outside static folder to make it work with plunker and updated app.js path in index.html accordingly.

If it still doesnt work, press f12 (if using chrome) an post console output.