1. Single Page Applications with AngluarJS Bill Wolff Rob Keiser 10.9.13

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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

8. Step 6 – Build View Navigation setup menu markup with tags – Home page – Collection of times with ng-repeat – Collection of tracks with ng-repeat ng-class for active page – Conditional style for active page ng-href for links – Hashtag URL with #/category/slug

9. Step 7 – Configure Routing configure $routeprovider – Use action parameter Pass $route into controller listen for $routeChangeSuccess using $on – calls render function which sets variables – variable change triggers classes and views code a render function – copies required $route data to $scope

10. Step 8 – Create Views setup multiple views with ng-switch – ng-switch-when directive triggers visibility – AngularJS only processes the active parts could also use partial pages – store as HTML fragments – load on demand

11. Step 9 – Render HTML Fragments show ng-bind-html directive – requires sanitize module and link – use for markup delivered in JSON payload – code camp content has this – session descriptions have this time and track loops have similar markup – use ng-repeat

12. Step 10 – Filter Views add filter logic for each time and track view – add | filter: to ng-repeat – associate with the slug Built-in and custom filters – | uppercase converts text

13. Resources AngularJS Site – http://angularjs.org/ http://angularjs.org/ – http://docs.angularjs.org/tutorial http://docs.angularjs.org/tutorial Visual Studio MVC Templates – http://visualstudiogallery.msdn.microsoft.com/cc6 c9c5f-2846-4822-899f-a6c295cd4f2b http://visualstudiogallery.msdn.microsoft.com/cc6 c9c5f-2846-4822-899f-a6c295cd4f2b – http://www.asp.net/single-page- application/overview/templates/breezeangular- template http://www.asp.net/single-page- application/overview/templates/breezeangular- template