Single Page Applications with AngluarJS

Single Page Applicationswith 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 <nav> 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 $routeinto 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 • http://angularjs.org/ • http://docs.angularjs.org/tutorial • Visual Studio MVC Templates • http://visualstudiogallery.msdn.microsoft.com/cc6c9c5f-2846-4822-899f-a6c295cd4f2b • http://www.asp.net/single-page-application/overview/templates/breezeangular-template

Single Page Applications with AngluarJS