Search Tutorials


Removing the # from the AngularJS URL | JavaInUse

Removing the # from the AngularJS URL

Video

This tutorial is explained in the below Youtube Video.

Overview

In previous chapter we created an AngularJS Application with Partials Views and ngRoute. When we select any link we get the url with the # in AngularJS-
http://localhost:8080/angular-hashbang/#/about
This is known as the Hash Mode and is the default behaviour of AngularJS applications.
However these have the following disadvantages-
  • The URL is not descriptive, users find it difficult if they have to type the URL themselves.
  • The Hash mode has many issues in Search Engine Optimization(SEO). Google search engine does not crawl and index the pages in hashmode(There is work around for this by using hashbang , but even that requires server side configurations.)
Alternative way is we can run the AngularJS application in HTML5 mode. In this mode the URL of the AngularJS will be like regular URLs without the Hash. This URL is also called pretty 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

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

 

See Also

Creating a Simple AngularJS Application with ngRoute and Partials Use Google reCaptcha with AngularJS Use AngularJS NgCloak directives Example PrimeNG-UI Components for AngularJS 2 Basic Example