Skip to content

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.

Introduction to Angular

Course Summary

The Introduction to Angular training course is designed to teach developers the basics of using Angular for web development.

The course will begin by discussing building blocks and components of Angular including communication, lifecycle and component router. Students will then explore data bindings, directives and pipes. Finally students will evaluate programming and HTTP clients related to Angular. Throughout the course attendees will work to build out an entire web application that comes into play in an actual real life project.

Purpose
 Learn the basics of web development using Angular.
Audience
 Web Developers wanting to learn more about Angular.
Role
Software Developer - Web Developer
Skill Level
Introduction
Style
Hack-a-thon - Targeted Topic - Workshops
Duration
3 Days
Related Technologies
TypeScript | Web Development | Angular | JavaScript

 

Productivity Objectives
  • Understand the basic concepts of Angular.
  • Utilize the Angular CLI.
  • Build a web application using Angular.

What You'll Learn:

In the Introduction to Angular training course, you'll learn:
  • Introduction to Angular
    • What is Angular?
    • Why use it?
    • What about Angular 1?
    • Why TypeScript?
    • Introduction to Angular CLI
  • Building Blocks of an Angular Application
    • Modules and ngModule
    • Components, pipes, directives and services
    • Main.ts
    • Importance of using angular CLI to keep project structure updated
    • Angular builds: AOT vs JIT - What to use for production
    • Build modes and environments
  • Components
    • What are components?
    • Example of Angular component
    • Template and expressions
    • Passing data to a component with @Input()
    • Practicing with Angular CLI
  • Data bindings
    • One-way data bindings
    • Expressions
    • Two-way data bindings with ngModel
    • Template syntax
    • Template reference variables
  • Directives
    • What are directives for?
    • Different kinds of directives
    • ngFor
    • ngIf
    • ngSwitch
    • ngClass and ngStyle
    • How to create a custom directive?
    • Custom directive
  • Pipes
    • What are pipes for?
    • Examples of common Angular pipes
    • Pure and Impure pipes
    • How to create our own pipes?
  • Services and Dependency Injection
    • Difference between components and services
    • Dependency injection in Angular
    • Injector Tree
    • How to create a service?
  • Reactive Programming with RxJs Observables
    • Introduction to RxJS and Reactive Programming
    • What is an observable?
    • Writing our own Observable
    • RxJs operators
    • Examples of RxJs operators: max, merge, filter
  • HTTP Client
    • How to use the HTTP client?
    • Http Interceptor
    • Async pipe
  • Component Communication and Lifecycle
    • How do components share data?
    • Introduction to the component lifecycle
    • Lifecycle hooks
    • Change detection strategies
  • Component Router
    • What is the component router?
    • Example of component router in action
    • Child routes and route parameters
    • Guards for authentication and user rights
    • Lazy-loading
  • Forms
    • How to handle forms with Angular?
    • Template driven forms and reactive forms
    • Form validation and submission
    • Custom form validator
  • Advanced Projects and Tools
    • Progressive web apps
    • Angular Console
    • Compodoc
    • Custom Elements
    • Angular Material and CDK
    • CLI Schematics
    • Angular Universal or how to pre-compile on the server
    • Angular Augury: Debugging Angular apps in Google Chrome
    • Angular Augury
  • Testing Angular Applications
    • How to test Angular applications?
    • Karma and Jasmine
    • End to end tests with Protractor
    • Angular Test Bed
    • Mocking and stubbing with Jasmine and Angular
  • Resources and Best Practices
    • How to use angular.io (cheatsheet, etc.)
    • Style guide and best practices
    • Official Angular blog
real world content

Real-World Content

Project-focused demos and labs using your tool stack and environment, not some canned "training room" lab.
expert practitioners

Expert Practitioners

Industry experts that bring their battle scars into the classroom.
experiential learning

Experiential Learning

More coding than lecture, coupled with architectural and design discussions.
tailored outlines

Tailored Outlines

One-size-fits-all doesn't apply to training teams. That's where we come in!
“I appreciated the instructor's technique of writing live code examples rather than using fixed slide decks to present the material.”

VMware

Dive in and learn more

When transforming your workforce, it's important to have expert advice and tailored solutions. We can help. Tell us your unique needs and we'll explore ways to address them.

Let's chat

By filling out this form and clicking submit, you acknowledge our privacy policy.