home > training > ANG350: In-Depth Introduction to Angular

193 Student Comments

In-Depth Introduction to Angular Training Course

ANG350

$3,195

  • 5 Days
  • Replay™ Class Recordings Included

Interested in scheduling a date for this course?
Request A Date

This course replaces the following:
ANGJS300: AngularJS Version 1
ANG315: Angular and TypeScript Single Page Application (SPA) Development
TYPE315: TypeScript Development Workshop
ANGBNDL: TYPE315 and ANG315 Course Bundle (5-Days)

x
Course:
  • This field is for validation purposes and should be left unchanged.

Course Description

This course introduces the fundamental concepts behind Angular, one of the most popular web SPA frameworks. Angular has major revisions every 6 months and this course is kept up to date to highlight and take advantage of what is new in Angular.

This course ensures students understand the fundamentals of creating custom components and the architecture and layout of Angular projects. This course addresses common questions beginners have on project structure and design decisions. Best practices are taught to avoid occurrences of memory leaks or potential performance issues.

Students build applications by following directions, and also from scratch giving students confidence in creating fully working applications from start to finish.

Outline

Overview of Course and Angular Development

  • An Overview of Angular
  • Course Logistics
  • Using Git to get the course labs and demos
  • Basics of VS Code
  • Creating a branch for your Angular work

Creating and Exploring Angular Projects

  • ES6 Syntax, Modules and TypeScript
  • Using Angular CLI to create new projects
  • Overview of Angular project files
  • Use of decorators, root module and component
  • Structural Files to build Angular projects
  • How Angular starts up
  • Modifying starter projects
  • Adding Bootstrap as a project dependency
  • Changing the default port and favicon

Data Binding in Components

  • Creating more components
  • What makes up a Component decorator
  • Type Checking Data
  • Data Binding using {{interpolation}} and [property binding]
  • Using template expressions
  • Debugging Angular Apps with Angular Augury
  • A Overview of Change Detection

Passing Data & Event Binding

  • Reviewing properties of @NgModule
  • Passing data from Parent to Child with @Input()
  • Binding Events
  • Using @Output() to call from child to parent

Using Directives

  • Using Built-in Directives
  • Using Structural Directives: *ngFor *nglf *ngSwitch
  • Optimizing rendering of data
  • Bonus: Adding Style to Components
  • Bonus: Displaying code with ngNonBindable

Using and Creating Pipes

  • Using built-in pipes to transform data
  • currency, decimal, date, uppercase, lowercase
  • Passing parameters to pipes
  • Debugging with JSON pipe
  • Creating custom pipes

Understanding Change Detection and Lifecycle hooks

  • Changing Detection strategies: Default and OnPush
  • Demonstration of lifecycle hooks being called
  • Preventing memory leaks with OnDestroy

Services, HttpClient and Observables

  • Creating services
  • How to register services with providers
  • Dependency injection via constructors
  • How to make API calls using HttpClient
  • Working with Observables and RxJS

Leveraging Routing Features

  • Setup Basic Routing and feature modules
  • How to navigate between routes
  • How to style active routes using a directive
  • How to configure Parameterized Routes in our route definition object
  • Use Lazy Loading
  • Configuring Child Routes
  • Using Route Guards to prevent navigation to/from components

Working with Forms

  • Comparing differences between template-driven and reactive forms
  • Creating two-way data bindings with ngModel
  • Creating and using template reference variables
  • Handling form validation with Angular

Unit Testing in Angular

  • Creating a unit test suite with Karma, Jasmine, and TypeScript
  • Writing isolated unit tests for pipes and services
  • Configuring TestBed
Audience

Students who wish to gain a fundamental understanding of Angular components and modules and wish to create their own Angular applications from a set of requirements.

Prerequisites

This is a hands-on programming class. Attendees must have previous working
experience with web development.

Equivalent knowledge which includes working with VS Code extensions and shortcuts, HTML5 form elements and attributes, JavaScript / EcmaScript 6 (let / const, backticks, spread operators, ES6 modules).

CSS selectors is helpful, but not required for training.

What You Will Learn
  • Use TypeScript, ES6 notations and Angular CLI to create apps
  • Create components and use data binding, pipes & directives in templates
  • Utilize event binding and component communications
  • Create Services and use HttpClient to make AJAX calls
  • Work with the Angular Router
  • Differentiate between Reactive and Template Driven Forms
  • Introduce Unit Testing in Angular
Student Comments (193)
Comments about the Instructor
"Dan was an excellent instructor and made the experience enjoyable."
September 27, 2019 | ANG315 Student
Comments about the Instructor
"Dan was very knowledgeable and super helpful with every question."
September 27, 2019 | ANG315 Student
Comments about the Instructor
"This is my 3rd course with Dan and it's always a blessing to have him as the instructor."
June 21, 2019 | ANG315 Student
Comments about the Instructor
"Dan is fantastic one of the best training course I have ever taken."
June 21, 2019 | ANG315 Student
Comments about the Courseware
"Dan added a lot of extra tips on how to use Angular, which I feel will come extremely handy in the future."
June 21, 2019 | ANG315 Student
Load More Comments