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 clie...
Dependencies Direc
Services
Constants Scopes
Data binding
TestingDI
endencies
$scope
Data binding DIData
Data bindingConst...
???
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="hidd...
ALERT

<div class="alert" ng-hide="hidden">	
I'm sorry Mario, I'm afraid you can't do that.	

!
<a href="#" ng-click="hidd...
ALERT

<div class="alert" ng-hide="hidden">	
I'm sorry Mario, I'm afraid you can't do that.	

!
<a href="#" ng-click="hidd...
ALERT
GRAPH

<graph>	
<axis position="left"></axis>	
<axis position="bottom"></axis>	
<line name="typical-week" data="visitors.t...
GRAPH

<graph>	
<axis position="left"></axis>	
<axis position="bottom"></axis>	
<line name="typical-week" data="visitors.t...
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...
CONTROLLER

function UserController($scope) {	
$scope.name = 'Mario';	
} 	

!
<div ng-controller="UserController">	
My nam...
CONTROLLER

function UserController($scope) {	
$scope.name = 'Mario';	
}	

!
<div ng-controller="UserController">	
My name...
CONTROLLER
function UserController($scope) {	
$scope.users = [{	
name: 'Mario'	
}];	
}	

!
<table ng-controller="UserContr...
CONTROLLER
function UserController($scope) {	
$scope.users = [{	
name: 'Mario'	
}];	
}	

!
<table ng-controller="UserContr...
SERVICES
(MVC)
SERVICES
•

Plain JavaScript Objects	


•

Binden Ressourcen wie Webdienste und
Datenbanken ein	


•

Enthalten Geschäftsl...
SERVICES

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

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

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

var User = $resource('/user/:userId', { userId:'@id' });	
var user = User.get({ userId:1 }, function() {	
user.n...
SERVICES
angular.module('App', ['ngResource']).factory('User',
function($resource) {	
return $resource('/user/:userId', { ...
SERVICES
angular.module('App', ['ngResource']).factory('User',
function($resource) {	
return $resource('/user/:userId', { ...
SERVICES
angular.module('App', ['ngResource']).factory('User',
function($resource) {	
return $resource('/user/:userId', { ...
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ä...
ANGULAR ANIMATE
LERNEN
•

Tutorial und Docs auf http://angularjs.org 	


•

Brad Green (@bradlygreen)	


•

Igor Minar (@IgorMinar)	


•

...
THX!
AngularJS
AngularJS
AngularJS
AngularJS
Upcoming SlideShare
Loading in …5
×

AngularJS

903 views

Published on

Slides from my AngularJS talk at stahlstadt.js

http://www.meetup.com/stahlstadt-js/events/159159282/

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
903
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

AngularJS

  1. 1. Mario Uher @ream88 / haihappen
  2. 2. @beenetwork • Seit 2008 • Rails • Node.js • iOS
  3. 3. WORKFLOW • möglichst viel am Server machen • JavaScript wenn notwendig • 5 surprisingly painful things about client-side JS
  4. 4. Dependencies Direc Services Constants Scopes Data binding TestingDI endencies $scope Data binding DIData Data bindingConstantsbinding $scope Karma Constants DI $scope Constants Data bin Dependencies ependencies $scope Dependencies DI Testing Karma Dependencies Dependencies Providers Dependencies Dependencies Dependencies Module Karma Directives Services Filters $rootScope Factories $rootScope Directives Services Directives Depend Directives Factories tives Directives Directives $scope Routers Directives Dependenc DI Filters Data binding Expressions Directives Testing Factories Express
  5. 5. ???
  6. 6. DIRECTIVES (MVC)
  7. 7. HTML
  8. 8. ML = MARKUP LANGUAGE
  9. 9. MARKUP LANGUAGE ! • HTML 2.0
  10. 10. MARKUP LANGUAGE ? • HTML 2.0 • FrontPage / Dreamweaver
  11. 11. MARKUP LANGUAGE ! • HTML 2.0 • FrontPage / Dreamweaver • HTML5
  12. 12. MARKUP LANGUAGE ? • HTML 2.0 • FrontPage / Dreamweaver • HTML5 • Twitter Bootstrap
  13. 13. MARKUP LANGUAGE ! • HTML 2.0 • FrontPage / Dreamweaver • HTML5 • Twitter Bootstrap • Web Components
  14. 14. MARKUP LANGUAGE ? • HTML 2.0 • FrontPage / Dreamweaver • HTML5 • Twitter Bootstrap • Web Components
  15. 15. DIRECTIVES (MVC)
  16. 16. 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>
  17. 17. 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>
  18. 18. 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>
  19. 19. ALERT
  20. 20. 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
  21. 21. 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
  22. 22. WYSIWYG <textarea name="content" wysiwyg> </textarea>
  23. 23. WYSIWYG <textarea name="content" wysiwyg> </textarea>
  24. 24. CONTROLLERS (MVC)
  25. 25. CONTROLLER function UserController($scope) { $scope.name = 'Mario'; } ! <div ng-controller="UserController"> My name is {{name}} </div>
  26. 26. CONTROLLER function UserController($scope) { $scope.name = 'Mario'; } ! <div ng-controller="UserController"> My name is {{name}} </div>
  27. 27. CONTROLLER function UserController($scope) { $scope.name = 'Mario'; } ! <div ng-controller="UserController"> My name is {{name}} </div>
  28. 28. CONTROLLER function UserController($scope) { $scope.users = [{ name: 'Mario' }]; } ! <table ng-controller="UserController"> <tr ng-repeat="user in users"> <td>{{user.name}}</td> </tr> </table>
  29. 29. CONTROLLER function UserController($scope) { $scope.users = [{ name: 'Mario' }]; } ! <table ng-controller="UserController"> <tr ng-repeat="user in users"> <td>{{user.name}}</td> </tr> </table>
  30. 30. SERVICES (MVC)
  31. 31. SERVICES • Plain JavaScript Objects • Binden Ressourcen wie Webdienste und Datenbanken ein • Enthalten Geschäftslogik
  32. 32. SERVICES var User = $resource('/user/:userId', { userId:'@id' }); var user = User.get({ userId:1 }, function() { user.name = 'Mario'; user.$save(); });
  33. 33. SERVICES var User = $resource('/user/:userId', { userId:'@id' }); var user = User.get({ userId:1 }, function() { user.name = 'Mario'; user.$save(); });
  34. 34. SERVICES var User = $resource('/user/:userId', { userId:'@id' }); var user = User.get({ userId:1 }, function() { user.name = 'Mario'; user.$save(); });
  35. 35. SERVICES var User = $resource('/user/:userId', { userId:'@id' }); var user = User.get({ userId:1 }, function() { user.name = 'Mario'; user.$save(); });
  36. 36. 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(); }) }
  37. 37. 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(); }) }
  38. 38. 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(); }) }
  39. 39. DEPENDENCY INJECTION function UserController($scope, User) { $scope.users = User.query(); }
  40. 40. 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
  41. 41. ANGULAR ANIMATE
  42. 42. LERNEN • Tutorial und Docs auf http://angularjs.org • Brad Green (@bradlygreen) • Igor Minar (@IgorMinar) • @angularjs • https://egghead.io (@eggheadio)
  43. 43. THX!

×