My Angular JS 1.x single-page layout

I’ve invested the time. I’m walking away with a Code Pen that represents my strategy for handling layout for the single-page Web apps I’ll be building for at least the next three years (or when I move the Songhay System out of the ECMAScript-5 timeframe).

As usual, my layout is simple:

<body data-ng-app="rxApp">
    <div data-ng-controller="clientController">
        <rx-header></rx-header>
        <div data-ng-view=""></div>
        <rx-footer></rx-footer>
    </div>
</body>

So it’s quite clear that rx-header and rx-footer are the Angular directives I’ll be building and certainly reusing. The big breakthrough with this simplicity is my use of a container-level controller, clientController, that observes (and automatically becomes the $parent of) any controllers loaded under ng-view.

I’ve run some experiments with this strategy and saved them:

Related Links

“AngularJS: Communication Between Controllers”	Event-aggregation with `$broadcast` in an Angular Service.
“Animating AngularJS Apps: ngView”	I could not get the animations to work well. Not the UX I’m looking for…
“UI-Router: Why many developers don’t use AngularJS’s built-in router”	My solution is simpler, Angular-native and I do not expect to outgrow it.
“AngularJS: Views vs. Directives”	Is not `ng-view` a Directive?
“Mastering the Scope of the Directives in AngularJS”	The few written works on Angular JS that help me understand the deep innards of this beast.
“Angular.js directives—Difference between controller and link”	Another one of those aha! articles.

https://github.com/BryanWilhite/