Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to AngularJS from DCC 04/14


Published on

Intro to AngularJS from DCC 04/14

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Intro to AngularJS from DCC 04/14

  1. 1. Intro to Desert Code Camp - April 2014
  2. 2. About Me Chris Holwerda! Architect and developer for 15+ years in the financial, money codes, and credit card processing industry. MasterCard + PCI Compliance (Payment Card Industry) blog: twitter: @cholwerda email: SpeakerRate: !
  3. 3. What is AngularJS? • Google • MVC • Opinionated • Extends html vocabulary • Dependency Injection • DOM object binding - don’t manipulate dom directly! • 2 way binding • Routing • Testable • Directives (Custom)
  4. 4. Why I like AngularJS • Don’t need view model setup • Pick a size • Lots of support • Easy to pick up and run with
  5. 5. What’s on the website?
  6. 6. Browser Support Works with most modern browsers Recent updates to Angular dropped support for ie8 If you are below that … sad face
  7. 7. Syntax • “ng” • element / attribute / class / (comment) • {{ expression }}
  8. 8. Directives Event Directives! ngClick ngDblClick ngMousedown ngMouseenter ngMouseleave ngMouseOver nbMouseUp ngChange Other Directives! ngApp ngBind ngBindTemplate ngBindHtml ngBindHtmlUnsafe ngHide ngShow ngCloak ngStyle ngClass ngClassEven ngClassOdd ngDisabled ngChecked ngMultiple ngReadOnly ngSelected ngForm ngSubmit ngHref ngSrc ngNonBindable
  9. 9. Services $http (ajax) $resource (restful) $q (promise/deferred execution) $anchorScroll (scrolls to element matching hashtag) $cacheFactory (in memory cache) $compile (markup compiler) $parse (eval expression return function) $locale (localization of date time formats) $timeout (of action) $exceptionHandler! $filter $cookieStore (access cookies) $interpolate (override ng internals) $log (log to console) $rootScope (1 per app, many child scopes) ! ! Limit these Dom services $window (Dom) $document (Dom) $rootElement (Dom - ng root element) ! $route (routes the page in app) $routeParams (parameters for routing) $location (location info and navigate
  10. 10. Show me some code! Enough Already!
  11. 11. Good Resources ! ! AngularJS website: AngularJS Extras (routes and stuff) Github Angular Seed: Pluralsight: Introduction to AngularJS + Advanced !