ng-okevin's Angular ch.1 - AngularJS

Welcome to my five-part introduction to AngularJS! Because I was dissatisfied with the incoherency of the official AngularJS docs. I started writing this AngularJS guide on weekends during my senior year in college. But since starting full-time at Mozilla, my motivation and energy waned. So I am publishing it on my blog for the good of The Web!

This introduction comes complete with live demos and open-sourced examples.


ng-okevin's Angular ch.2 - Scopes

Angular scopes are objects that gives us access to the model. Remember the model holds the data and state of an MVC application. Besides applying context against which expressions are evaluated, scopes allow us to:

  • access and manipulate the model.
  • set event listeners to watch for whenever the model changes.
  • enlighten Angular about asynchronous changes to the model.

ng-okevin's Angular ch.3 - Controllers

Angular controllers help us initialize the initial state and add behavior to scope objects. Recall that controllers, in the classic MVC pattern, handle the business logic. They are the glue between the controller and the view. Controllers tell the view about changes to the model and manipulate the model when asked by from the view.


ng-okevin's Angular ch.4 - Templates

Angular templates are an enhanced specification of HTML that, along with information from the model, becomes the rendered view that the user sees in the browser. Recall that the view, in the MVC pattern, generates the output representation with assistance from the model.

The templates were designed, through the use of directives, to be more declarative for specifying UI. They are the standard, static DOM sprinkled with various Angular elements that add behavior to make the view more dynamic and more closely binded with the model.


ng-okevin's Angular ch.5 - Forms

The form, input, select, and textarea elements are augmented (as directives) in Angular for added sauce. Angular forms have a built-in awareness of their state, such as whether data has been inputted or whether the forms are valid. Angular forms provide

  • two-way data binding with the model.
  • form state.

AngularJS Directive for Mobile Sliders

Value: {{ sliderVal || 9001 }}

For a five-part introduction to AngularJS, check out ng-okevin's Angular.

I ditched jQuery Mobile's sliders for my growing AngularJS poker app. It had served as the app's poker bet slider. All I wanted was a simple slider widget from jQuery Mobile, but the UI framework wanted me to marry it in return. It had its way with my HTML markup, littering my DOM elements with selfish classes and attributes, like an open garbage truck on the freeway. My CSS rules felt oppressed like liberal college students as jQuery Mobile's CSS files applied forceful rules my top-level html and body elements. The kicker? The slider quickly became deprecated, not working on newer versions of Firefox. Never even saw it work on Chrome.


For a five-part introduction to AngularJS, check out my ng-okevin's Angular.

I recently migrated my AngularJS to-do list app to AngularJS, and I wanted to unit test my Angular service that had a Local Storage schema migration. My app had a service that abstracted all interactions with Local Storage and implemented an interface to my list "model". In this service, I modified the Local Storage schema, making it backwards-incompatible, so I wrote a migration. To make sure it worked, I unit-tested the entire service.