Mario Uher

@ream88 / haihappen

@beenetwork

• Seit 2008

• Rails

• Node.js

• iOS

WORKFLOW

• möglichst viel am Server machen

• JavaScript wenn notwendig

• 5 surprisingly painful things about client-side JS

$scope

$rootScope

DirectivesFactories

Module

Services

Expressions

Data binding

DI

Routers

Testing

Karma

Constants

Providers

Filters

Dependencies

Scopes

Filters

Factories

DependenciesConstants

Data binding

Services

Directives

Data binding

Constants

Directives$rootScope

Testing

Data binding

Expressions

Karma

Directives

Data binding

Factories

DependenciesDependencies

DI

Data binding

Karma

Directives

Constants

Dependencies

Directives

DirectivesDirectives

Services

Testing

DependenciesDI$scope

$scope

$scope

Directives

DependenciesDependencies

$scope

DI

DI

Directives

Dependencies

Dependencies

Dependencies

Data binding

Dependencies

???

DIRECTIVES(MVC)

HTML

ML = MARKUP LANGUAGE

MARKUP LANGUAGE

• HTML 2.0

!

MARKUP LANGUAGE

• HTML 2.0

• FrontPage / Dreamweaver

?

MARKUP LANGUAGE

• HTML 2.0

• FrontPage / Dreamweaver

• HTML5

!

MARKUP LANGUAGE

• HTML 2.0

• FrontPage / Dreamweaver

• HTML5

• Twitter Bootstrap

?

MARKUP LANGUAGE• HTML 2.0

• FrontPage / Dreamweaver

• HTML5

• Twitter Bootstrap

• Web Components

!

MARKUP LANGUAGE• HTML 2.0

• FrontPage / Dreamweaver

• HTML5

• Twitter Bootstrap

• Web Components

?

DIRECTIVES(MVC)

ALERT

<div class="alert" ng-hide="hidden"> I'm sorry Mario, I'm afraid you can't do that.! <a href="#" ng-click="hidden = true">&times;</a></div>

ALERT

<div class="alert" ng-hide="hidden"> I'm sorry Mario, I'm afraid you can't do that.! <a href="#" ng-click="hidden = true">&times;</a></div>

ALERT

<div class="alert" ng-hide="hidden"> I'm sorry Mario, I'm afraid you can't do that.! <a href="#" ng-click="hidden = true">&times;</a></div>

ALERT

GRAPH

<graph> <axis position="left"></axis> <axis position="bottom"></axis> <line name="typical-week" data="visitors.typicalWeek"></line> <line name="this-week" data="visitors.thisWeek"></line> <line name="last-week" data="visitors.lastWeek"></line></graph>

How Angular Lets Us Iterate Like Crazy

GRAPH

<graph> <axis position="left"></axis> <axis position="bottom"></axis> <line name="typical-week" data="visitors.typicalWeek"></line> <line name="this-week" data="visitors.thisWeek"></line> <line name="last-week" data="visitors.lastWeek"></line></graph>

How Angular Lets Us Iterate Like Crazy

WYSIWYG

<textarea name="content" wysiwyg></textarea>

WYSIWYG

<textarea name="content" wysiwyg></textarea>

CONTROLLERS(MVC)

CONTROLLER

function UserController($scope) { $scope.name = 'Mario';}!<div ng-controller="UserController"> My name is {{name}}</div>

CONTROLLER

function UserController($scope) { $scope.name = 'Mario';} !<div ng-controller="UserController"> My name is {{name}}</div>

CONTROLLER

function UserController($scope) { $scope.name = 'Mario';}!<div ng-controller="UserController"> My name is {{name}}</div>

CONTROLLER

function UserController($scope) { $scope.users = [{ name: 'Mario' }];}!<table ng-controller="UserController"> <tr ng-repeat="user in users"> <td>{{user.name}}</td> </tr></table>

CONTROLLER

function UserController($scope) { $scope.users = [{ name: 'Mario' }];}!<table ng-controller="UserController"> <tr ng-repeat="user in users"> <td>{{user.name}}</td> </tr></table>

SERVICES(MVC)

SERVICES

• Plain JavaScript Objects

• Binden Ressourcen wie Webdienste und Datenbanken ein

• Enthalten Geschäftslogik

SERVICES

var User = $resource('/user/:userId', { userId:'@id' });var user = User.get({ userId:1 }, function() { user.name = 'Mario'; user.$save();});

SERVICES

var User = $resource('/user/:userId', { userId:'@id' });var user = User.get({ userId:1 }, function() { user.name = 'Mario'; user.$save();});

SERVICES

var User = $resource('/user/:userId', { userId:'@id' });var user = User.get({ userId:1 }, function() { user.name = 'Mario'; user.$save();});

SERVICES

var User = $resource('/user/:userId', { userId:'@id' });var user = User.get({ userId:1 }, function() { user.name = 'Mario'; user.$save();});

SERVICES

angular.module('App', ['ngResource']).factory('User', function($resource) { return $resource('/user/:userId', { userId:'@id' });});!function UserController($scope, User) { $scope.users = User.query();! var user = User.get({ userId: 1 }, function() { user.name = 'Mario'; user.save(); })}

SERVICES

angular.module('App', ['ngResource']).factory('User', function($resource) { return $resource('/user/:userId', { userId:'@id' });});!function UserController($scope, User) { $scope.users = User.query();! var user = User.get({ userId: 1 }, function() { user.name = 'Mario'; user.save(); })}

SERVICES

angular.module('App', ['ngResource']).factory('User', function($resource) { return $resource('/user/:userId', { userId:'@id' });});!function UserController($scope, User) { $scope.users = User.query();! var user = User.get({ userId: 1 }, function() { user.name = 'Mario'; user.save(); })}

DEPENDENCY INJECTION

function UserController($scope, User) { $scope.users = User.query();}

DEPENDENCY INJECTION

• Jeder Controller definiert seine Abhängigkeiten

• Angular kümmert sich um die Auflösung der Abhängigkeiten und meldet Probleme

• Macht Testen leicht

ANGULAR ANIMATE

LERNEN• Tutorial und Docs auf http://angularjs.org

• Brad Green (@bradlygreen)

• Igor Minar (@IgorMinar)

• @angularjs

• https://egghead.io (@eggheadio)

THX!