AngularJS Concepts

AngularJS has a plethora of features available for developers. While these topics are all available reading in the AngularJS official docs and Developer Guide, I just want to highlight how I approach Angular and a few of the core pieces that can be used to start with.

What AngularJS does

AngularJS helps do some cool things in the client, such as:

  • Have an interactive experience within a Single-Page Application (aka SPA)
  • Send and receive data with a server or provider (such as a REST API server)
  • Manipulate, filter and alter data both inside and outside of the DOM
  • Send, receive, and display data (as well as real-time changes of the data) with the DOM using two-way data binding
  • Easily animate objects in the DOM
  • Makes use of Dependency Injection
  • Give us a somewhat uniform way to test code via separation of concerns
  • Handle things such as forms, navigation, partial page templates, handle authentication, and a hundred others...

While Angular documentation breaks the API into multiple sections (core, animate, cookies, etc.), I primarily look at an Angular app in two conceptual sections:

  • Angular in the DOM - Angular calls these Directives, where most of the data binding and DOM manipulation takes place
  • Angular out of the DOM - where everything else happens

A Note on Dependency Injection (DI)

Dependency Injection is everywhere in Angular. Examples include:

  • When defining components like a factory, directive, filter, etc.
  • When providing run and config blocks for a module
  • Controllers are defined by a constructor function, which can then be injected into any service and value component as a dependency

Be sure to read up on DI, Dependency Annotation and using Strict Dependency Injection (which turns off implicit annotation) to understand how to use annotations in Angular correctly.

Angular in the DOM

The core module for Angular is called ng. Part of ng includes ways to display, interface with and manipulate the DOM, most of which fall under Angular's term Directives (See Docs).

ng-app (ngApp directive)

The ng-app attribute tells Angular where the root element of our application is with respect to the DOM. It can either encompass the entire page by putting it in the <html> tag, or it can live in a smaller sub-section within the DOM.

ng-cloak (ngCloak)

This basically hides things, such as values inside the double-parenthesis {{ }}, in the browser window while the browser initializes the compiling of a page's template.

ng-controller (ngController directive)

The ng-controller attribute tells Angular where the root element of our controller is with respect to the DOM.

ng-bind (Angular Expressions)

See the docs for details, but basically, expressions allow us to use binded container variables (as well as literals and operators) within the DOM. These are different than JavaScript expressions in that they are only evaluated against Angular's $scope object.

  • Less verbose option is double braces {{ expression }}
  • Literals, operators and variables
  • TWO-way data binding in Angular
  • No control flow: conditionals, loops, or exceptions
  • No function declarations
  • Filters can be applied to it

ng-model (ngModel)

  • Binds the view into the model for form fields, such as input, textarea, select

ng-click (ngClick & ngTouch)

  • ngClick allows for execution of code upon a single click of something (most commonly a button)
  • ngTouch, when installed, is a module that handles tapping touchscreen devices for ng-click.

ng-submit (ngSubmit)

Prevents the default action of a form submit when the form tag doesn't contain action, data-action or x-action attributes. Should not be used in combination with ngClick (See Documentation)

Filters

Filters are available to format data that is rendered in the DOM: currency, numbers, dates, orderBy, etc.

Templates

Templates are HTML that contain Angular-specific elements and attributes.

Angular out of the DOM

In this section, I basically address things that aren't directives or filters.

Module (angular.module)

Not to be confused with Model, a Module is a collection of services, controllers, and config data (as well as directives and filters) that is used to configure the $injector.

Controllers

Think of controllers as the logic block that's associated with elements in the DOM and controls $scope (rather than $rootScope which is only accessible via services).

Angular Services

  • $scope - glue between the controller and the view
  • $watch - observes model mutations
  • $apply - propagate model changes through the system
  • $window - a reference to the browser's window. Can be overridden, removed, or mocked for testing.
  • $q - an implementation of promises/deferred objects
  • $http - facilitates communication via HTTP to remote servers
  • $resource - factory which creates a resource object that lets us interact with RESTful server-side data resources

Custom Services

Developers are free to define their own services by registering the service's name and service factory function with an Angular module.

Companion Suites

Companion Suites that enhance, replace or supplement functionality for Angular are available from various developers and groups.

AngularUI

The AngularUI companion suites have a lot of great functionality that make a project easier to develop and maintain. One specific, UI Router, is heads and shoulders above the routing solution initially developed by the core Angular team.

Restangular

Restangular replaces the Angular $resource with loads of additional functionality. Highlights include the use of promises, nested RESTful resources, support for wrapped responses and so much more.