DayPath Journal

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:

See the Pen Angular: Multiple Templates w/ ngRoute, ngAnimate and a Directive by Bryan Wilhite (@rasx) on CodePen.

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.