single page applications with angluarjs bill wolff rob keiser 10.9.13
TRANSCRIPT
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