javascript - Animate whole App with AngularJS, not talking about specific element -

i'm new angularjs, trying find best way (the angular way) of animating app, i've been reading th nganimate (i understant basic of how works) not i'm looking for, base case:

i have homepage (imagine google landing page brand logo + google image + input search , button, white background). when click search , results div of search moves upper righ, @ same time background fades revealing map covers whole page , shows markers according results. results shown in card container (material design card ui like), card appears if click on each result (from result card or marker). if change search term previous cards dissapear. additional actions make side columns revealed , change disposition of layout too.

my whole mess if define single controller each part of app, events in parts changes disposition of other parts of views related app, dont know how organize cases , animations related. hope made myself clear problem. sad part tutorials , guides i've found specific , limited animations of 1 controller of basic actions, show-hide ,add in repeaters, etc.

thanks lot.

maybe create dedicated service handle app animations state-machine flags??.

it sounds need main controller orchestrates communication between elements of app, in angular custom directives. custom directives can have own controllers execute animations on themselves.

directive controllers can incorporate other services/factories, may abstract repeated animation code.

directives: https://docs.angularjs.org/guide/directive

services: https://docs.angularjs.org/guide/services

hope helps!