Learn your way! Get started

AngularJS, Part 2 of 2: Single Page Application

with expert John Culviner

Watch trailer

Course at a glance

Included in these subscriptions:

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

Release date 6/9/2014
Level Intermediate
Runtime 1h 25m
Closed captioning Included
Transcript Included
eBooks / courseware Included
Hands-on labs N/A
Sample code Included
Exams Included

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.

Learning Paths

This course is part of the following LearnNowOnline SuccessPaths™:
JavaScript Frameworks

Meet the expert

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)