Intro to AngularJS

Justin McMurdie

@JustinMcMurdie
+JustinMcMurdie
github.com/TheMcMurder

Attribution


Big thanks to Dave Geddes and Kent Dodds for the original slides and ng-workshop repo!

@geddski   |   +Dave Geddes   |   github.com/geddski

@kentcdodds   |   +KentCDodds   |   github.com/kentcdodds


Some graphics from the ng-conf keynote:  http://goo.gl/hnjLZk

Miško Hevery & Brad Green 

Our Sponsor:

Other Frameworks

AngularJS is not alone


And more... But I love Angular

What/Why AngularJS?


IWeb


 HTML?


IHTML!


"Angular is not a framework... it's a better browser"

-Miško Hevery

How popular is it?


Crazy Popular!


Trend Graph: http://goo.gl/QR6dZq

Strong Community


Let's get Started!

Install:

nodejs.org


git-scm.com

LET'S GET STARTED!

Run

  1. npm install -g http-server
  2. git clone https://github.com/TheMcMurder/ng-workshop.git
  3. cd ng-workshop
  4. http-server

Tip: You may need to run #1 as "sudo" (sudo npm install -g http-server)

Go to localhost:8080 and if you see "Feedback" at the top, you're good to go!

Templates


Let's do it!


run: git checkout templates -f

Modules


Let's Do it!


run: git checkout modules -f

Directives


Directives

ng-repeat
ng-view
ng-show
ng-hide
ng-click
etc.

Let's Do It!


run: git checkout directives -f

Let's Make Our Own!


run: git checkout directives-custom -f

Filters


date, currency, number, etc...

Let's Do It!


run: git checkout filters -f

Let's Make Our Own!


run: git checkout filters-custom -f

Controllers


Controllers + Scope


Let's Do It!


run: git checkout controllers -f

Services


 

Services

$http
$animate
$location
$compile
$log
etc.

Let's Do it!


run: git checkout services -f

Third-Party-Modules


AngularFire


Let's Do It!


run: git checkout angularfire -f

Homework


http://docs.angularjs.org/guide/overview
http://egghead.io


Build Things

Thanks!


Justin McMurdie

@JustinMcMurdie
+JustinMcMurdie
github.com/TheMcMurder
McMurdie.net

Intro to AngularJS

By themcmurder

Intro to AngularJS

A simple introduction to AngularJS for new people. This presentation isn't super useful on its own. It's useful to have someone explain the concepts to you, and to follow along. Attribution for the original presentation goes to Dave Geddes.

  • 510