Angular Generators
  • · AngularUI []
    • Native directives without any dependency on jQquery or Bootstrap's JavaScript. Each directive has its own AngularJS module, so you can grab just the code for the directives you need.
    • · ui-router []
      A solution to nested views and routing featuring Robust State Management, Named Views, Multiple Parallel Views, Nested Views and Routing
    • · ng-grid
      Angular Data Grid (requires jQuery)
  • · Batarang - Chrome plugin []
    Extends the Developer Tools, adding tools for debugging and profiling AngularJS applications.
  • · Synth []
    Back-end web framework designed to make (Angular|Ember|Backbone)JS web apps easy to create and manage.
Sample Code
AngularJS Summary

Key Features

  • Declarative Programming: Used to build an application's User Interface (while imperative programming is used for business logic). Three forms of declarative programming are supported via directives ([E]lement, [A]ttribute and CSS [C]lass).
  • Two-Way Data Binding: Updates the view when the model changes and the model when the view changes, which eliminates the need to write code to manipulate the DOM for these cases.
  • Dependency Injection: Allows you to wire your application together declaratively, which reduces dependencies between components and enhances testability (via Mock objects). See Understanding Dependency Injection




A module is a set of services, directives, controllers and filters plus some configuration information. Most applications have a main method, which bootstraps the application. In contrast, Angular uses modules to declaratively specify how the application should be bootstrapped.

Modules can be used to break an application up into functional sections. For example, services, directives, controllers and filters that are specific to a particular application can be added to the application module. Reusable directives can be added to a common directives module. Likewise, reusable services and domain models can be added to a common services module.

The angular.module is a global place for creating and registering Angular modules. All modules (angular core or 3rd-party) that need to be available to an application must be registered using this mechanism.
  1. // Create a new module  
  2. var myModule = angular.module('myModule', []);  

Key Modules

  • ng: The main module (core functionality).
  • ngMock: Adds unit-test configuration and mocks to the $injector.
  • AUTO: Implicit module automatically added to each $injector.
  • ngSanitize: Purges unwanted HTML tags from source strings.
  • ngMobile: Mobile helpers, including support for touch events (based on jQuery Mobile touch event handling).

The ng Module

The ng module contains Angular's core directives, filters, services and types:
  • Directives (e.g., ngApp, ngBind, ngController, ngModel)
  • Filters (e.g., currency, date, json)
  • Services (e.g., $compile, $controller, $log, $route)
  • Types (e.g., Module, Scope)
  • Global APIs (e.g., angular.bind, angular.element)
The scope object represents the ViewModel and serves as the glue between the controller and the view. Scope objects are arranged in hierarchies (with a single root scope) and are attached to the DOM, via the $scope property. The root scope is attached to the element with the ng-app directive.
A controller is a JavaScript function/class that manages a particular scope (ViewModel). It sets up the scope's initial state and extends it by adding new behaviors. A controller does not reference the DOM. In general, a controller shouldn't try to do too much. A good way to keep it simple is to offload much of the business logic into services.
A service is a singleton that performs a specific task related to a web application. It can be geared towards a particular business function where special business logic would be required or it could be a general-purpose function that could be shared across multiple web applications (e.g., an ajax service).

Key Services:
  • $controller.
  • $route: Enables you to define routes via the $routeProvider API and is typically used in conjunction with the ngView directive and the $routeParams service.
  • $location: Has two configuration modes which control the format of the URL in the browser's address bar: Hashbang mode (the default) and the HTML5 mode which is based on using the HTML5 History API.
A directive enables you to extend HTML and turn it into a Domain Specific Language (DSL), which is similar to Web Components in HTML5. It's the preferred place to perform DOM manipulation. Directives can be placed in element names, attributes or class names, as shown below:
  1. <my-example-directive></my-example-directive>  
  3. <div my-example-directive></div>  
  5. <div class="my-example-directive"></div>  
Key Directives:
  • ng-app: Auto bootstraps and designates the root of the application. It's typically placed at the root of the page.
  • ng-include: Fetches, compiles and includes an external HTML fragment.
  • ng-init: Specifies initialization tasks to be executed before the template enters execution mode during bootstrap.
  • ng-repeat: Instantiates a template, once per item, from a collection. Each template instance gets its own scope.
  • ng-view: Complements the $route service by including the rendered template of the current route into the main layout. Every time the current route changes, the included view changes with it.
  • ng-bind: One-way data binding. Replaces the text content of an HTML element with the value of a given expression, plus updates the text content when the value of that expression changes.
  • ng-model: Two-way data binding. Same as ng-bind, but also updates the model when the view changes.
Hello World!' Examples
Inspired by: Presentation on Angular from May 2012 (slides), but tightened up the JavaScript example.

Hello World via HTML

  1. <p>Hello World!</p>  

Hello World via JavaScript

  1. <script>document.write("Hello World!")</script>  

Hello World via Angular

  1. <html ng-app>  
  2.   <head>  
  3.     <script src=""></script>  
  4.     <script>  
  5.       function HelloController($scope) {  
  6.         $scope.greeting = 'Hello World!';  
  7.       }  
  8.     </script>  
  9.   </head>  
  10.   <body>  
  11.     <p ng-controller="HelloController">{{greeting}}</p>  
  12.   </body>  
  13. </html>