Getting a # in URL from angularJS $stateProvider

Question

I am getting a strange # in the middle of my url for example if I try to go to localhost:8080 where I have my AngularJS app running I am redirected to http://localhost:8080/#/home. I don't understand where this # is coming from but I suspect it has something to do with the URLs I am defining in my $stateProvider.

Here is the $stateProvider code:

//STATE HANDLER
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state('newAlarm', {
            url: '/newAlarm',
            views: {
                '': {templateUrl: '/templates/newAlarmPage.html'},
                'header@newAlarm':{templateUrl: '/templates/header.html'},
                'newAlarmForm@newAlarm':{templateUrl: '/templates/newAlarmForm.html'}
            },
            controller: 'NewScheduleCtrl'
        })

        //to be changed
        .state('home', {
            url: '/home',
            views: {
                '': {templateUrl: '/templates/homePage.html'},
                'header@home':{templateUrl: '/templates/header.html'}
            },
            controller: ''
        });
    //end of to be changed
    $urlRouterProvider.otherwise('home');
}]);

Any thoughts?

Take a look at http://stackoverflow.com/questions/7729580/how-can-i-use-urls-in-a-single-page-application and then http://stackoverflow.com/questions/14771091/removing-the-hashtag-from-angularjs-urls-symbol on how to remove it — br3w5, Jan 27 '16 at 17:02

score 2 · Answer 1 · edited May 23 '17 at 11:44

2

From the Wikipedia article on single page applications:

The page does not reload at any point in the process, nor does control transfer to another page, although the location hash can be used to provide the perception and navigability of separate logical pages in the application

Use of the hash enables angular (and other SPA frameworks) to route urls without reloading the page.

Related questions:

edited May 23 '17 at 11:44

Community

1
1

answered Jan 27 '16 at 17:06

br3w5

4,403
5
33
42

So I've read that AngularJS can be used to make more than just single page apps. In the code I posted I am using one AngularJS app to define two completely separate pages/paths. Is that a good practice? – Bill Headrick Jan 27 '16 at 17:39
If they are all part of the same site/app that is fine...single page applications should be driven by user experiences needs. So if it works for your users then it's good, and i can see it working well for pages at the top level of your application that provide hard links (full page refresh) that have sub-sections that behave like single page apps. – br3w5 Jan 27 '16 at 17:43

score 0 · Answer 2 · answered Jan 27 '16 at 19:26

You can disable the hash if you want to.

app.config(['$stateProvider','$urlRouterProvider','$locationProvider',
  function($stateProvider, $urlRouterProvider,$locationProvider) {

  //ROUTING

  $locationProvider.html5Mode(true);

}]);

Then add in your index html file :

<!doctype html>
<html>
  <head>

    //...

    <base href="/">

  </head>
  //...
</html>

Getting a # in URL from angularJS $stateProvider

2 Answers2