In this article, we discuss Removing # from URL in AngularJS

Removing # from URL in AngularJS

Removing # from URL in AngularJS
Removing # from URL in AngularJS

Removing # from URL in AngularJS

When you are developing ‘Single Page AngularJS application’ and you use ‘ngRoute’ for routing # gets added to the URL. This doesn’t look pretty.

By default, AngularJS routes URLs with a hashtag.

For example.

Http://example.com

http://example.com/#/about

It’s super easy to remove those # from the URL and make them pretty.

You just need to do three things in order to achieve this.

  1. Configure $locationProvider
  2. Set base for relative links
  3. Replace href=”#” with href=”/”

$location

The $location service parses the URL in the browser address bar (based on the window.location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into $location service and changes to $location are reflected into the browser address bar.

$locationProvider

$locationProvider is used to configure how the application deep linking paths are stored.

Coming to our topic

  1. We will use $locationProvider and set html5Mode to true. You can do this while configuring your angular application.

Removing # from URL in AngularJS
Removing # from URL in AngularJS

2. Setting Relative links

$location in HTML5 mode requires a <base> tag to be present!

If you configure $location to use html5Mode , you need to specify the base URL for the application with a <base href=””>.

Removing # from URL in AngularJS
Removing # from URL in AngularJS

Or you can configure $locationProvider to not require a base URL by passing a definition object with ‘requireBase:false’ to $locationProvider.html5Mode():

Removing # from URL in AngularJS

3. Now you can route by using href=”/” instead of href=”#”.

If the root of your application is different than the URL.

For example /login, then use that as your base.

This is the simplest way to get pretty URLs and remove the # in your Angular application. Try it out !!!

Source: Various

Also Checkout Date filtering and formatting in Angular js

$locationProvider, base href in your Layout page, PathLocationStrategy, Single Page AngularJS application, ngRoute configuration, ngRoute, angular js routing, angular js URL, Removing # from URL in AngularJS, Remove hash from AngularJs Routing Url,

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

How to Protect yourself from CovidVaccination saves lives at every stage of life
  • Clean your home regularly, particularly frequently touched surfaces like
  • Stay home stay safe. Follow the Golden Rule. Wash your hands frequently with soap and water or use alchohol based hand-rub.
  • Stay home stay safe. Stay physically fit. Exercise regulary. Eat a nutritious diet. Don’t smoke.
  • Stay home stay safe. If you show symptoms of COVID-19, self isolate yourself, wear a mask around others and seek medical advice