Upload
falk-hartmann
View
683
Download
4
Embed Size (px)
DESCRIPTION
A Tutorial given at JUG Saxony, November 7th, 2013; Leipzig.
Citation preview
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
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013 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
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013 5
Challenges & solutions
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013 5
Challenges & solutions
Boilerplate code Single page applications
Browser incompatibilities
Forms
Rich user interface
Testability
Maintainability
Development speed
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013 5
Challenges & solutions
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
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013 6
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
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013
Minimum Angular Application• index.html• app.js
Demo
7
Sample App I: Hello
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013
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
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013
Summary
Naming of attributes/elements defined by/with AngularJS• ng-model • ng:model (XML)• data-ng-model (HTML 5)• x-ng-model (XHTML)
9
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013 10
Sample App II: Zwitschermaschine
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013
Step 1: Partials/Routing
Demo
11
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013
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
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013
Step 2: Adding a Form
Demo
13
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013
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
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013
Step 3: REST communication
Demo
15
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013
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
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013
Step 4: Directives
Demo
17
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013
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) <!-- 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
18
Summary
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013
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
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013
Step 5: Testing
Demo
20
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013
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
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013
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
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013 23
Thank you!
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013 24
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
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013 25
Module API
Copyright 2013 Demandware, Inc. All other rights reserved.November 7th, 2013
Configuring couchdb
CouchDB & Futon• Used version: 1.3.1
default.ini• Enable CORS
[httpd]enable_cors = true[cors]origins = *
26