Umbraco Festival 2013 - Introduction to AngularJS

Transcript

1. Awesome What’s all the fuss?
2. Pete Bacon Darwin • Computer Programmer / Dad • .NET ◦ ex-IT Consultant (Avanade / IMGROUP) ◦ Some Umbraco 4(!) • AngularJS ◦ Google Team Member ◦ Book Author ◦ AngularUI Founder Member
3. Jubilant JavaScript
4. Awesome AngularJS “What the browser would have been if it had been created for web apps.”
5. Wonderful Websites http://angularjs.org http://docs.angularjs.org http://code.angularjs.org http://github.com/angular/angular.js http://stackoverflow.com/questions/tagged/angularjs
6. Tremendous Trending
7. Dynamic Data-Binding Manageable Models <input ng-model=“myName”> Creative Curlies & Fashionable Filters {{ myBalance | currency : 2 }}
8. Delightful Directives Reliable Repeaters <ul> <li ng-repeat=”item in list”> {{item.name}} </li> </ul>
9. Delightful Directives Essential Events <button ng-click=”makeTea()”> <div ng-keypress=”buyCatFood()”> <textarea ng-blur=”saveTheWorld()”>
10. Delightful Directives Vivid visuals <div ng-show=”nameCtrl.$error”>Error!!</div> <li ng-class=”{active: item.id==activeId}”> {{item.title}} </li>
11. Sophisticated Structure Angular does MV-Whatever!
12. Sublime Scopes The glue between the Model and the View • Every HTML element has a Scope • Views access Scope properties and methods • Scopes provide data-binding between the View and the Model
13. Cultured Controllers Initialize the scope with data and logic (Code Behind) <div ng-controller=”FriendController”> <ul> <li ng-repeat=”friend in friends”> {{ friend.name }} <button ng-click=” removeFriend(friend)”>X</button> </li> </ul> <input ng-model=”newFriend”> <button ng-click=” addFriend(newFriend)”>Add</button> </div>
14. Constructive Controllers Controllers are just JavaScript functions appModule.controller(‘FriendController’, function($scope) { $scope.friends = [...]; $scope.addFriend = function(newFriend) {...}; $scope.removeFriend = function(friend) {...}; });
15. Intelligent Injection AngularJS Injects Dependencies appModule .controller(‘ComplexController’, function($scope, $http, $timeout, $log) { ... } );
16. Superb Services Services are Injectable Singleton Objects • $http: Make an AJAX request • $log: Log to the console • $timeout: Do something later • $location: Work with the browser address
17. Tremendous Testability AngularJS Does Testing! • Separation of Concerns ◦ Controllers and Services can be tested independently ◦ Views are declarative • Dependency Injection ◦ Dependencies can be mocked • Testing Tools
18. Joyful Jasmine Behaviour Driven Development (BDD) ... ish describe ‘FriendController’, -> beforeEach -> ... it ‘should add 3 friends to scope’, -> expect($scope.friends.length).toBe 3 afterEach -> ...
19. Kindhearted Karma Karma Runs Your Unit Tests in Browsers https://github.com/karma-runner/karma karma start test-config.js --browsers=Chrome
20. Powerful Protractor End to End Functional Testing for AngularJS https://github.com/angular/protractor • Protractor -> WebDriverJS -> Selenium • Simulate Interaction with your Web App
21. Buy The Book Packed with real solutions to real problems! http://www.packtpub.com/angularjs-web-application-development/book