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.
Prerequisites
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)