CODEWITHSUNDEEP
angularjsroutes
Lucas_Santos
Lucas_Santos

Reputation: 4740

Is AngularJS routes adding a special character?

I'm a newbie with AngularJS and I got a problem that I think that's it's can be configurable in my routeProvider.

I have this route

angular
        .module('app', ['ngRoute', 'ngStorage'])
        .config(['$routeProvider', function ($routeProvider) {
            debugger;
            $routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
            $routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
            $routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
            $routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
            $routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
            $routeProvider.when('/', { templateUrl: 'app/start.html' });
            $routeProvider.otherwise({ redirectTo: '/' });
        }
    ]);

the problem: When I just type http://localhost:53379 I'm redirected to http://localhost:53379/#/ . Where come from the /#/ ?

Upvotes: 1

Views: 1791

Answers (3)

sylwester
sylwester

Reputation: 16498

By default, AngularJS will route URLs with a hashtag.

For example:

http://domain.com/#/home
http://domain.com/#/about

You can very easy remove the hashtag from the URL by setting html5Mode to true in your config:

$locationProvider.html5Mode(true);

so in your code it will be:

angular
        .module('app', ['ngRoute', 'ngStorage'])
        .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
            debugger;
            $routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
            $routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
            $routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
            $routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
            $routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
            $routeProvider.when('/', { templateUrl: 'app/start.html' });
            $routeProvider.otherwise({ redirectTo: '/' });

            $locationProvider.html5Mode(true);
        }
    ]);

Just after that you have to make sure that your backed will redirect all requests to your home page if you are doing "Single Page App"

Upvotes: 4

Ricconnect
Ricconnect

Reputation: 1079

This /#/ is used to create a single page application. the # is used to prevent that the page is completely reloaded. Angular then catches the new URL and loads the correct controller and partials depending on your route configuration.

Since HTML5 it is possible to remove this behavior with $location.html5Mode(true).

Source: AngularJS documentation

Upvotes: 0

cbass
cbass

Reputation: 2558

Angular adds it by default. I don't know it this is the main reason, but one reason is that the routing doesn't work in older versions of IE. I had this problem in one angularjs app that didn't work in IE9 because of this reason.

Anyways, to remove the hashtag simply add $locationProvider.html5Mode(true); after your routing-declarations.

You can read more about it here: http://scotch.io/quick-tips/js/angular/pretty-urls-in-angularjs-removing-the-hashtag

Upvotes: 0

Related Questions