ANGJS300: AngularJS End-to-End SPA Development

Start Date Time Days Price GTR Availability
May 01, 2017 11:00 (EST) 4 $3,900.00 Register

Please note all classes scheduled will be running:

  • 8:00AM – 4:00PM PST
  • 9:00AM – 5:00PM MST


Course Description

The course starts with an introduction to building Single Page Applications (SPA) and talks about the features AngularJS Version 1 provides. From there students learn about different aspects of the framework such as views and directives, controllers and routes, as well as factories and services. Along the way, different debugging techniques and tools are discussed, how different AngularJS components can be customized and shared with other components, and different JavaScript patterns that can be applied to applications to make them more maintainable. By the end of the class students will have walked through the process of building a Single Page Application (SPA) from end-to-end using AngularJS and be ready to apply that knowledge to applications they need to build at work.



This course is designed for JavaScript developers that are looking to build Single Page Applications using AngularJS.



Attendees must be comfortable working with JavaScript to take this class. A minimum of 6-months of hands-on JavaScript experience is recommended to get the most out of the course.


Before attending this course, students should have completed the following course or have equivalent experience.

  • JS275: JavaScript Programming


What you will learn

Upon completion of this course, you will understand:

  • Single Page Application Features

  • Key features of AngularJS

  • The Role of Modules

  • The Role of Directives in Views

  • Building Custom Directives

  • Using $scope for Data Binding

  • Techniques for Defining Controllers

  • Building Custom Filters

  • How to build re-useable data services with Factories and Services

  • Using $http to Interact with RESTful Services

  • Using AngularJS HTTP interceptors


Course Outline


1. AngularJS JumpStart

Introduction to Single Page Applications

AngularJS and SPAs

Data Binding, Directives, and Filters

Views, Controllers and Scope

Modules, Routes and Factories

2. The Customer Manager Application

Application Overview

Application Technologies

Application Structure


Web API/Entity Framework/SQL Server

3. Creating Modules and Services

The customerManager Module

Customer Manager Factory/Service Overview

The customersService

Making Ajax Calls with $http

The authService

The dataService Factory and BreezeJS

4. Defining Routes

Adding the ngRoute Dependency

Configuring Application Routes with $routeProvider

Defining Route Parameters

Adding ng-view

Securing Client-Side Routes

5. Application Controllers

AngularJS Controller Techniques

The Scope Life Cycle

Application Controllers

6. Navbar Controller and View

Navbar Functionality

The NavbarController

The Navbar View and Directives

7. Login Controller and View

Login Functionality

The LoginController

The Login View and Directives


8. Customers Controller and View

Customers View Functionality

The CustomersController

The Customers View and Directives

Paging Customers

Filtering Customers

Switching Display Modes


9. Creating Custom Directives

The Role of Directives

Creating Custom Directives

Isolate Scope

Simplifying Code with a Directive


10. Bonus – Unit Testing

AngularJS Unit Testing features

Using Karma and Jasmine

Creating a Test Suite and Specs

Using ngMock, beforeEach() and Dependency Injection

Mocking Objects


11. Bonus – Animations

Animation Overview

The ngAnimate Module

Defining Animations in CSS

Referencing Animation Classes