Doing it angled - Musings with AngularJS

This talk gives you a brief intro into the world of AngularJS first before I walk you through the core concepts of Angular's digest loop which makes up for most of Angular's charme.

Transcript

1. Doing it angled
2. Thorben Schröder @walski
3. Quarter Spiral thorben@quarterspiral.com
4. THUNDERBOLTLABS
5. THUNDERBOLTLABS AWESOME!
6. Reminisce!
11. MVC
12. V M C
13. Model: Scope View: HTML Controller: Controller MVC Break Down
16. <form ng-submit="encrypt()"> <h2>Plain Text</h2> <div class="controls"> <textarea id="messageInput" ng-model="message"> </textarea> </div> … </form> <div ng-controller="aesCtrl"> <form ng-submit="encrypt()"> <h2>Plain Text</h2> <div> <textarea ng-model="message"> </textarea> </div> … </form> … </div>
17. <div ng-controller="aesCtrl"> <form ng-submit="encrypt()"> <h2>Plain Text</h2> <div> <textarea ng-model="message"> </textarea> </div> … </form> … </div> 1
18. <div ng-controller="aesCtrl"> <form ng-submit="encrypt()"> <h2>Plain Text</h2> <div> <textarea ng-model="message"> </textarea> </div> … </form> … </div> 2
19. <div ng-controller="aesCtrl"> <form ng-submit="encrypt()"> <h2>Plain Text</h2> <div> <textarea ng-model="message"> </textarea> </div> … </form> … </div> 3
20. <div ng-controller="aesCtrl"> <form ng-submit="encrypt()"> <h2>Plain Text</h2> <div> <textarea ng-model="message"> function aesCtrl($scope) { $scope.message = 'some msg'; $scope.encrypt = function () { $scope.message = enc($scope.message); } } aesCtrl.$inject = ['$scope'];
21. <div ng-controller="aesCtrl"> <form ng-submit="encrypt()"> <h2>Plain Text</h2> <div> <textarea ng-model="message"> 1 function aesCtrl($scope) { $scope.message = 'some msg'; $scope.encrypt = function () { $scope.message = enc($scope.message); } } aesCtrl.$inject = ['$scope']; 1
22. function aesCtrl($scope) { $scope.message = 'some msg'; $scope.encrypt = function () { $scope.message = enc($scope.message); } } aesCtrl.$inject = ['$scope']; <div ng-controller="aesCtrl"> <form ng-submit="encrypt()"> <h2>Plain Text</h2> <div> <textarea ng-model="message"> 2 2
23. function aesCtrl($scope) { $scope.message = 'some msg'; $scope.encrypt = function () { $scope.message = enc($scope.message); } } aesCtrl.$inject = ['$scope']; <div ng-controller="aesCtrl"> <form ng-submit="encrypt()"> <h2>Plain Text</h2> <div> <textarea ng-model="message"> 3 3
24. Level Up!
25. Demo Time
26. Digest Loop
27. Stimulus Model Change Watch List
28. From jQuery to AngularJS
29. Clients • Blake Gray • Ben Barnes • Lee Cho Lee Cho Name Lee Surname Cho
30. jQuery Approach Click Copy data Animate Box 1
31. jQuery Approach Click Copy data Animate Box 2
32. jQuery Approach Click Copy data Animate Box 3
33. An Angular Mind
34. Next Steps angularjs.org #angularjs GH: angular/angular-seed
35. Game Over thorben@quarterspiral.com
36. Game Over Follow me. NOW! @walski github.com/walski Need an Angular and web expert? Hire me! thorben@quarterspiral.com