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.


$locationProvider.html5Mode(true);

Now set base folder in your index.html

 <base href="/SampleApp/index.html"></base> 

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

 @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 );
}

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s