karlsruher entwicklertag 2013 to use plain css animations and transitions css class names for...

Web Applications with

Karlsruher Entwicklertag 2013

Philipp BurgmerSenior Software Engineer / ConsultantWeigleWilczek GmbHburgmer@weiglewilczek.comMain Focus: Frontend, Web Technologies

About me

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 developement

Web Apps until now

MXML and ActionScript instead of HTML and JavaScript

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

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?

Model View Controller PatternTwo Way Data-BindingDependency InjectionModulesServicesDirectivesFilter

Separation of ConcernsTestable Code

Core Concepts

Two Way Data-BindingAdd Logic with a ControllerFormat Values with FiltersAdjust markup with Filters

Demo

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

Directives

Blink on Steroids SpeedNew Tags with Directives

Demo

Deep linkingPartial Views / Templating

angularjs.com

Views & Routes

function $RouteProvider(){

this.when = function(path, route) { };

this.otherwise = function(params) { );

this.$get = function($rootScope, $location, $routeParams, $q, $injector, $http, $templateCache) {

...

return $route;

};

}

Small crud app -> with own URL bar: localFancy stuff: bouncy ballsThis Presentation

Demo

new in Version 1.2easy to useplain CSS Animations and TransitionsCSS class names for 'enter', 'move' and 'leave'custom JS functions possibleopen for animation libsdirectives must support ng-animate

ng-repeatng-viewng-includeng-showng-hide

Animations

ng-repeatng-view

Demo

ExtensibilityTemplatingLocalizationValidationREST supportEmbeddableTestable

Built-in Features

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

FiltercurrencydatefilterjsonlimitTolowercasenumberorderByuppercase

Serviceshttplocationlogqresourceroutetimeoutwindow...

Built-in Features

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

Philipp Burgmerburgmer@weiglewilczek.com

Java with Google Guice

Dependency Injection

// no dependency management

public class MyModule extends AbstractModule {

protected void configure() {

// bind with interface

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

// bind with scope

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

// bind with alias

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

}

}

Java with Google Guice

Dependency Injection

@Singleton

public class ServiceImpl {

@Inject

public ServiceImpl(final OtherService otherService) { }

}

// manual or by configured framework

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

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

JavaScript with AngularJS

Dependency Injection

// dependency management and di configuration

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

// no scopes, services are singletons by definition

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

function somethingPrivate() { }

return function() {

somethingPrivate();

$window.close();

}

};

JavaScript with AngularJS

Dependency Injection

// dependency management and di configuration

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

// no scopes, services are singletons by definition

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

function somethingPrivate() { }

return function() {

somethingPrivate();

a.close();

}

};

JavaScript with AngularJS

Dependency Injection

// dependency management and di configuration

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

// no scopes, services are singletons by definition

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

function somethingPrivate() { }

return function() {

somethingPrivate();

a.close();

}]

};

JavaScript with AngularJS

Dependency Injection

var service = function(a) {

return function() {

a.close();

}

}

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

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

.service('usefulService', service)

.constant('port', 80)

Additional parameters and overridden DI values

Dependency Injection

// get the injector via static call

var $injector = angular.injector();

// or via injection

function($injector) { }

var functionA = function(serviceA) { };

$inject.invoke(functionA);

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

var locals = { nonDIValue: 1 };

$inject.invoke(functionB, locals);

Philipp Burgmerburgmer@weiglewilczek.com