Deep Linking and State Transitions

[gwright]

I'm trying to better understand how to effectively organize my code around the state transitions model presented by ui-router. I'm also new to Angular so please feel free to point out my mistakes.

It seems as though there are two general sources of state transitions:

• explicit calls to transitionTo(), often triggered by controller functions due to UI interaction
• implicit calls via changes to the URL either via landing on a deep link or end-user edits of the URL

By default, $stateProvider configuration takes care of updating the URL and changing the view to match the new state but any other application logic has to be handled separately.

It would make sense to put all that logic in the controller but I'm having a hard time understanding how to arrange for those implicit state transitions to trigger a controller function.

onEnter and onExit would seem to be the obvious 'hooks' but I'm not sure how to provide the correct $scope to those callbacks, they aren't injectable functions.

So what is the recommended way to react to state transitions triggered by deep links and/or URL edits by the user? Should I be putting all that logic in the controller or should it be somewhere else?

[nateabele]

Controllers can use $scope's $on() method to listen for events fired by state transitions. Hopefully that answers your question. Generally, controllers are instantiated on an as-needed basis, when their corresponding scopes are created, i.e. when the user manually navigates to a state via a URL, $stateProvider will load the correct template into the view, then bind the controller to the template's scope, so any initialization upon entry into the state happens that way.

@timkindberg this breakdown is probably ripe for the dev guide.

[gwright]

Thanks @nateabele for pointing me in the right direction. The $stateChangeSuccess event was the piece I was missing in understanding how to unify state transition processing.

[akarelas]

I didn't understand: If a browser arrived at a deep link, how do we change the state to the correct one, if it's not done automatically for us?

[nateabele]

@akarelas It should be done automatically.

[akarelas]

Ok but it's not done automatically when $locationProvider.html5Mode is true. For more info see #250

[timkindberg]

html5mode assumes some server side redirects are set up.

[akarelas]

Those are perfectly set up on my example website

[timkindberg]

So they all redirect back to index.html?

[nateabele]

@akarelas Not sure what to tell you. It works fine for me. Is there a reason you have the app set up in a <script /> block in the middle of the page?

[akarelas]

I'm using Firefox on Ubuntu Linux. Let me try with Chrome. And yes, they all redirect back to index.html.

[akarelas]

@nateabele Are you saying that if you directly click on this url, you see text in the black & red frame? http://gist1.perlmodules.net:8080/a/funny

I get no text (other than the links underneath the empty black frame) on neither Firefox nor Chrome

[akarelas]

I wrote my app in a <script /> block to avoid writing a new file which might confuse you. But this shouldn't be the problem.

[nateabele]

@nateabele Are you saying that if you directly click on this url, you see text in the black & red frame?

Sorry for not being clear. I'm saying that the initial state transition based on a deep-linked URL works fine for me in my own apps. Seems to work fine for everyone else, as well.

While I don't have time to debug your setup for you, I'm sure if you went over it carefully, you'd find the issue.

[akarelas]

I went through it carefully, in fact this is a minimum site that reproduces the error, which I wrote for two purposes:

• reproduce the bug for you
• see if I did something wrong the first time around

I reproduced the bug for you, without detecting anything wrong in my program

[akarelas]

Whenever you find time is fine. The gist1 will wait for you there for a while.

In your web apps that you say you don't have this bug, do you have html5Mode turned on? @nateabele

[akarelas]

I'm pretty sure the bug's in the documentation. Because I believe I've done everything according to documentation, but still the web app's not working properly.

[nateabele]

do you have html5Mode turned on? @nateabele

Yes.

I'm pretty sure the bug's in the documentation. Because I believe I've done everything according to documentation, but still the web app's not working properly.

@timkindberg Thoughts?

[timkindberg]

I see text in the black and red frame! #worksforme So I wonder why you don't?

[akarelas]

Did you get to that page with the text, by clicking on the link I gave you here, or by clicking on the links which are in the page?

It fails on two of my browsers (Firefox, Chrome). I'll check Apple Safari & iOS Safari next

[akarelas]

Fails on iOS Safari too... Maybe you clicked on the links of the page to get to the page with text in it?

[akarelas]

Which browser are you using? Could you please try with another browser too, such as Firefox or Chrome?

[akarelas]

After a suggestion in bug #250 I added <base href="/"> in the page's <head> and that solved the problem.

Was it written somewhere in the documentation that I should add this, @nateabele ?

[laurelnaiad]

angular/angular.js#2969 is the best documentation on the subject.