Meine Präsentation über AngularJS für die W-JAX 2012 in Münschen

1. Web Applications with

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

3. 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

4. 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

5. 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

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

7. 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)

8. 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
}
}

9. 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);

10. 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 };
}

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(a) {
5
function somethingPrivate() { }
6
7
return function() {
8
somethingPrivate();
9
a.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', ['$window', function(a) {
5
function somethingPrivate() { }
6
7
return function() {
8
somethingPrivate();
9
a.close();
10
11 };
}]

13. 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);

14. 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);

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

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

17. 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>

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

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

20. 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
...

21. 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!

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