Removing the # from the AngularJS URL

Lets Begin

In order to achieve this we will have to follow the below two sections-

Set the Location Provider to HTML5 mode.
Do Server Side configurations(in our case Tomcat) for URL Rewriting.

Our Maven project will be as follows-
angular-2-2

A. Our Our First step would be to set the HTML5 mode to true. This is done by setting the $locationProvider.html5Mode(true) as follows- script.js

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

app.config(function($routeProvider,$locationProvider) {
			$routeProvider
			.when("/about", {
				templateUrl : "Templates/about.html"
			})
			$locationProvider.html5Mode(true);
		});

Next in our index.html we will set the base url. We need to specify the base URL for the application with a <base href="/angular-using-prettyUrl/"> tag in index.html as follows.

<!DOCTYPE html>
<html ng-app="blog">
<head>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="script.js"></script>
<base href="/angular-using-prettyUrl/"/>
</head>
<body>
<table style="font-family:Arial">
<tr>
	<td colspan="2" class="header">
	<h1>
		Website Header
	</h1>
	</td>
</tr>
<tr>
<td class="leftMenu">
<a href="about">About</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>

Now if we run the command-

Clean install
tomcat:run

Go to the URL http://localhost:8080/angular-using-prettyUrl and select the about link, we get the output correctly.
angular-2-1

But if we refresh the above page we get 404 page not found.
angular-2-3

This is because when we got to the URL our index.html gets called first and ng-app tag initializes the AngularJS application. But when we refresh the above link this initialization does not take place, so we get page not pund error. To achieve this we use URL rewriting. B.

For this add the Maven dependency for Tuckey as follows

<dependency>
			<groupId>org.tuckey</groupId>
			<artifactId>urlrewritefilter</artifactId>
			<version>4.0.3</version>
		</dependency>

We will write the URL rules in a config file urlrewrite.xml as follows-

<urlrewrite default-match-type="wildcard">
	<rule>
		<from>/about</from>
		<to>/index.html</to>
	</rule>
	<rule>
		<from>/contact</from>
		<to>/index.html</to>
	</rule>
</urlrewrite>

Next we configure the web.xml use the above URL rewriting rules.

<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="
        http://java.sun.com/xml/ns/javaee
        http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
	version="3.0">
	<display-name>Archetype Created Web Application</display-name>
	<filter>
		<filter-name>UrlRewriteFilter</filter-name>
		<filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class>
		<init-param>
			<param-name>confPath</param-name>
			<param-value>/WEB-INF/urlrewrite.xml</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>UrlRewriteFilter</filter-name>
		<url-pattern>/*</url-pattern>
		<dispatcher>REQUEST</dispatcher>
		<dispatcher>FORWARD</dispatcher>
	</filter-mapping>
</web-app>

Now run the above application again using the maven commands. Even if we referesh the about or home page it works properly.

Download Source Code

Download it - AngularJS Using PrettyURL

Search Tutorials

Removing the # from the AngularJS URL

Popular Posts

See Also