I am working on MVC project using Maven.
Backend: Spring Boot framework (Tomcat server), MySQL db, hibernate for db binding, dao extends CrudeRepository, NO SERVICE (no need, small app), 4 classes (model) and 4 controllers. So far, there was no problem here. But, when I started working on frontend, I have experienced one or more problems.
Frontend: In my index.html page I have included AngularJS and (Angular) UI Bootsrap via cdn, app.js and userController.js (my files, userControll is not important for my problem I suppose but I have to point out it's presence in the index.html), data-ng-app="collectionsApp" (collectionApp is app that is created via app.js) and data-ng-view (this file should load another html file named login.html in folder view).
In file app.js (/webapp/scripts/app.js) I have created collectionsApp application and function($routeProvider).
When I do "Run As Java Application" on Application.java (class in backend where main function is located wit SpringApplication.run(Application.class, args) program runs, server is started and hibernate makes connection to database with no errors or warnings.
When I open the Chrome and type localhost:8095 (I have changed port from usual 8080 to 8095 on purpose via application.properties file because on my machine 8080 was blocked and I suppose that this is not a problem) in the adress bar I can see only blank page.
This is the problem because data-ng-view should load login.html bout i does not!
My index.html file:
<!DOCTYPE html>
<html data-ng-app="collectionsApp">
<head>
<meta charset="UTF-8">
<title>Collections</title>
<link
href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div data-ng-view></div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
<script src="/scripts/app.js"></script>
<script src="/scripts/controller/indexController.js"></script>
</html>
My login.html file:
<div class="container">
<form class="form-signin" role="form">
<h1 class="form-signin-heading">Please sign in</h1>
<input type="email" class="form-control" placeholder="Email address"
required autofocus> <input type="password"
class="form-control" placeholder="Password" required>
<div class="checkbox">
<label> <input type="checkbox" value="remember-me">
Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign
in</button>
</form>
</div>
My app.js file:
var collectionsApp = angular.module('collectionsApp', [ 'ngRoute' ]);
collectionsApp.config(function($routeProvider) {
$routeProvider.when('/login', {
templateUrl : '/view/login.html',
controller : 'loginController'
}).
otherwise({
redirectTo : '/login'
});
});
My folder structure .
You have to include //cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js
to be able to inject the $routeProvider and use routing.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.min.js"></script>