an introduction to angularjs

Copyright 2013 Demandware, Inc. All other rights reserved.2/12/13 Copyright 2013 Demandware, Inc. All other rights reserved. November 7th, 2013 1

An Introduction to AngularJS

Falk Hartmann

Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013

My Main Areas of Expertise• Java• Markup Languages• Identity and Access Management• OSGi• ActionScript/MXML

Demandware• Develops and operates an enterprise-class cloud commerce platform since 2004 • 160 retail brands with more than 665 sites world-wide• Offices in Jena, Burlington (MA), Munich, Paris, London• Technologies

- Java, JEE, Spring - Oracle, MongoDB, Redis, ElasticSearch- Demandware Script (a JavaScript variant)

2

Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013 3

Agenda

• What is AngularJS?• Challenges & solutions• Terminology• Sample App I: Hello• Sample App II: Zwitschermaschine• Conclusion


What is AngularJS?

• Client-side JavaScript framework (i.e., runs in a browser)• “Superheroic JavaScript MVW Framework”• W = Whatever works for you• Model View Controller vs. Model View View-Model

• Not a breakthrough, but a smart selection of best of breed approaches

• Started by Google in 2009• Released as 1.0 in 2012


Challenges & solutions



Boilerplate code Single page applications

Browser incompatibilities

Forms

Rich user interface

Testability

Maintainability

Development speed



Boilerplate code Single page applications

Browser incompatibilities

Forms

Rich user interface

Testability

Maintainability

Dependency injection

(Abstraction) services

REST

Partials/routingTemplates

(Bidirectional) data binding

Unit tests

End to end tests

Development speedMVC

Directives


TerminologyModule

• Unit for the specification of dependencies (high-level)

Directive• (UI) Control (defined by yourself or third parties)

View• HTML page with special tags (“directives”)

Controller• (Client-side) backend to a view

Scope• View Model, shared object between view and controller• Hierarchical

Service• other application components (defined by AngularJS, yourself or third parties), e.g.,

for communicating with backend services or for using browser functionality in a browser independent way


Minimum Angular Application• index.html• app.js

Demo

7

Sample App I: Hello


Summary

Bootstrapping Angular• Declaring the DOM part to be processed: ng-app=”<module-name>”• Include Angular: <script src="angular.js"></script>• Include Angular module: <script src=”app.js”></script>

Client-side templates• Parts of DOM are bound to values in the scope• Standard Syntax: {{expression}}

Bidirectional data-binding• Button: ng-click• Input: ng-model• Title: ng-bind-template• Image: ng-href

8


Summary

Naming of attributes/elements defined by/with AngularJS• ng-model • ng:model (XML)• data-ng-model (HTML 5)• x-ng-model (XHTML)

9


Sample App II: Zwitschermaschine


Step 1: Partials/Routing

Demo

11


Summary

Dependency Injection• Controller is registered at module along with its dependencies• Syntax:

controller('Controller', ['dep1', 'dep2', ..., function(dep1, dep2, ...) { ... } ])

• Array of size n+1 containing- n Strings defining dependencies (by name) - a function with n parameters

Partials/routing• Single page application: constant frame with variable content• Variable content selected via URL• Insertion point for partial pages: ng-view• Configuration of content: $routeProvider

12


Step 2: Adding a Form

Demo

13


Controller• Defines scope for associated form• Syntax: ng-controller

Bidirectional data binding• Retrieval a value first from controller’s scope, than from $rootScope• Setting a value to the controller’s scope

14

Summary


Step 3: REST communication

Demo

15


ngResource• Separate AngularJS module• Powerful abstraction of REST communication

Client-side templates• Loops: ng-repeat• Filters: {{ expression | filter }}• Forcing an update of the view: $scope.$apply

16

Summary


Step 4: Directives

Demo

17

Directives• Registration at module• Usage as element, attribute, class or comment: restrict: ’EAMC’

- Element (E) <custom-ctrl title=”Title”/>- Attribute (A) <div custom-ctrl=”Title”/>- Class (C) <div class=”custom-ctrl:Title”/>- Comment (M) 

• Isolated scope: scope {attributeName: ’@|=|&’}- Fosters reusability- Value (@) Pass attribute value as string literal- Bound (=) Establish data binding between directive and parent scope- Function (&) Pass a function in the parent scope

18

Summary


Directives• Defining the content

- Template: template: { ... } / templateUrl: { ... }Can replace the directive: replace: trueCan add to the directive’s parent element: replace: falseCan include the directive’s content: transclude: true + ng:transclude

- Pair of compile/link functionscompile function is invoked once on the directivelink function is invoked once per use of the directive

• Communication between directives• Priority definition to influence evaluation order

• Existing directives: charting, grids etc.

19

Summary


Step 5: Testing

Demo

20


Unit tests• Jasmine syntax to specify tests: describe/it• Karma for test execution

- Browser configurable (Chrome, Firefox, Safari, IE, PhantomJS)- auto-watch possible

End-to-end tests• Capabilities to mock HTTP servers• UI introspection using jquery selectors• Karma for test execution

21

Summary


Logic at the right place• JSP “This shouldn’t be done here!”• Angular “This is the right place!”

Well-thought aggregation of established techniques• Dependency injection as new mean in the JavaScript technological space• Adaption of known best-of-breed approaches

Under development• Sometimes libraries change (too) fast

22

Conclusion


Thank you!


Predefined Services

$rootScope Access to the parent of all scopes (“root scope”)

$location Access to URL in address bar

$routeProvider Definition of URL/partials mapping

$compile Compiles HTML with angular directives

$http Service for low-level HTTP communication

$resource High-level REST communication

$log Abstraction of console.log

...

config(configFn) Configuration function to be executed during module loading

constant(name, object) Registration of an application-wide constant

controller(name, ctor) Registration of a controller

directive(name, ctor) Registration of a directive

filter(name, ctor) Registration of a filter

run(initFn) Run function to be executed directly before the application gets accessible by the user

service(name, ctor)Registration of a constructor method that new is invoked on to retrieve an object

factory(name, factory)Registration of a function that is responsible for creating an object

provider(name, factory)Combination of factory and service, only providers are accessible in config invocations


Module API


Configuring couchdb

CouchDB & Futon• Used version: 1.3.1

default.ini• Enable CORS

[httpd]enable_cors = true[cors]origins = *

26

an introduction to angularjs

Technology