Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Umbraco Festival 2013 - Introduction to AngularJS

Umbraco Festival 2013 - Introduction to AngularJS

9a952bcf6fd701bb1303cd9f64cf9620?s=128

Pete Bacon Darwin

November 08, 2013
Tweet

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