whitschrader / wdi6-angular-intro

Intro to AngularJS in seven steps

##Goals

• Learn how to build a basic Angular App
• Understand Angular MVVM and data-binding
• Confidently use Angular expressions and directives
• Learn how to create Angular controllers

##Intro

How did we get here?

##Step 1 - setup

Fork:

https://github.com/aikalima/wdi6-angular-intro

... and clone to your local workspace. cd into workspace.

Fire up webserver:

 node web-server.js

Got to:

http://localhost:8000/app/index.html

##Step 2 - expressions

git checkout two

Include angular library in index.html:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>

ng-app: auto-bootstrap an angular application

http://docs.angularjs.org/api/ng/directive/ngApp	

Angular expressions:

http://docs.angularjs.org/guide/expression

Data binding:

http://docs.angularjs.org/guide/databinding

Where are my templates?

http://docs.angularjs.org/guide/templates

##Step 3 - directives and filter

Directives

http://docs.angularjs.org/guide/directive

http://www.cheatography.com/proloser/cheat-sheets/angularjs/

Filter

http://docs.angularjs.org/api/ng/filter/filter

##Step 4 - loops

ngRepeat

http://docs.angularjs.org/api/ng/directive/ngRepeat

Filter on data sets

##Step 5 - controller

Where's the JavaScript? Controller ...

http://docs.angularjs.org/guide/controller

Scope. The glue between model and view.

http://docs.angularjs.org/guide/scope

##Step 6 - events

Events

http://tutorials.jenkov.com/angularjs/events.html

Watching models

http://docs.angularjs.org/api/ng/type/$rootScope.Scope

layout example: ng-class

http://docs.angularjs.org/api/ng/directive/ngClass

##Step 7 - modules

Modules and module injection

http://docs.angularjs.org/guide/module

Custom Modules: A date fomatter