CODEWITHSUNDEEP
javascripthtmlangularjstwitter-bootstrap
Janshair Khan
Janshair Khan

Reputation: 2687

Angular Component Router Remove # from the URL

I'm using Angular 1.5 for routing with Angular New Router. I'm confronting a problem with removing # from the URL in order make them SEO friendly. There are 2 views namely first.html and second.html in the components folder and are the part of angular router then there is a 3rd view Navigation.html, which is not the part of Angular Routing instead it is a seperate HTML. The links to these views are given at the header of the page. First 2 are Angular Views and 3rd on is for Navigation.html (Not Part of Angular Routing). I've successfully removed the # tag from the URL by using $locationProvider.html5Mode(true). But After doing this, it can't navigate to Navigation.html instead it redirects it to the First.html. It is a very simple code which uses Bootstrap, Grunt and Angular. I've pushed it GitHub. Anyone can see that by cloning. I'll be very thankful to you. Also suggest me if there is any better way.

https://github.com/kjanshair/Angular-New-Router-Example

All I want is to remove the # from the URL and be able to Navigate to Navigation.html.

Upvotes: 0

Views: 755

Answers (1)

Sagi Levi
Sagi Levi

Reputation: 305

All you need to do is to add $locationProvider to your config function and inside it call: $locationProvider.html5Mode(true);

angular.module('myapp',[]).
    config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
        $routeProvider.when().otherwise() # define routing
        $locationProvider.html5Mode(true);
    }]);

Upvotes: 1

Related Questions