Single Page Applications with AngluarJS Bill Wolff Rob Keiser

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

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

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

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

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

Resources AngularJS Site – – Visual Studio MVC Templates – c9c5f f-a6c295cd4f2b c9c5f f-a6c295cd4f2b – application/overview/templates/breezeangular- template application/overview/templates/breezeangular- template