AngularJS

Slides from my AngularJS talk at stahlstadt.js

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

Transcript

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. $scope $rootScope Directives Factories Module Services Expressions Data binding DI Routers Testing Karma Constants Providers Filters Dependencies Scopes Filters Factories Dependencies Constants Data binding Services Directives Data binding Constants Directives $rootScope Testing Data bin Express Karma tives Data binding Factories Dependencies Dependencies DI Karma Directives Constants Dependencies Directives Directives Directives Services Testing ependencies DI $scope $scope $scope Directives Dependenc Depend $scope DI DI Direc endencies Dependencies Dependencies Data binding Dependencies
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!