Single Page Applications with AngluarJS Bill Wolff Rob Keiser 10.9.13

Lab Agenda • • • Tonight is all HTML5, JS, CSS3 – No C# or .NET for this one Use Visual Studio, WebMatrix, or NotePad++ 10 step program – Start with one file rendering one page/view – Split work into multiple files – Wire up JSON feed from phillydotnet.org

– Create multiple views with hashtag routes

Step 1 – Make a Web Site • • • • create web site single html file add title in heading simple markup with placeholders – proves that markup validates as html – no harm to the DOM

Step 2 – Link AngularJS from CDN • • • • add script links to bottom – explain location in DOM use Google CDN – show CDN distribution and versions add

ng-app

directive 2-3 lines hello phillydotnet – substitute in body – Substitute in title to show flexibility

Step 3 – Code a Controller • • • • add script section with simple

ng-controller

– explain directives – explain scopes add

$scope

variable to fill in some data use a button to call function with

ng-click

add style section with some formatting

Step 4 – Turn into Application • • break into 3 files – index.html

– script.js

– style.css

edit script to make app module –

angular.module

and

app.controller

– service section or factory – show injection points

Step 5 – Retrieve JSON Data • • • • show PDN api and JSON structure explain cross site scripting and use of jsonp – keep it light implement code to retrieve data with

$http

– show result in browser tool network capture add simple loop

ng-repeat

directive – show track names – show camp name and date

Step 6 – Build View Navigation • • • setup menu markup with