Slides from my AngularJS talk at stahlstadt.js http://www.meetup.com/stahlstadt-js/events/159159282/

2. Mario Uher
@ream88 / haihappen

4. @beenetwork
•
Seit 2008
•
Rails
•
Node.js
•
iOS

6. WORKFLOW
•
möglichst viel am Server machen
•
JavaScript wenn notwendig
•
5 surprisingly painful things about client-side JS

8. 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

9. ???

10. DIRECTIVES
(MVC)

11. HTML

12. ML = MARKUP LANGUAGE

13. MARKUP LANGUAGE !
•
HTML 2.0

14. MARKUP LANGUAGE ?
•
HTML 2.0
•
FrontPage / Dreamweaver

15. MARKUP LANGUAGE !
•
HTML 2.0
•
FrontPage / Dreamweaver
•
HTML5

16. MARKUP LANGUAGE ?
•
HTML 2.0
•
FrontPage / Dreamweaver
•
HTML5
•
Twitter Bootstrap

17. MARKUP LANGUAGE !
•
HTML 2.0
•
FrontPage / Dreamweaver
•
HTML5
•
Twitter Bootstrap
•
Web Components

18. MARKUP LANGUAGE ?
•
HTML 2.0
•
FrontPage / Dreamweaver
•
HTML5
•
Twitter Bootstrap
•
Web Components

19. DIRECTIVES
(MVC)

20. 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>

21. 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>

22. 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>

23. ALERT

24. 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

25. 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

26. WYSIWYG
<textarea name="content" wysiwyg>
</textarea>

27. WYSIWYG
<textarea name="content" wysiwyg>
</textarea>

28. CONTROLLERS
(MVC)

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

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

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

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

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

34. SERVICES
(MVC)

35. SERVICES
•
Plain JavaScript Objects
•
Binden Ressourcen wie Webdienste und
Datenbanken ein
•
Enthalten Geschäftslogik

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

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

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

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

40. 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();
})
}

41. 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();
})
}

42. 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();
})
}

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

44. 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

45. ANGULAR ANIMATE

46. LERNEN
•
Tutorial und Docs auf http://angularjs.org
•
Brad Green (@bradlygreen)
•
Igor Minar (@IgorMinar)
•
@angularjs
•
https://egghead.io (@eggheadio)

47. THX!