Intro to AngularJS from DCC 04/14

1. Intro to
Desert Code Camp - April 2014

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: chrisholwerda.com
twitter: @cholwerda
email: therealchrisholwerda@gmail.com
SpeakerRate: http://speakerrate.com/chrisholwerda
!

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. Why I like AngularJS
• Don’t need view model setup
• Pick a size
• Lots of support
• Easy to pick up and run with

5. What’s on the website?

6. Browser Support
Works with most modern browsers
Recent updates to Angular dropped
support for ie8
If you are below that … sad face

7. Syntax
• “ng”
• element / attribute / class /
(comment)
• {{ expression }}

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. 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. Show me some code!
Enough Already!

11. Good Resources
!
!
AngularJS website: angularjs.org
AngularJS Extras (routes and stuff)
Github Angular Seed: github.com/angular/angular-seed
Pluralsight: Introduction to AngularJS + Advanced
!