Angular.js Tutorial Notes :: phone-cat – Composite Thrashing Code

Getting started just add:

[sourcecode language=”html”]
<script type="text/javascript" src="blaghblagh/lib/angular/angular.js"></script>
[/sourcecode]

Then ng-app that sucker like this:
[sourcecode language=”html”]
<html ng-app>
[/sourcecode]

The ng-app attribute represents an Angular directive named ngApp.

Angular uses name-with-dashes for its custom attributes and camelCase for the corresponding directives that implements them). This is used for the html element so Angular knows this to be the root element of the application. This gives the ability to make the whole web page an Angular app or just a certain part of the page.

For more on the ngApp (docs link) directive in module ng. For more information on directives (docs link).

Short summary of directives is they attach to a DOM element (attribute, element name or CSS class) and tell Angular’s HTML compiler to treat it as such. Some of the key built in directives include ngBind, ngModel and ngView. Directives can be created just like controllers and services.

DI – Yup, dependency injection part gazillion. A popular pattern indeed. For more check out the docs, a collection of information I gathered 6 years ago on DI and there’s a ton more out there.

Bootstrapping

Yo, don’t mistake bootstrapping via Angular for bootstrapping with bootstrap.

The ngApp is used to do most bootstrapping, but sometimes manual bootstrapping needs to be done. Doing manual bootstrapping has several options including things like deferred bootstrapping. Bootstrapping is used in context of DI in this sense, so read up on DI to get a better idea of what exactly bootstrapping is doing.

Steps of the bootstrap:

The injector that will be used for dependency injection is created.
The injector will then create the root scope that will be the context for the model of the application.
Angular will then build the DOM starting at the ngApp root element and process directives and bindings as reached.

Once things are bootstrapped Angular will wait for incoming browser events and look for anything that might change the model. Once such an event occurs it detects if it caused a change and upon finding a change will incur them through update of the bindings.

Model-view-controller

This is in the same realm of DI for me, so I’m gonna skip notes on this. Been there, done that so many times. For more information about MVC however, check out this: Model View Controller ie MVC and the Angular.js Cookbook Tic-tac-toe Example and Step 2 of the Intro to Angular.

Bootstrapping

Model-view-controller

One thought on “Angular.js Tutorial Notes :: phone-cat”