Single URL app - $apply() adds "/#/" to the URL

[bbshopadmin]

Hi,

i use UI-Router for a app without any URLs/deeplinking, only pure states. It' works fine till i call $apply() to update scope vars inside a controller. Somehow $apply adds "/#/" to the URL. Views without $apply() working fine.

Currently it behaves like that:

state A = "localhost:8888"
state B = "localhost:8888/#/" <- $apply() in the controller

The sole exception i declared a URL is in my root state
url: "",

Any ideas?

Edit: above with angular 1.1.5 (hashbang mode)
if i turn on html5mode "/#/" won't be added anymore.. but i don't want html5 mode due to compatibility issues

[ksperling]

I'd say that's the core AngularJS $location service doing that. If you want to avoid that, try removing the URL from your root state as well and transition into it via $state.transitionTo('yourrootstate', {}) from a module.run() callback.

[bbshopadmin]

Thank you for your fast reply, great! :)

Just tried it and removed the url:"", unfortunately the "/#/" is still there. Is it possible to disable the $location service?

[laurelnaiad]

You might try adding <base href="/" /> to the head if you're using angular 1.1.5.

[bbshopadmin]

Thank you, but unfortunately doesn't work.

[bbshopadmin]

The problem occurs in angular 1.1.5, but not in 1.0.7.

[laurelnaiad]

1.1.5 does introduce some changes to the $location service. That's why I thought base href would help. I thought it did for me. However, I was switching between html5 and hashbang modes. It turns out that when I'm in hashbang mode, my home URL is http://localhost/#/ even with base href='/'.

This is actually ok with me, since in hashbang mode, all the other URLs have #/ in them, too, but I understand that you don't want that behavior.

I mis-linked the base href issue before. It's actually: angular/angular.js#2799 . It's not clearly related, however there are some 1.1.5 commits linked in that issue which might be in the neighborhood of the problem. You might want to test with 1.1.4 to narrow it down.

[bbshopadmin]

Same behavior with 1.1.4 in hashbang mode.

Back with 1.1.5 i turned html5Mode on and voila it's gone.

BUT what's about IE<=9 or other incompatible browsers? That's why i avoided html5 mode at the beginning.

Is there something wrong with 1.1.4/1.1.5 and their $location services?

[laurelnaiad]

html5 mode doesn't use hashbangs, so it's good that it's not there in that
mode. Angular automatically reverts to hashbang mode for browsers that
don't support html5 history. Perhaps the #/ for the root of the app is
intentional - I happen to prefer it if hashbang mode is in effect, because
it keeps things consistent.

[bbshopadmin]

yes, but i need a solution for none html5 browsers too

I try to illustrate my problem again

home view = "localhost:8888"
contact view = "localhost:8888/#/" <- $apply() in the controller

home view is the only gateway to all other views

The browsers history function now detects that URL change and shows a back button. But i don't want that back button
:)

[laurelnaiad]

I'm confused -- three questions:

1. are you getting #/ in html5 mode?

2. are you saying that the browser is actually navigating to #/ (as opposed
   to replacing the URL) when you do $apply?

3. wouldn't localhost:8888 and localhost:8888/#/ normally refer to the same
   state? Are "home view" and "contact view" different states?

[laurelnaiad]

BTW: I now think I recall seeing the issue in my #2 question above when I
was fighting against #/ in hashbang mode, too. It was late at night... in
the light of day, #/ seems like the logical place to end up when you land
on a state defined with the url "/" and you're in hashbang mode.

[bbshopadmin]

Sorry for the confusion.

1.) no
2.) i don't know.. i think $apply invokes the digest cycle (?) and perhaps the $location service now add's that "/#/" to the browser address bar
3.) yes home and contact are different states with no url's defined...
you're right when go back from localhost:8888/#/ to localhost:8888 via history back nothing happens..

[bbshopadmin]

i have absolutely no urls defined in my states and don't use routeProvider

it should always be: localhost:8888 for each state/view

[adambabik]

Do you use $urlRouterProvider? I managed to get these trailing hashbang and slash only when I set $urlRouterProvider.otherwise('/').

What's interesting, a similar issue can be observed on ui-router sample. Going to http://localhost:8000/sample/ I'm being redirected to http://localhost:8000/sample/#/. But, if I remove $urlRouterProvider.otherwise('/') and change $routeProvider.when('/', {...}) to $routeProvider.when('', {...}), the redirection is not happening any more and everything else seems to works just fine.

[bbshopadmin]

No i don't use $urlRouterProvider or do you mean $routeProvider?

When i set $routeProvider.otherwise({redirectTo: "/"}) or $routeProvider.otherwise("/") in hashbang mode i get 'localhost:8888/#/' through the entire app. But now i get errors when additional templates are loaded via ngInclude (seems to be path errors).

But the real problem for me is, that i don't want and use $routeProvider.

[adambabik]

@bbshopadmin No, it's a different thing.

Hmm, I have no other ideas. Maybe you could reproduce this behaviour using Plunker? This would help to narrow down the problem.

[bbshopadmin]

Good idea. Can you observe the apps URL changes in plunker? i only see something like http://plnkr.co/edit/123abc?p=preview.

[adambabik]

Your link doesn't work. You can always transform the edit URL to the URL with a preview without the iframe. For example, from http://plnkr.co/edit/vDURUN to http://run.plnkr.co/plunks/vDURUN/. But it doesn't matter what the tool you use, I just would like to see the code which clearly demonstrates the problem.

[bbshopadmin]

Sorry, i meant the plunker url only as example to a plunker. A plunker only makes sense if we can observe the url of the app. I don't kown whether this is possible since this issue is url related.

[timkindberg]

Hit the blue full screen button in the upper right of the preview. Then you'll see the url.

[bbshopadmin]

I don't know why my plunker doesn't work: http://plnkr.co/edit/YRx1LLa8BOPP357VyrE5?p=preview. It's ui-router quick start example based.

[bbshopadmin]

Now it runs: http://plnkr.co/edit/YRx1LLa8BOPP357VyrE5?p=preview
but i can't see the added "/#/" on Route 2 like on my local system.

But i also can't see an URL change when i do a redirect via $routeProvider.otherwise({redirectTo: '/test'}).

[bbshopadmin]

Sorry, i found an obsolete event listener which called $location.path(next_path) with next_path="" that added the "/#/". But only since angular 1.1.4. When i look at the changelog i can't see why since 1.1.4.

Sorry again!