This document summarizes a presentation on building web applications with AngularJS. It introduces AngularJS as a client-side JavaScript framework that uses HTML enhanced with directives for building rich web apps. Core concepts covered include MVC pattern, two-way data binding, dependency injection, and separation of concerns. Demos illustrate data binding, controllers, filters, directives, views/routes, and animations. Built-in features and the AngularJS ecosystem are also discussed.

1. Karlsruher Entwicklertag 2013
Web Applications with

2. About Me
Philipp Burgmer
Senior Software Engineer / Consultant
WeigleWilczek GmbH
burgmer@w11k.com
Focus: Frontend, Web Technologies

3. About Us
WeigleWilczek / W11k
Software Design, Development & Maintenance
Consulting and Coaching
Web Applications
Eclipse RCP
Java / JVM

4. Web Apps until now
GWT
UI in Java / XML
hard to use JS libs / scatters ui logic
"Java World" instead of "Web World"
JSF
UI on Server
a lot HTTP requests just to update UI
hard to use JS libs / scatters ui logic
Flex
based on Flash
Adobe discontinues developement
MXML and ActionScript instead of HTML and JavaScript

5. Web Apps from now on
Frontend runs completely in the browser
Stateful UI, stateless server
Server delivers static resources
Server delivers dynamic data
HTML, CSS and JavaScript as UI Toolkit

6. What is AngularJS?
HTML enhanced for web apps!
angularjs.com
client / browser JS framework
rich browser applications
brings core frontend concepts and features to the browser
extends html instead of abstracting or wrapping it
lets you extend html to fit your needs

7. Core Concepts
Model View Controller Pattern
Two Way Data-Binding
Dependency Injection
Modules
Services
Directives
Filter
Separation of Concerns
Testable Code

8. Demo
Two Way Data-Binding (http://jsbin.com/atufut/14/edit?live)
Add Logic with a Controller (http://jsbin.com/igoxuj/15/edit?live)
Format Values with Filters (http://jsbin.com/esavog/13/edit?live)

9. Dependency Injection
Java with Google Guice
1 // no dependency management
2 public class MyModule extends AbstractModule {
3
protected void configure() {
4
// bind with interface
5
bind(Service.class).to(ServiceImpl.class);
6
// bind with scope
7
bind(OtherService.class).in(Singleton.class);
8
// bind with alias
9
bindConstant().annotatedWith(Names.named("port")).to(8080);
10
11
}
}

10. Dependency Injection
Java with Google Guice
1 @Singleton
2 public class ServiceImpl {
3
@Inject
4
public ServiceImpl(final OtherService otherService) { }
5 }
1 // manual or by configured framework
2 final Injector injector = Guice.createInjector(new MyModule());
3 final Service service = injector.getInstance(Service.class);

11. Dependency Injection
JavaScript with AngularJS
1 // dependency management and di configuration
2 angular.module('myModule', ['moduleOfOtherLibrary'])
3 // no scopes, services are singletons by definition
4 .service('usefulService', function($window) {
5
function somethingPrivate() { }
6
7
return function() {
8
somethingPrivate();
9
$window.close();
10
11 };
}

12. Dependency Injection
JavaScript with AngularJS
1 // dependency management and di configuration
2 angular.module('myModule', ['moduleOfOtherLibrary'])
3 // no scopes, services are singletons by definition
4 .service('usefulService', function(a) {
5
function somethingPrivate() { }
6
7
return function() {
8
somethingPrivate();
9
a.close();
10
11 };
}

13. Dependency Injection
JavaScript with AngularJS
1 // dependency management and di configuration
2 angular.module('myModule', ['moduleOfOtherLibrary'])
3 // no scopes, services are singletons by definition
4 .service('usefulService', ['$window', function(a) {
5
function somethingPrivate() { }
6
7
return function() {
8
somethingPrivate();
9
a.close();
10
11 };
}]

14. Dependency Injection
JavaScript with AngularJS
1 var service = function(a) {
2
return function() {
3
4
a.close();
}
5 }
6 service.$inject = ['$window'];
7
8 angular.module('myModule', ['moduleOfOtherLibrary'])
9 .service('usefulService', service);

15. Dependency Injection
Additional parameters and overridden DI values
1 // get the injector via static call
2 var $injector = angular.injector();
3 // or via injection
4 function($injector) { }
1 var functionA = function(serviceA) { };
2 $inject.invoke(functionA);
3
4 var functionB = function(serviceA, nonDIValue) { };
5 var locals = { nonDIValue: 1 };
6 $inject.invoke(functionB, locals);

16. Directives
extend HTML
Tags, Attributes, CSS classes
encapsulate DOM manipulations
proceeded by AngularJS compiler

17. Demo
Blink on Steroids Speed (http://jsbin.com/ekevip/41/edit?live)
New Tags with Directives (http://jsbin.com/onacoh/11/edit?live)

18. Views & Routes
Deep linking
Partial Views / Templating
1 angular.module('route.something').config(function ($routeProvider) {
2
$routeProvider.when('/something/:id/', {
3
templateUrl : "route/something.tpl.html",
4
controller : 'SomethingCtrl'
5
})
6 });
1 angular.module('myApp').config(function ($routeProvider) {
2
$routeProvider.otherwise({
3
redirectTo: '/home'
4 });
1 <div class="header">...<&div>
2 <div class="content">
3
<div ng-view></div>
4 </div>
5 <div class="footer">...<&div>

19. Demo
Small crud app (http://jsbin.com/exevex/14/edit?live) -> with own URL bar: local
This Presentation

20. Animations
new in Version 1.2
easy to use
plain CSS Animations and Transitions
CSS classes for 'enter', 'move' and 'leave'
custom JS functions possible
directives must support ng-animate
ng-repeat
ng-view
ng-include
ng-show
ng-hide

21. Demo
ng-repeat (http://jsbin.com/upedez/7/edit?live)
ng-view (http://jsbin.com/ixapay/4/edit?live)
Fancy stuff: bouncy balls (http://jsbin.com/uwiyer/21/edit?live)

22. Built-in Features
Extensibility
Embeddable
Testable Code
Templating
Localization
Validation
REST support
Async Code with Promises
...

23. Built-in Features
Directives
ng-click
ng-class
ng-show / ng-hide
ng-include
ng-view
ng-pluralize
ng-repeat
ng-submit
...
Filter
currency
date
filter
json
limitTo
lowercase
number
orderBy
uppercase
Services
http
location
log
q
resource
route
timeout
window
...

24. Eco System
(http://www.gruntjs.com)
Bower (http://www.bower.io)
Bootstrap (http://www.git-scm.com)
Task Runner / Build System
Dependency Management for 3rd
party libs
Front-End Framework
Styling & Layout
(http://www.git-scm.com)
(http://www.nodejs.org)
(http://www.git-scm.com)
CSS Extension Language
Version Control System
Runtime for Dev Tools /
Backend Environment

25. Conclusion
Clean separation of Frontend and Backend
Features like DI, MVC and DataBinding in the browser
Seamless integration with other frameworks
Lets you use all the cool new Web / JS tools
Easy to learn
Documentation with a lot of runnable examples
Large community and fast growing eco system
powered and used by Google
Try it!

26. Philipp Burgmer
burgmer@w11k.com
www.w11k.com (http://www.w11k.com)
www.thecodecampus.de (http://www.thecodecampus.de)