![Page 1: Single Page Applications with AngluarJS Bill Wolff Rob Keiser 10.9.13](https://reader035.vdocuments.us/reader035/viewer/2022072011/56649e0c5503460f94af4cf1/html5/thumbnails/1.jpg)
Single Page Applicationswith AngluarJS
Bill WolffRob Keiser
10.9.13
![Page 2: Single Page Applications with AngluarJS Bill Wolff Rob Keiser 10.9.13](https://reader035.vdocuments.us/reader035/viewer/2022072011/56649e0c5503460f94af4cf1/html5/thumbnails/2.jpg)
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
![Page 3: Single Page Applications with AngluarJS Bill Wolff Rob Keiser 10.9.13](https://reader035.vdocuments.us/reader035/viewer/2022072011/56649e0c5503460f94af4cf1/html5/thumbnails/3.jpg)
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
![Page 4: Single Page Applications with AngluarJS Bill Wolff Rob Keiser 10.9.13](https://reader035.vdocuments.us/reader035/viewer/2022072011/56649e0c5503460f94af4cf1/html5/thumbnails/4.jpg)
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
![Page 5: Single Page Applications with AngluarJS Bill Wolff Rob Keiser 10.9.13](https://reader035.vdocuments.us/reader035/viewer/2022072011/56649e0c5503460f94af4cf1/html5/thumbnails/5.jpg)
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
![Page 6: Single Page Applications with AngluarJS Bill Wolff Rob Keiser 10.9.13](https://reader035.vdocuments.us/reader035/viewer/2022072011/56649e0c5503460f94af4cf1/html5/thumbnails/6.jpg)
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
![Page 7: Single Page Applications with AngluarJS Bill Wolff Rob Keiser 10.9.13](https://reader035.vdocuments.us/reader035/viewer/2022072011/56649e0c5503460f94af4cf1/html5/thumbnails/7.jpg)
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
![Page 8: Single Page Applications with AngluarJS Bill Wolff Rob Keiser 10.9.13](https://reader035.vdocuments.us/reader035/viewer/2022072011/56649e0c5503460f94af4cf1/html5/thumbnails/8.jpg)
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
![Page 9: Single Page Applications with AngluarJS Bill Wolff Rob Keiser 10.9.13](https://reader035.vdocuments.us/reader035/viewer/2022072011/56649e0c5503460f94af4cf1/html5/thumbnails/9.jpg)
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
![Page 10: Single Page Applications with AngluarJS Bill Wolff Rob Keiser 10.9.13](https://reader035.vdocuments.us/reader035/viewer/2022072011/56649e0c5503460f94af4cf1/html5/thumbnails/10.jpg)
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
![Page 11: Single Page Applications with AngluarJS Bill Wolff Rob Keiser 10.9.13](https://reader035.vdocuments.us/reader035/viewer/2022072011/56649e0c5503460f94af4cf1/html5/thumbnails/11.jpg)
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
![Page 12: Single Page Applications with AngluarJS Bill Wolff Rob Keiser 10.9.13](https://reader035.vdocuments.us/reader035/viewer/2022072011/56649e0c5503460f94af4cf1/html5/thumbnails/12.jpg)
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
![Page 13: Single Page Applications with AngluarJS Bill Wolff Rob Keiser 10.9.13](https://reader035.vdocuments.us/reader035/viewer/2022072011/56649e0c5503460f94af4cf1/html5/thumbnails/13.jpg)
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