angular-presentation

Intermediate AngularJS

By Neil Fenton

Overview

• Directives
• Consuming an API
• Hybrid realtime example

What is AngularJS?

• Open source JavaScript MVC Framework
• Single Page Applications
• Launched in 2009
• Latest release is 1.2.9 (Jan 15, 2014)
• IE8+ Support (being dropped in 1.3!)
• Available in JS and DART

Advantages of AngularJS

• Well established community
  • Angular has over 19,000 Github stars
  • Held first conference ng-conf last week
• Created by Google
  • Creator of the popular www.google.com website

Popularity of AngularJS

Google Trend Graph

Disadvantages of AngularJS

• Made by Google
  • Destroyer of the popular Google Reader software
• Very opionionated
• Deep learning curve
• Poor documentation (improving)

Disadvantages of AngularJS

Average Learning Curve of Angular

Killer Features

• Two Way Data binding
• Dependency Injection
• Directives

Killer Features

Two Way Data Binding

• Tradtionally when the model changes, the developer is responsible for updating DOM.
• And when the DOM is changed, we need to update the model to reflect the changes.
• AngularJS handles synchronization between the DOM and model automatically.

Cool Example Link

Killer Features

Dependency Injection

• DI is used to control dependencies within AngularJS
• Used primarily in controllers
• We inject the services we require into our controllers
• Fixes issues with minification

Killer Features

Directives

• A function which executes when AngularJS discovers them in the DOM.
• Can perform pretty much anything.
• ng-repeat is an example of an AngularJS directive.
• Named with a custom prefix (app-, myapp-, etc.)
• Applied as Element, Attribute, Class or Comment

Killer Features

Directives Cont.

• The most powerful feature of Directives is extending HTML.
• Act as reusable components
• Use case example: Search box
• If you think of HTML, we have tags such as

  tr, table, br, img, a

  How would you describe what these do? That's what a directive is.

Getting Started

AngularJS Concepts

• $scope: The glue between controller and view, allows communication between the two
• $rootScope: Same as $scope but global to the application
• {{name}}: Data template, $scope is able to communicate through these ($scope.name)
• $routeProvider: Used to establish application routes
• angular.module: AngularJS Module
• $http: HTTP communication using XHR (similar to $.ajax)
• ng-whatever: Built in Angular directive

Getting Started

Notable Angular Directives

• ng-app: Declares the root element of the application
• ng-model: Allows two way data binding between view and scope
• ng-class: Dynamically load classes
• ng-repeat: Create an element for every item in the collection
• ng-show / hide: Show / hide element based on condition
• ng-view: Base directive for handling templates
• ng-if: Remove / Add dom element based on condition

Code Examples

• Directives
• Consuming an API
• Hybrid Realtime