Course 487:
AngularJS End-to-End Application Development

(5 days; can also be customized to run as a 2-, 3-, or 4-day course)


Course Description

The AngularJS End-to-End Application Development course provides a hands-on look at working with the AngularJS framework. The course starts with an introduction to building Single Page Applications (SPA) and talks about the features AngularJS 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.

Learning Objectives

  • 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

Who Should Attend

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 course. A minimum of six months of hands-on JavaScript experience is recommended to get the most out of the course.

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
  • js/Express/MongoDb
  • Web API/Entity Framework/SQL Server

3. Unit Testing

  • AngularJS Unit Testing Features
  • Using Karma and Jasmine
  • Creating a Test Suite and Specs
  • Using ngMock, beforeEach(), and Dependency Injection
  • Mocking Objects

4. 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

5. Defining Routes

  • Adding the ngRoute Dependency
  • Configuring Application Routes with $routeProvider
  • Defining Route Parameters
  • Adding ng-view
  • Securing Client-Side Routes

6. Application Controllers

  • AngularJS Controllers
  • The Scope Life Cycle
  • Application Controllers

7. Navbar Controller and View

  • Navbar Functionality
  • The NavbarController
  • The Navbar View and Directives

8. Login Controller and View

  • Login Functionality
  • The LoginController
  • The Login View and Directives

9. Customers Controller and View

  • Customers View Functionality
  • The CustomersController
  • The Customers View and Directives
  • Paging Customers
  • Filtering Customers
  • Switching Display Modes

10. Creating Custom Directives

  • The Role of Directives
  • Creating Custom Directives
  • Creating a Custom Validation Directive
  • Using $http Interceptors in a Custom Directive
  • Simplifying Code with a Directive

11. Adding Animations

  • Animation Overview
  • The ngAnimate Module
  • Defining Animations in CSS
  • Referencing Animation Classes

Please Contact Your ROI Representative to Discuss Course Tailoring!