An Introduction to
AngularJS
Falk Hartmann

November	
  7th,	
  2013
2/12/13

1

Copyright	
  2013	
  Demandware,	
  Inc.	...
My Main Areas of Expertise
•
•
•
•
•

Java
Markup Languages
Identity and Access Management
OSGi
ActionScript/MXML

Demandw...
Agenda
•
•
•
•
•
•

November	
  7th,	
  2013

What is AngularJS?
Challenges & solutions
Terminology
Sample App I: Hello
Sa...
What is AngularJS?

•
•
•
•

Client-side JavaScript framework (i.e., runs in a browser)
“Superheroic JavaScript MVW Framew...
Challenges & solutions

November	
  7th,	
  2013

5

Copyright	
  2013	
  Demandware,	
  Inc.	
  All	
  other	
  rights	
 ...
Challenges & solutions
Boilerplate code

Single page applications

Rich user interface
Development speed

Forms

Maintaina...
Challenges & solutions
Dependency injection

REST

Boilerplate code

Single page applications
Partials/routing

Templates
...
Terminology
Module
• Unit for the specification of dependencies (high-level)

Directive
• (UI) Control (defined by yourself ...
Sample App I: Hello
Minimum Angular Application
• index.html
• app.js

Demo

November	
  7th,	
  2013

7

Copyright	
  201...
Summary
Bootstrapping Angular
• Declaring the DOM part to be processed: ng-app=”<module-name>”
• Include Angular: <script ...
Summary
Naming of attributes/elements defined by/with AngularJS
•
•
•
•

November	
  7th,	
  2013

ng-model
ng:model (XML)
...
Sample App II: Zwitschermaschine

November	
  7th,	
  2013

10

Copyright	
  2013	
  Demandware,	
  Inc.	
  All	
  other	
...
Step 1: Partials/Routing
Demo

November	
  7th,	
  2013

11

Copyright	
  2013	
  Demandware,	
  Inc.	
  All	
  other	
  r...
Summary
Dependency Injection
• Controller is registered at module along with its dependencies
• Syntax:
controller('Contro...
Step 2: Adding a Form
Demo

November	
  7th,	
  2013

13

Copyright	
  2013	
  Demandware,	
  Inc.	
  All	
  other	
  righ...
Summary
Controller
• Defines scope for associated form
• Syntax: ng-controller

Bidirectional data binding

• Retrieval a v...
Step 3: REST communication
Demo

November	
  7th,	
  2013

15

Copyright	
  2013	
  Demandware,	
  Inc.	
  All	
  other	
 ...
Summary
ngResource
• Separate AngularJS module
• Powerful abstraction of REST communication

Client-side templates
• Loops...
Step 4: Directives
Demo

November	
  7th,	
  2013

17

Copyright	
  2013	
  Demandware,	
  Inc.	
  All	
  other	
  rights	...
Summary
Directives
• Registration at module
• Usage as element, attribute, class or comment: restrict: ’EAMC’
- Element (E...
Summary
Directives
• Defining the content
- Template: template: { ... } / templateUrl: { ... }
Can replace the directive: r...
Step 5: Testing
Demo

November	
  7th,	
  2013

20

Copyright	
  2013	
  Demandware,	
  Inc.	
  All	
  other	
  rights	
  ...
Summary
Unit tests
• Jasmine syntax to specify tests: describe/it
• Karma for test execution
- Browser configurable (Chrome...
Conclusion
Logic at the right place
• JSP “This shouldn’t be done here!”
• Angular “This is the right place!”

Well-though...
Thank you!

November	
  7th,	
  2013

23

Copyright	
  2013	
  Demandware,	
  Inc.	
  All	
  other	
  rights	
  reserved.
Predefined Services
$rootScope

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

$location

Access to URL in address bar
...
Module API
config(configFn)

Configuration function to be executed during module loading

constant(name, object)

Registra...
Configuring couchdb
CouchDB & Futon
• Used version: 1.3.1

default.ini

• Enable CORS
[httpd]
enable_cors = true
[cors]
ori...
Upcoming SlideShare
Loading in …5
×

An Introduction to AngularJS

1,011 views

Published on

A Tutorial given at JUG Saxony, November 7th, 2013; Leipzig.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,011
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

An Introduction to AngularJS

  1. 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. 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. 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. 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.
  5. 5. Challenges & solutions November  7th,  2013 5 Copyright  2013  Demandware,  Inc.  All  other  rights  reserved.
  6. 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. 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. 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. 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. 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. 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. 12. Sample App II: Zwitschermaschine November  7th,  2013 10 Copyright  2013  Demandware,  Inc.  All  other  rights  reserved.
  13. 13. Step 1: Partials/Routing Demo November  7th,  2013 11 Copyright  2013  Demandware,  Inc.  All  other  rights  reserved.
  14. 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. 15. Step 2: Adding a Form Demo November  7th,  2013 13 Copyright  2013  Demandware,  Inc.  All  other  rights  reserved.
  16. 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. 17. Step 3: REST communication Demo November  7th,  2013 15 Copyright  2013  Demandware,  Inc.  All  other  rights  reserved.
  18. 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.
  19. 19. Step 4: Directives Demo November  7th,  2013 17 Copyright  2013  Demandware,  Inc.  All  other  rights  reserved.
  20. 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. 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.
  22. 22. Step 5: Testing Demo November  7th,  2013 20 Copyright  2013  Demandware,  Inc.  All  other  rights  reserved.
  23. 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. 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.
  25. 25. Thank you! November  7th,  2013 23 Copyright  2013  Demandware,  Inc.  All  other  rights  reserved.
  26. 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. 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. 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.

×