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 <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-pageapplication/overview/templates/breezeangulartemplate