An Introduction to the JavaScript MVC Framework AngularJS

1. 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
▸ ng-repeat
▸ easy to use
▸ ng-view
▸ plain CSS Animations and Transitions
▸ ng-include
▸ CSS classes for 'enter', 'move' and 'leave'
▸ ng-show
▸ custom JS functions possible
▸ ng-hide
▸ directives must support ng-animate

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
Filter
Services
▸ ng-click
▸ currency
▸ http
▸ ng-class
▸ date
▸ location
▸ ng-show / ng-hide
▸ filter
▸ log
▸ ng-include
▸ json
▸ q
▸ ng-view
▸ limitTo
▸ resource
▸ ng-pluralize
▸ lowercase
▸ route
▸ ng-repeat
▸ number
▸ timeout
▸ ng-submit
▸ orderBy
▸ window
▸ ...
▸ uppercase
▸ ...

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)