Your SlideShare is downloading. ×
0
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
AngularJS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AngularJS

570

Published on

Slides from my AngularJS talk at stahlstadt.js …

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
570
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Mario Uher @ream88 / haihappen
  • 2. @beenetwork • Seit 2008 • Rails • Node.js • iOS
  • 3. WORKFLOW • möglichst viel am Server machen • JavaScript wenn notwendig • 5 surprisingly painful things about client-side JS
  • 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. ???
  • 6. DIRECTIVES (MVC)
  • 7. HTML
  • 8. ML = MARKUP LANGUAGE
  • 9. MARKUP LANGUAGE ! • HTML 2.0
  • 10. MARKUP LANGUAGE ? • HTML 2.0 • FrontPage / Dreamweaver
  • 11. MARKUP LANGUAGE ! • HTML 2.0 • FrontPage / Dreamweaver • HTML5
  • 12. MARKUP LANGUAGE ? • HTML 2.0 • FrontPage / Dreamweaver • HTML5 • Twitter Bootstrap
  • 13. MARKUP LANGUAGE ! • HTML 2.0 • FrontPage / Dreamweaver • HTML5 • Twitter Bootstrap • Web Components
  • 14. MARKUP LANGUAGE ? • HTML 2.0 • FrontPage / Dreamweaver • HTML5 • Twitter Bootstrap • Web Components
  • 15. DIRECTIVES (MVC)
  • 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. 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. 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. ALERT
  • 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. 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. WYSIWYG <textarea name="content" wysiwyg> </textarea>
  • 23. WYSIWYG <textarea name="content" wysiwyg> </textarea>
  • 24. CONTROLLERS (MVC)
  • 25. CONTROLLER function UserController($scope) { $scope.name = 'Mario'; } ! <div ng-controller="UserController"> My name is {{name}} </div>
  • 26. CONTROLLER function UserController($scope) { $scope.name = 'Mario'; } ! <div ng-controller="UserController"> My name is {{name}} </div>
  • 27. CONTROLLER function UserController($scope) { $scope.name = 'Mario'; } ! <div ng-controller="UserController"> My name is {{name}} </div>
  • 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. 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. SERVICES (MVC)
  • 31. SERVICES • Plain JavaScript Objects • Binden Ressourcen wie Webdienste und Datenbanken ein • Enthalten Geschäftslogik
  • 32. SERVICES var User = $resource('/user/:userId', { userId:'@id' }); var user = User.get({ userId:1 }, function() { user.name = 'Mario'; user.$save(); });
  • 33. SERVICES var User = $resource('/user/:userId', { userId:'@id' }); var user = User.get({ userId:1 }, function() { user.name = 'Mario'; user.$save(); });
  • 34. SERVICES var User = $resource('/user/:userId', { userId:'@id' }); var user = User.get({ userId:1 }, function() { user.name = 'Mario'; user.$save(); });
  • 35. SERVICES var User = $resource('/user/:userId', { userId:'@id' }); var user = User.get({ userId:1 }, function() { user.name = 'Mario'; user.$save(); });
  • 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. 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. 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. DEPENDENCY INJECTION function UserController($scope, User) { $scope.users = User.query(); }
  • 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. ANGULAR ANIMATE
  • 42. LERNEN • Tutorial und Docs auf http://angularjs.org • Brad Green (@bradlygreen) • Igor Minar (@IgorMinar) • @angularjs • https://egghead.io (@eggheadio)
  • 43. THX!

×