23
Web Applications with

WJAX 2012 - Web Apps With AngularJS

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: WJAX 2012 - Web Apps With AngularJS

Web Applications with

Page 2: WJAX 2012 - Web Apps With AngularJS

Philipp BurgmerSenior Software Engineer / ConsultantWeigleWilczek [email protected]: Frontend, Web Technologies

About Me

Page 3: WJAX 2012 - Web Apps With AngularJS

GWTUI in Java / XMLhard to use JS libs / scatters ui logic"Java World" instead of "Web World"

JSFUI on Servera lot HTTP requests just to update UIhard to use JS libs / scatters ui logic

Flexbased on FlashAdobe discontinues developementMXML and ActionScript instead of HTML and JavaScript

Web Apps until now

Page 4: WJAX 2012 - Web Apps With AngularJS

Frontend runs completely in the browserStateful UI, stateless serverServer delivers static resourcesServer delivers dynamic dataHTML, CSS and JavaScript as UI Toolkit

Web Apps from now on

Page 5: WJAX 2012 - Web Apps With AngularJS

HTML enhanced for web apps!angularjs.com

client / browser JS frameworkrich browser applicationsbrings core frontend concepts and features to the browserextends html instead of abstracting or wrapping itlets you extend html to fit your needs

What is AngularJS?

Page 6: WJAX 2012 - Web Apps With AngularJS

Model View Controller PatternTwo Way Data-BindingDependency InjectionModulesServicesDirectivesFilter

Separation of ConcernsTestable Code

Core Concepts

Page 7: WJAX 2012 - Web Apps With AngularJS

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)

Demo

Page 8: WJAX 2012 - Web Apps With AngularJS

Java with Google Guice

Dependency Injection

// no dependency management1

public class MyModule extends AbstractModule {2

protected void configure() {3

// bind with interface4

bind(Service.class).to(ServiceImpl.class);5

// bind with scope6

bind(OtherService.class).in(Singleton.class);7

// bind with alias8

bindConstant().annotatedWith(Names.named("port")).to(8080);9

}10

}11

Page 9: WJAX 2012 - Web Apps With AngularJS

Java with Google Guice

Dependency Injection

@Singleton1

public class ServiceImpl {2

@Inject3

public ServiceImpl(final OtherService otherService) { }4

}5

// manual or by configured framework1

final Injector injector = Guice.createInjector(new MyModule());2

final Service service = injector.getInstance(Service.class);3

Page 10: WJAX 2012 - Web Apps With AngularJS

JavaScript with AngularJS

Dependency Injection

// dependency management and di configuration1

angular.module('myModule', ['moduleOfOtherLibrary'])2

// no scopes, services are singletons by definition3

.service('usefulService', function($window) {4

function somethingPrivate() { }5

6 return function() {7

somethingPrivate();8

$window.close();9

}10

};11

Page 11: WJAX 2012 - Web Apps With AngularJS

JavaScript with AngularJS

Dependency Injection

// dependency management and di configuration1

angular.module('myModule', ['moduleOfOtherLibrary'])2

// no scopes, services are singletons by definition3

.service('usefulService', function(a) {4

function somethingPrivate() { }5

6 return function() {7

somethingPrivate();8

a.close();9

}10

};11

Page 12: WJAX 2012 - Web Apps With AngularJS

JavaScript with AngularJS

Dependency Injection

// dependency management and di configuration1

angular.module('myModule', ['moduleOfOtherLibrary'])2

// no scopes, services are singletons by definition3

.service('usefulService', ['$window', function(a) {4

function somethingPrivate() { }5

6 return function() {7

somethingPrivate();8

a.close();9

}]10

};11

Page 13: WJAX 2012 - Web Apps With AngularJS

JavaScript with AngularJS

Dependency Injection

var service = function(a) {1

return function() {2

a.close();3

}4

}5

service.$inject = ['$window'];6

7angular.module('myModule', ['moduleOfOtherLibrary'])8

.service('usefulService', service);9

Page 14: WJAX 2012 - Web Apps With AngularJS

Additional parameters and overridden DI values

Dependency Injection

// get the injector via static call1

var $injector = angular.injector();2

// or via injection3

function($injector) { }4

var functionA = function(serviceA) { };1

$inject.invoke(functionA);2

3var functionB = function(serviceA, nonDIValue) { };4

var locals = { nonDIValue: 1 };5

$inject.invoke(functionB, locals);6

Page 15: WJAX 2012 - Web Apps With AngularJS

extend HTMLTags, Attributes, CSS classesencapsulate DOM manipulationsproceeded by AngularJS compiler

Directives

Page 16: WJAX 2012 - Web Apps With AngularJS

Blink on Steroids Speed (http://jsbin.com/ekevip/41/edit?live)

New Tags with Directives (http://jsbin.com/onacoh/11/edit?live)

Demo

Page 17: WJAX 2012 - Web Apps With AngularJS

Deep linkingPartial Views / Templating

Views & Routes

angular.module('route.something').config(function ($routeProvider) {1

$routeProvider.when('/something/:id/', {2

templateUrl : "route/something.tpl.html",3

controller : 'SomethingCtrl'4

})5

});6

angular.module('myApp').config(function ($routeProvider) {1

$routeProvider.otherwise({2

redirectTo: '/home'3

});4

<div class="header">...<&div>1

<div class="content">2

<div ng-view></div>3

</div>4

<div class="footer">...<&div>5

Page 18: WJAX 2012 - Web Apps With AngularJS

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

Demo

Page 19: WJAX 2012 - Web Apps With AngularJS

ExtensibilityEmbeddableTestable Code

TemplatingLocalizationValidationREST supportAsync Code with Promises...

Built-in Features

Page 20: WJAX 2012 - Web Apps With AngularJS

Built-in Features

Directivesng-clickng-classng-show / ng-hideng-includeng-viewng-pluralizeng-repeatng-submit...

FiltercurrencydatefilterjsonlimitTolowercasenumberorderByuppercase

Serviceshttplocationlogqresourceroutetimeoutwindow...

Page 21: WJAX 2012 - Web Apps With AngularJS

Clean separation of Frontend and BackendFeatures like DI, MVC and DataBinding in the browserSeamless integration with other frameworksLets you use all the cool new Web / JS tools

Easy to learnDocumentation with a lot of runnable examplesLarge community and fast growing eco systempowered and used by Google

Try it!

Conclusion

Page 22: WJAX 2012 - Web Apps With AngularJS

Philipp [email protected]

www.w11k.com (http://www.w11k.com)

www.thecodecampus.de (http://www.thecodecampus.de)

Page 23: WJAX 2012 - Web Apps With AngularJS