I'm new in AngularJS framework. I'm working in Netbeans 8.2, using Glassfish Server. AngularJS version is 1.5.0
I'm trying to remove the # symbol from the URL, with no success until now.
So far I've tried:
- to remove the "#/" from the href links in the index page
- Add the code in the head section
- Add the $locationProvider.html5Mode(true) in the script.js file
Until now if I do all the 3 steps written above, everytime i try to execute my application for every html page it gives me ERROR 404 - NOT FOUND.
For the code I'm following a tutorial on youtube: https://www.youtube.com/watch?v=XsRugDQaGOo&list=PL6n9fhu94yhWKHkcL7RJmmXyxkuFB3KSl&index=27 this is the link of the video where it removes the # symbol.
The main differences are that I'm working with Netbeans and not with VisualStudio.
HTML CODE
<html>
<head>
<title>TODO supply a title</title>
<base href="/">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.min.js"></script>
<script src="framework/script.js" type="text/javascript"></script>
<link href="framework/style.css" rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body ng-app="Demo">
<table style="font-family: Arial">
<tr>
<td colspan="2" class="header">
<h1>WebSite Header </h1>
</td>
</tr>
<tr>
<td class="leftMenu">
<a href="home">Home</a>
<a href="courses">Courses</a>
<a href="students">Students</a>
</td>
<td class="mainContent">
<div ng-view></div>
</td>
</tr>
<tr>
<td colspan="2" class="footer"><b>Website Footer</b></td>
</tr>
</table>
</body>
</html>
THIS IS THE SCRIPT CODE
var app = angular.module("Demo",["ngRoute"]).config(function($routeProvider, $locationProvider)
{
$routeProvider.when
("/home",
{
templateUrl: "templates/home.html",
controller: "homeController"
}
).when
("/courses",
{
templateUrl: "templates/courses.html",
controller: "coursesController",
caseInsensitiveMatch: true
}
).when
("/students",
{
templateUrl: "templates/students.html",
controller: "studentsController"
}
).when
("/students/:Id",
{
templateUrl: "templates/studentDetails.html",
controller: "studentDetailsController"
}
).otherwise
(
{
redirectTo: "/home"
}
);
//$locationProvider.hashPrefix('');
$locationProvider.html5Mode(true);
});
app.controller("homeController",function($scope)
{
$scope.message = "HOME PAGE!";
});
app.controller("coursesController",function($scope)
{
$scope.courses = ["C#", "VB.NET", "SQL SERVER", "ASP.NET"];
});
app.controller("studentDetailsController",function($scope,$http,$log,$routeParams)
{
$http.get("getStudent",{params: {Id: $routeParams.Id}}).then(function(response)
{
$scope.studente = response.data;
$log.info($scope.studente);
},
function(response)
{
$log.info($routeParams.Id);
$log.error(response.status);
});
});
app.controller("studentsController", function($scope,$http,$log,$route)
{
$scope.reloadData = function()
{
$route.reload();
}
$http.get("StudentsController").then(function(response)
{
$scope.students = response.data;
},
function(response)
{
$log.error(response.status);
});
});