Learn your way! Get started

AngularJS, Part 2: Single Page Application

with expert John Culviner

Watch trailer

AngularJS, Part 2: Single Page Application Trailer

Course at a glance

Included in these subscriptions:

  • Dev & IT Pro Video
  • Dev & IT Pro Power Pack
  • Power Pack Plus

Release date Release date 6/9/2014
Level Level Intermediate
Runtime Runtime 1h 25m
Platform Platform Major browsers on Windows Major browsers on Windows Major browsers on Mac OSX Major browsers on Mac OSX Mobile Devices Mobile Devices
Closed captioning Closed captioning Included
Transcript Transcript Included
eBooks / courseware eBooks / courseware Included
Hands-on labs Hands-on labs N/A
Sample code Sample code Included
Exams Exams Included

Enterprise Solutions
Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More

Course description

We’ll start this course with a build out of a social media application. We’ll switch to a single page application model explaining and demonstrating the guts of exactly how to set it up and how it works. We’ll also code out multiple examples of http and resource to query restful API endpoints across the application. In order to make our application as decoupled as possible we’ll find several good use cases of using emit and broadcast messaging. Then we’ll code out a simple directive in order to maximize reuse of code for a common UX pattern. Continuing on the thought of maximizing re-use I’ll show you an open source library I’ve created called AngularAgility to reduce boilerplate code and provide rich client side validation and other advanced features like change tracking and on-navigate away handling.


This course assumes that the users have an understanding of developing web applications using HTML, ASP.NET, and JavaScript in any development environment.

Meet the expert

John Culviner John Culviner is an Independent Software Consultant specializing in JavaScript and .NET. He works extensively with AngularJS and .NET, and is a JavaScript single page application guru. John enjoys diving into new technology and finding ways to push the limits of the web. He is an author of the open source library AngularAgility, and enjoys sharing his development experiences as a speaker, instructor, and blogger.

Course outline

Single Page Application

SPA (28:22)
  • Introduction (00:28)
  • Facefolio: Front Page (00:48)
  • Facefolio: Person Detail Page (00:38)
  • Single Page Application (SPA) (02:24)
  • Facefolio File Structure (01:49)
  • Facefolio Uses Node.js (00:38)
  • Facefolio Uses Node.js (Cont.) (01:08)
  • Demo:Make Facefolio into a SPA (04:52)
  • Demo:Facefolio - index (05:21)
  • Demo: Facefolio – config SPA (04:56)
  • Demo: Facefolio - controller (05:07)
  • Summary (00:08)
SPA Continued (13:22)
  • Introduction (00:19)
  • Demo: Facefolio - status feed (05:19)
  • Demo: Facefolio - person.js (05:02)
  • Demo: Facefolio - person.html (02:23)
  • Summary (00:16)
Scope.emit and Broadcast (06:57)
  • Introduction (00:19)
  • Scope.emit/.on for Person (00:38)
  • Demo: Facefolio – S.emit/.on (03:43)
  • Scope.emit/.on (02:07)
  • Summary (00:08)
Creating a Directive (16:25)
  • Introduction (00:19)
  • Demo: Facefolio – directive (04:23)
  • Demo: Facefolio – transclude (06:07)
  • Demo: Facefolio – scope issues (05:24)
  • Summary (00:09)
Angular Agility (20:24)
  • Introduction (00:29)
  • Angular Agility (02:37)
  • AngularAgility Form Extensions (03:07)
  • Demo: GitHub Repository (02:39)
  • Demo: Form Extensions (04:00)
  • Demo: Extensions - advanced (03:44)
  • Demo: Extensions - more (03:37)
  • Summary (00:09)