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

Where I should keep data using AngularJS?

I've got a question about storing data in AngularJS. Should I use some kind of service, or controller to keep data? I saw different codes in Angular and one time people store data in service, other, in controller. I would say that the proper way is to keep it inside factory, but is it a good practice?
Thanks!

Well, it depends on what you mean "storing data" for you...
If you mean keeping data in some place just for passing it between controllers, then this place is a service.
If you mean keeping data so it can persist even after a page refresh or after closing the browser and reopening the same app then you can use the javascript apis for sessionStorage and localStorage (take into account that older browsers may not have these apis and you would have to polyfill them). I've used an angular service for this that have given good results: https://github.com/tymondesigns/angular-locker.
If you mean persist the data for using it among other systems different than yours, the you should rely on a database server, either yours or from a third party (take a look at Firebird).
Of course you have more options, but they don't differ from the ones you have if you use plain javascript. Each of them could be treated in an "Angular way" if you create a service to manage them (IndexedDB, WebSQL, etc.) In the end it depends on what you're trying to achive.

If you need to use the data across multiple views / controllers, for example a logged in user, then i would recommend a service which holds the data for you. This way you can access it from anywhere you inject it. However, if you need your data only in one of your controllers, i dont see a reason to create a service, just store it in the controller.

Angular - Lazy loading an entire page from CMS

I'm attempting to build an angular app that is driven by the CaaS/CMS known as Prismic.io.
Phase one of this project will be a straight forward content-silo (CMS-managed), and phase two will add on more complex web app components. Knowing this, I've decided that Angular would be my best bet, but I'm struggling to think of a good solution to have all of the content lazy-loaded from the Prismic API.
One solution I've decided to explore would be to have a standardized $scope variable, let's call it $scope.loaded. Each controller will do what it must to query my Prismic service for its respective content, and once it's completed, it would set $scope.loaded = true.
The part I'm stuck on with this approach is how exactly to display the page while all of these components are loading. The easiest way would be to include ng-if directives that reference this loaded value, but I feel like there'd be a massive flash of unstyled content. And yes I could use spinners, but the idea of having 90% of the page covered in spinners seems chintzy.
Then I got to wondering: what if I pull up a loading screen for the app until all controllers' $scope.loaded values are truthy? In that case, how would I know which controllers are currently active on the page and reference their respective scopes?
(If you have comments about why this approach is bad, I'd love to hear them as replies rather than answers. I imagine this could create too many http request, for example).

A couple of options here:
Have you looked at ngCloak to see if will help you here with the flicker problem? https://docs.angularjs.org/api/ng/directive/ngCloak.
If you're using jquery, you could have a global spinner that works on concurrent ajax requests http://api.jquery.com/category/ajax/global-ajax-event-handlers/.
Or have a look at something like this global angular spinner https://github.com/monterail/angular-global-spinner/tree/master/src.
If none of these work, you could always create an array on the root scope where each controller/directive registers itself and sets its loading flag. Then add a watch to that variable to see when all components in that array are finished loading.

Backbone: the best way to communicate entities

What's the best way to connect different entities in Backbone App for my example:
I have some items on page (ex. shop items) and I need to make some actions with them. So I have a Balance.Model to keep a limit for some actions (ex. I can mark only N items with some flags, maybe colors). Of cause I have Items.Collection and View.Actions (to render menu links). Also I have SelectedItems.Collection to keep Item.Models, checked by checkboxes to actions.
So process some actions I'm need to do:
Action.onClick → Balance.checkLimits → SelectedItems.each(Item) → Item.processAction
I need to communicate Actions, Balance and SelectedItems collection to process action with checked items.
Whats the best way to do this? Triggers/listenTo? Keep some models inside another models?

What you are describing sounds like the responsibility for a controller that mitigates between views and models. AFAIK Backbone has no good standard method to do that. I would suggest taking a look at Backbone Marionette http://marionettejs.com/. It does a lot on the routing / views / application structure side for you that vanilla backbone has spared out in favor of flexibility. Check out http://coding.smashingmagazine.com/2013/02/11/introduction-backbone-marionette/ for a brief introduction.

Hm... It seems that you are doing some very domain specific thing. For that I would extract the most generic thing into a concern and make that concern to work without views...
Then I would create a class which would contain the more concrete logic then mix in the previously created concern using this technique: http://coffeescriptcookbook.com/chapters/classes_and_objects/mixins
Then if something happens on the UI like onClick I would intercept that in my view class then ask my concern to handle it...
That would separate the UI specific logic from the domain specific one + create a reusable concern.

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.