In this self-paced course you learn how to build elegant front-end applications with JavaScript Angular framework.

The AngularJS course provides a thorough introduction to the Angular JavaScript Framework including coverage of its latest versions. You will learn the fundamental skills necessary to build Web Applications using Angular and the MVVM (Model-View-ViewModel) design pattern. Topics include using TypeScript and ECMAScript 6 to create components, using directives and components to define UI elements, routes and screens, applying dependency injection, designing views/templates, routing, data binding and pipes, applying directives, as well as form integration and validation. You will also use the Angular services to communicate with RESTful web services and provide CRUD database operations.

Learning Objectives

You will learn the following:

  • Using TypeScript and ECMAScript 6 to create components
  • Using directives and components to define UI elements, routes and screens
  • Working effectively with component lifecycle events
  • Injecting dependencies to lessen coupling and increase testability
  • Unit testing Angular applications with Karma and Jasmine
  • Using property binding to link DOM elements with model data
  • Building Single Page Applications using Angular
  • Integrating forms with Angular
  • Organizing code using modules
  • Communicating with RESTful Web services

Topics and Subtopics

The following outline is covered in this course:

1- Overview of Angular and the MVVM Design Pattern

  • Features and Benefits of Angular
  • Angular Architecture
  • MVVM Design Pattern Overview
  • Downloading Angular
  • Referencing Angular Using a CDN
  • Choosing an IDE
  • Creating a Simple Application with Angular
  • Angular CLI

2- Working with TypeScript

  • TypeScript vs ECMAScript 6
  • TypeScript Basics
  • Types
  • Working with Built-In Types
  • Custom Types
  • Utilities
  • Using Fat Arrow Syntax
  • Template Strings
  • Setting Up and Using Node.js
  • Transpiling TypeScript into JavaScript
  • TypeScript Compiler Configuration
  • TypeScript Declaration Files
  • Installing Typings Files

3- Angular Modules

  • Using Modules to Create an Application
  • Default Modules
  • Exporting Classes, Functions and Values
  • Limiting Scope
  • Grouping Modules
  • Specifying Module Dependencies
  • Organizing Code Files
  • Module Testing
  • Best Practices

4- Angular Components

  • Component LifeCycle
  • Component Templates to Define Views
  • Using Decorators to Define MetaData
  • Component Styles
  • Encapsulation
  • ShadowDOM Style Encapsulation
  • View Style Encapsulation
  • No Encapsulation
  • ElementRef and Popups
  • ExportAs
  • Lifecycle Hooks
  • OnInit, OnDestroy, OnChanges, DoCheck
  • AfterContentInit, AfterViewInit
  • AfterContentChecked, AfterViewChecked
  • Change Detection
  • Basic Data Binding
  • One-Way Binding
  • Two-Way Binding
  • Directives

5- Using Built-In Directives and Introduction to Pipes

  • Overview of Angular Built-In Directives
  • NgIf, NgFor, NgClass, NgStyle, NgSwitch, etc.
  • Building Custom Directives
  • Overview of Angular Built-In Filters
  • Currency, Date, Json, LimitTo, Number, etc.
  • Building Custom Filters

6- Some additional Built In Pipes

  • Built-In Pipes
  • Custom Pipes
  • Adding and Using Parameters
  • Using a Pipe in a Component
  • Data Pipes

7- Defining and Consuming Services

  • Dependency Injection
  • Registering Providers with the Injector
  • Creating a Service
  • Consuming a Service
  • Mocking a Service
  • Working with Async Services and Promises

8- The Angular Animation System

  • The Web Animations API
  • States and Transitions
  • Entering and Leaving
  • Animating Properties
  • KeyFrames
  • Parallel Animation Groups

9- The HTTP Library

  • Callbacks, Promises and Observables
  • Importing the HTTP Module
  • Creating Requests
  • Processing Responses
  • Web API
  • Interacting with a RESTFul Service
  • POST Requests
  • DELETE Requests
  • PUT Requests
  • HEAD Requests

10- Angular Routing and Navigation

  • Overview of Routing
  • Client-Side vs Server-Side Routing
  • Working with the Component Router
  • Adding Router Imports
  • Performing Router Configuration
  • Using Router State
  • Redirects
  • Location Strategies
  • Routing Parameters
  • Router Lifecycle Events
  • Nesting Routes

11- Data Binding and Programming Models

  • Interpolation
  • One-Way (Unidirectional) Binding
  • Two-Way Binding
  • Event Binding
  • Observables vs. Promises
  • Working with Observables
  • Dealing with Out of Order Responses
  • Altering Observables with Reactive Extensions (Rx)
  • Reactive Programming Model
  • Organizing Code Using Domain Models

12- Building and Deploying Applications

  • Developing a Deployment Strategy
  • Picking a Package Manager
  • Using a Module Loader
  • Using Gulp for More Complex Builds
  • Adding Gulp to a Project
  • Managing Dependencies
  • Using Sourcemaps
  • Including Static Libraries and Files
  • Transpiling
  • Linting
  • Handling Static Files
  • Dealing with Internationalization Issues

13- Forms

  • Template Driven Forms
  • Input and Output Properies
  • Property and Event Binding
  • Interpolation
  • Form Components
  • Using Control and ControlGroup
  • Using the FormBuilder Factory
  • Form State
  • Form Validation
  • NgModel and NgForm Directives
  • Model Driven Forms
  • FormGroup and FormControl Classes

14- Creating Single Page Applications (SPAs)

  • SPA Characteristics and Advantages
  • SPA Potential Drawbacks
  • Structuring Templates in an SPA
  • Security Challenges and Approaches for Angular SPAs
  • When Not to Use SPA Architecture

15- Project 1

16- Project 2

17- Project 3


Basic knowledge of HTML and CSS as well as good knowledge of JavaScript.

Related Courses

Complete Training Bundle

If you are serious about learning web design and development, you should enroll in our Web Design and Development Training Bundle. This bundle covers all essential and practical topics related to web development. For $290 monthly subscription, you can have access to 300+ hours of hands-on project-based training covering all courses related to web development like JavaScript, PHP, JavaScript frameworks like React or Angular and many more. Click here to learn more.

Private Tutoring Classes

To take skills you learn from this course to the next level, taking the following tutoring classes are highly recommended. It is also a great opportunity to discuss your questions and problems related to this course with an experienced instructor:

What Is Next?

After finishing this course, you can enroll in any of following classes:

Recommended Free Courses

If you are new to the IT or programming, we suggest the following free courses:

Select a pricing plan and sign up


Paid Course

2 payments of $59/month

Paid Course

4 payments of $39/month

Paid Course