Angular routing and state handling problems - angularjs

Question

I have 3 nested states:
$stateProvider
.state('A', {
url: '/a',
templateProvider: function ($templateCache) {
return $templateCache.get('pages/a.html');
},
controller: 'aController'
})
.state('A.B', {
url: '/b',
templateProvider: function ($templateCache) {
return $templateCache.get('pages/b.html');
}
controller: 'bController'
})
.state('A.B.C', {
url: '/c',
templateProvider: function ($templateCache) {
return $templateCache.get('pages/c.html');
},
controller: 'cController'
})
Let's say that A is the initial state of the app. Now, when a link to state B is clicked in state A, $state.go('.B', ...) is called, state B has to get parameters from A so it can call some service with that parameters and render the data.
Likewise, when a link to state C is clicked on state B, C has to get parameters from B so it can do it's work and display data properly.
First question:
What is the best way to pass those parameters down the line? Is it wrong to nest controllers so parent scope is visible in child scope? Or should they be passed as params?
Second question (kind of dependent on the answer to the first one):
How should the html templates be structured (especially with regards to the 'ui-view' directive), so when the browser back button is clicked on state C after coming from B, the controller for template B doesnt get triggered, so that state B displays the same data as before going to state C without reloading. The same goes for clicking back on state B after coming to it from A.
Third question:
If the user has made the following transitions: A->B->C, and then navigates to some unrelated state D (by clicking the link on the main menu for example), and then in state D presses the back button, how do I prevent controller C from falling apart since it has no input params?
Fourth question (related to third):
Premise: The only 'right' way to get to state B is by clicking on state A, likewise to get to C the user has to pass A->B first.
How, then, do I handle when the user manually enters for example URL B, from some unrelated state D? Again, everything falls apart because B has no input params.
Thank you.

Answer 1

The 1st, 3rd, and 4th questions can be solved by using parameters on the url of your states. For instance, the URL of state A.B can be /b?x&y&z instead of just /b. Then to transition from A to A.B, you would use:
$state.go('A.B', {x: "val1", y: "val2", z: "val3"});
This solves the first problem because you're passing parameters from A to B. This solves the third problem because state A.B.C would not fall apart after returning from another state, since the URL history contains the parameters. And it's very apparent how this approach will solve the fourth problem of user entering the URL directly into the address bar.
Question 2 presents a problem slightly trickier to solve. But what you can do is introduce an intermediate state between A and B whose sole purpose is to prevent the re-loading of state A's controller when the back button is pressed.
.state('A', {
abstract: true,
url: '/a',
templateProvider: function ($templateCache) {
return $templateCache.get('pages/a.html');
},
controller: 'aController'
})
.state('A.int', {
url: '/a/view',
template: <div></div>,
controller: 'aIntermediateController'
})
.state('A.int.B', {
url: '/b',
templateProvider: function ($templateCache) {
return $templateCache.get('pages/b.html');
}
controller: 'bController'
})
Notice, I made state A abstract so that you can't navigate to it directly. Instead, you navigate to A.int directly. When you initially load state A.int, aController will execute once, before aIntermediateController executes. Subsequently, any state changes to A.int will only execute aIntermediateController. And that's how you can prevent aController from running multiple times.
Similarly, you can add an intermediate view between state B and C the same way.