1. An Introduction to
AngularJS
Falk Hartmann
November
7th,
2013
2/12/13
1
Copyright
2013
Demandware,
Inc.
Anc.
ther
ther
rights
reserved.
Copyright
2013
Demandware,
I ll
o All
o rights
reserved.
2. My Main Areas of Expertise
•
•
•
•
•
Java
Markup Languages
Identity and Access Management
OSGi
ActionScript/MXML
Demandware
•
•
•
•
November
7th,
2013
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.
3. Agenda
•
•
•
•
•
•
November
7th,
2013
What is AngularJS?
Challenges & solutions
Terminology
Sample App I: Hello
Sample App II: Zwitschermaschine
Conclusion
3
Copyright
2013
Demandware,
Inc.
All
other
rights
reserved.
4. 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
November
7th,
2013
4
Copyright
2013
Demandware,
Inc.
All
other
rights
reserved.
6. Challenges & solutions
Boilerplate code
Single page applications
Rich user interface
Development speed
Forms
Maintainability
Browser incompatibilities
Testability
November
7th,
2013
5
Copyright
2013
Demandware,
Inc.
All
other
rights
reserved.
7. Challenges & solutions
Dependency injection
REST
Boilerplate code
Single page applications
Partials/routing
Templates
Rich user interface
Development speed
MVC
Maintainability
Directives
Forms
(Bidirectional) data binding
Browser incompatibilities
Unit tests
Testability
(Abstraction) services
End to end tests
November
7th,
2013
5
Copyright
2013
Demandware,
Inc.
All
other
rights
reserved.
8. Terminology
Module
• 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
November
7th,
2013
6
Copyright
2013
Demandware,
Inc.
All
other
rights
reserved.
9. Sample App I: Hello
Minimum Angular Application
• index.html
• app.js
Demo
November
7th,
2013
7
Copyright
2013
Demandware,
Inc.
All
other
rights
reserved.
10. 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
•
•
•
•
November
7th,
2013
Button: ng-click
Input: ng-model
Title: ng-bind-template
Image: ng-href
8
Copyright
2013
Demandware,
Inc.
All
other
rights
reserved.
11. Summary
Naming of attributes/elements defined by/with AngularJS
•
•
•
•
November
7th,
2013
ng-model
ng:model (XML)
data-ng-model (HTML 5)
x-ng-model (XHTML)
9
Copyright
2013
Demandware,
Inc.
All
other
rights
reserved.
12. Sample App II: Zwitschermaschine
November
7th,
2013
10
Copyright
2013
Demandware,
Inc.
All
other
rights
reserved.
14. 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
•
•
•
•
November
7th,
2013
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
Copyright
2013
Demandware,
Inc.
All
other
rights
reserved.
15. Step 2: Adding a Form
Demo
November
7th,
2013
13
Copyright
2013
Demandware,
Inc.
All
other
rights
reserved.
16. Summary
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
November
7th,
2013
14
Copyright
2013
Demandware,
Inc.
All
other
rights
reserved.
17. Step 3: REST communication
Demo
November
7th,
2013
15
Copyright
2013
Demandware,
Inc.
All
other
rights
reserved.
18. Summary
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
November
7th,
2013
16
Copyright
2013
Demandware,
Inc.
All
other
rights
reserved.
20. Summary
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”/>
<div class=”custom-ctrl:Title”/>
- Class (C)
- Comment (M) <!-- directive: custom-ctrl Title -->
• 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
November
7th,
2013
18
Copyright
2013
Demandware,
Inc.
All
other
rights
reserved.
21. Summary
Directives
• Defining the content
- Template: template: { ... } / templateUrl: { ... }
Can replace the directive: replace: true
Can add to the directive’s parent element: replace: false
Can include the directive’s content:
transclude: true + ng:transclude
- Pair of compile/link functions
compile function is invoked once on the directive
link function is invoked once per use of the directive
• Communication between directives
• Priority definition to influence evaluation order
• Existing directives: charting, grids etc.
November
7th,
2013
19
Copyright
2013
Demandware,
Inc.
All
other
rights
reserved.
23. Summary
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
November
7th,
2013
21
Copyright
2013
Demandware,
Inc.
All
other
rights
reserved.
24. Conclusion
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
November
7th,
2013
22
Copyright
2013
Demandware,
Inc.
All
other
rights
reserved.
26. 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
...
November
7th,
2013
24
Copyright
2013
Demandware,
Inc.
All
other
rights
reserved.
27. Module API
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
November
7th,
2013
25
Copyright
2013
Demandware,
Inc.
All
other
rights
reserved.
28. Configuring couchdb
CouchDB & Futon
• Used version: 1.3.1
default.ini
• Enable CORS
[httpd]
enable_cors = true
[cors]
origins = *
November
7th,
2013
26
Copyright
2013
Demandware,
Inc.
All
other
rights
reserved.