Develop Reference

Angular architecture for huge page

I need create one huge page on AngularJS. And I'm thinking which architecture is better for this page? So, page has 3 blocks with a lot functionality, but the main is: left block has accounts, user can pick some account and this account should be shown on center block. Center block can be changed and result should be shown on the right block.
For html I created 3 views for each block and included them with ng-include. Also I want somehow divide controller for few files, because I didn't work with a lot of code in one file. And I see a few ways, how to do this.
1. Create controller for each view, and transfer data by broadcast, or save data on RootScope and use watchers.
2. Create parent controller and transfer data by him.
What do you think about this? Or maybe one big controller is the best solution for this? And what is the best way for transferring data through controllers? Thanks.

There are many approaches for your situation, I'll tell you what I think is best
First of all, you make an parent abstract state where you can do all your dirty work in it, wither it was getting data from server or otherwise, inject all the data you need to use in $scope and then go to the child state "where your big page is"
something like that :
.state('parent_state', {
url: '/home',
abstract: true,
templateUrl: 'whatever',
controller: 'yourCtrl as yourCtrl'
})
.state("parent_state.child",{
//Whatever you need here
})
when you go to your child state you will have all the data you need in $scope , so you can focus more on logic instead of wrapping data
from my opinion, a page should have only one controller, there is no point if giving a controller to every portion of your view, else you need to go with custom directives
So if you have one controller that rules them all, or one controller and multiple directives.
your call

Angular initial data load, defer directives until after initialise

I need to load some data into my angular app the first time it is loaded. The data needs to come from the server.
My app currently consists of a number of directives on a single view in an accordion. The directives are forms whose criteria needs to be met before the user can progress to the next accordion group. The first accordion group needs to use the data from the server to display to the user, there is a dependency on the data for the view.
What is the best way to inject this data in the first instance?
I could move the initial data call into the first directive but it doesn't really feel like it is 'its' job. I could create another directive to handle this load but then I would need manage the load order of the directives. I have had a look at ng-init which works well until the server call is made, during this call the directives run before it completes.
Any of the above would work for me in theory but i'm not sure that they are the best approach. What would you suggest is the best approach?
Thanks

You should use a resolve in your state, so, both views and controllers are called when the resolution is done.
have a look at this link: http://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx

You can decorate your directives with ng-if attribute and, as value, pass a scope property that will indicate data load ex.

Angular ui-router, save state by url/url variables?

Have an interesting problem I'm trying to see if I can solve with angulars ui router plugin. What I am trying to do is save a view state by means of a customized url.
I have set up a very basic example to see if this is possible then I would like to abstract upon this if it works!
So I very simply have a
$scope.test = false;
and then on the page there is an ng-click that toggles this test variable between true and false. So what I am trying to see if I can save that state and pass it in - so say if i change it to true, I would like to be able to save a URL and then go to that, when i come to that, this variable would then be changed to true (instead of it's default false in the controller)
So I was thinking I could try something like
url: "test/{form_id}"
(I'm assuming this is how this works), however I might want to pass more than just an id. BEST case scenario is I could pass an object entirely via url (or rather reference to one, I know passing an object sounds silly), but otherwise I'm assuming on either end I would have to set up a way to make the string for the id and a way to interpret it. If i could fashion it to be polymorphic that would be fantastic, however my first steps are trying to be able to do it on a low level.
So my thinking is - every time you click to change it sets a variable which can then be set on the url. If the url is given to someone who is logged into this app and goes to that view, the controller would know from the url that it needed to change the $scope.test = true on load. I'm wondering if it's possible to conquer this with angular-ui-router, and if so if someone would be willing to provide some guidance I would be most appreciative. Thank you for reading!

You can't really pass a reference since you are talking about 2 different instances of the app. But you could JSON encode your object, urlencode that and pass it on the URL. If that is too big it will not work in all browsers though. It would also be "better" in many cases to have a more semantic URL i.e. instead of passing a big old blob, use meaningful parameters and pass those.
The documentation for $routeParams is at https://docs.angularjs.org/api/ngRoute/service/$routeParams

Best way to get current site's address in the view

I've built this application and I have this line in my view:
<a ng-href="https://www.mysite.ca/_layouts/people.aspx?MembershipGroupId={{group.id}}" target="_blank">{{group.name}}</td></a>
I'm trying to find the most efficient way to make the "https://www.mysite.ca" dynamic so I can easily move my application to different domains and not have to worry about remembering to update the domain everytime since I have these sort of links in a few places
From what I can see there's about 3-4 options:
Use a .value("configs",{Root_Url: location.origin})
$rootScope and inject it into the controller for each view
I could use a service and inject that
Or instead of a value use a constant / $provide?
Ideally, I'd like to bypass the controller altogether if that's possible at all. If not however, if not, what would be the best way to approach this?

Is there a way to tell angular $location not to discard array query parameters that come before the last one of the same name?

When redirecting in AngularJS to a route such as
myapp.com/search/?someParam=someVal&someArrayParam[]=someArrayVal&someArrayParam[]=someArrayVal2
Angular will automatically discard someArrayParam[]=someArrayVal and leave only someArrayParam[]=someArrayVal2 in the URL.
Is there a way to prevent this? I would much like to be able to send GET array values through routes for deeplinking complex interfaces. Right now the workaround I've come up with is to use $loc.url("/search/?filter="+JSON.stringify(scope.searchData)); but I'd much prefer the former.