Angularjs + Spring MVC: Remove # from url

AngularJs is mainly used for developing Single Page Applications (SPA). So different views are loaded to single html on different user actions. The typical URL of AngularJs application is as following.

Default URL : http://localhost:8080/SampleApp/

User Info : http://localhost:8080/SampleApp/#/User

What if you need to remove hash from url and make it SEO friendly.

You need to change both client side and server side configurations for this.

Client side.

Add following to app.js where you have defined the routing.

[sourcecode language=”js”]

$locationProvider.html5Mode(true);

[/sourcecode]

Now set base folder in your index.html

[sourcecode language=”html”] <base href=”/SampleApp/index.html”></base> [/sourcecode]

Now add the Server side configuration. Its just adding URL mapping and changing the routing.

[sourcecode language=”java”] @RequestMapping(value = { “/User” }, method = RequestMethod.GET)
public ModelAndView redirectPage(ModelAndView modelAndView ) throws ServletException, IOException
{
RedirectView view = new RedirectView( “redirect:” + “/” );
view.setExposeModelAttributes( false );
return new ModelAndView( view );
}[/sourcecode]