Single Page Applicationswith AngluarJS

Bill WolffRob 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 $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– http://angularjs.org/– http://docs.angularjs.org/tutorial

• Visual Studio MVC Templates– http://visualstudiogallery.msdn.microsoft.com/cc6

c9c5f-2846-4822-899f-a6c295cd4f2b– http://www.asp.net/single-page-application/overv

iew/templates/breezeangular-template