Introduction to AngularJS

13/05/12 Jumping Bean

AngularJS – Teaching HTML New TricksBy Mark Clarke

13/05/12 Jumping Bean

About Me➔ Open source solutions integrator,

➔ Java developer,➔ Drupal developer,➔ Love Linux,

➔ Work at Jumping Bean➔ Www.jumpingbean.co.za➔ G+ - Jumping Bean

➔ Social Networks➔ Twitter @mxc4➔ G+ [email protected]

13/05/12 Jumping Bean

Typical Web Application➔ Pre Web 2.0

➔ Template language and model merged server side and sent to client

➔ Web 2.0➔ jQuery – Dom manipulation,➔ InnerHTML manipulation➔ Model & view not separated➔ Application logic mixed with presentation logic

13/05/12 Jumping Bean

What is AngularJS?➔ A javascript MVC framework,➔ Run entirely in browser,➔ Decouple DOM manipulation from Application

logic,➔ Built with testing in mind,➔ Declarative approach for UI (HTML)➔ Imperative approach for application logic

(Javascript)

13/05/12 Jumping Bean

What is MVC?

HTML =><= Javascript

<= Object literal

13/05/12 Jumping Bean

AngularJS MVC➔ Declarative UI

➔ HTML,➔ Angular directives,

➔ DSL to create new tags➔ Expressions {{ }}

13/05/12 Jumping Bean

AngularJS MVC➔ Javascript controller,➔ Does not reference view

directly➔ Dependency injection

➔ Explained later

13/05/12 Jumping Bean

➔ $scope is a container of your model (application state),

➔ Single source of truth for application state,

➔ Dependency injected by framework into controller,

➔ $scope provide execution context for expressions

AngularJS MVC

13/05/12 Jumping Bean

View Key Concepts➔ Directives

➔ New tags, attributes or classes that define new functionality

➔ Expressions ➔ Binding syntax - {{ }} refer to model elements and

updated automatically. Framework keeps UI and model in sync

➔ Filters➔ Format data for display

13/05/12 Jumping Bean

Controller Key Concepts➔ AngularJS namespace $,➔ Dependency injection

➔ Require services are provided by the framework➔ $scope, $location, $window $hxr etc➔ Can create own services for dependency injection,

➔ Set up model,➔ Create event listener functions

13/05/12 Jumping Bean

Controller Key Concepts➔ Naming convention

➔ Use camel case in javascript code, declaring directives etc (ngRepeat)

➔ Use snake case in html (ng-repeat)

13/05/12 Jumping Bean

AngularJS - MVC

13/05/12 Jumping Bean

DemosEnough theory time for some demos

➔ Demo 1 ➔ Basic ng-App, no controller

➔ Demo 1a➔ Some more built-in directives, form validation,show.hide

➔ Demo 2➔ Controller and ng-repeat directive

➔ Demo 3➔ Filter demo

➔ Demo 4➔ Filter and orderBy

13/05/12 Jumping Bean

Demos➔ Demo 5

➔ Dependency injection hxr service $http

13/05/12 Jumping Bean

How does this magic work?➔ Life cycle of AngularJS app

➔ Startup/Bootstrapping of application➔ Runtime processing of application

13/05/12 Jumping Bean

How it Works - Startup➔ Loading page - Bootstrapping

➔ On DOMContentLoaded Event➔ Find the root of the angular application (ng-app)

➔ DOM Compilation ➔ Compile: transverse DOM to find directives &

expressions➔ Set up watches, add listeners/callbacks etc

➔ Link: Combine directives with $scope (model) and produce view

13/05/12 Jumping Bean

How it Works - Startup

13/05/12 Jumping Bean

How it works - Runtime➔ After dom compilation,normal browser

events fire and call back to AngularJS➔ AngularJS has internal event loop,➔ All callbacks wrapped in $apply call,➔ $apply calls $digest which checks for

changes in model and fires update events

13/05/12 Jumping Bean

How it works - Runtime

13/05/12 Jumping Bean

Demo➔ Demo 6

➔ How to write your own directive➔ DSL

13/05/12 Jumping Bean

Angular Application Development

➔ Standard structure recommended for application layout

➔ Angular-seed project provides base structure

➔ Single page application with ngView directive and partials

13/05/12 Jumping Bean

AngularJS is Extensable➔ Can create own

➔ Filters➔ Directives➔ Services

➔ Useful for CRUD applications➔ Can still use jQuery for DOM

manipulation

13/05/12 Jumping Bean

AngularJS Modules

➔ Modules are containers for angularjs components

➔ Used to define services, factories, directives and application configuration