AngularJS, Part 2 of 2: Single Page Application

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.

Each LearnNowOnline training course is made up of Modules (typically an hour in length). Within each module there are Topics (typically 15-30 minutes each) and Subtopics (typically 2-5 minutes each). There is a Post Exam for each Module that must be passed with a score of 70% or higher to successfully and fully complete the course.

Prerequisites

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.

Video Runtime

85 Minutes

Time to complete

232 Minutes

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)