Introduction to Angular

Learn Angular 18 and build responsive, enterprise-strength applications that run smoothly on desktop and mobile devices with this Angular training course. Angular provides a robust framework that facilitates the development of richly interactive applications running on multiple platforms. Gain experience building components, creating directives, modularizing applications, and building template-driven forms. 

You'll be given remote access to a preconfigured virtual machine for you to perform your hands-on exercises, develop/test new code, and experiment with the same software used in your course. This course is compatible with older versions of Angular.

Introduction to Angular Benefits

• In this Angular Training course, you will learn how to:

  Create device-independent Angular applications.

  Develop Components using TypeScript, Templates, and Decorators.

  Consume REST services using Observables.

  Modularize applications with the Component Router.

  Capture and validate input with template-driven forms.

  Leverage continued support with after-course one-on-one instructor coaching and computing sandbox.

• Angular Training Course Prerequisites 

  Before attempting this course, attendees should have the following: 

  • Experience developing web pages at the level of JavaScript Essentials for Web Development.
  • Knowledge of HTML (HyperText Markup Language) and CSS (Cascading Style Sheets).

Angular Training Course Outline

Module 1: Angular Introduction

Architectural overview 

• Simplifying the development of complex modern applications
• The organization of an Angular app
• Supporting multiple client devices
• Configuring an Angular development environment
• Bootstrapping your first Angular application

Getting started with TypeScript

• Transpiling TypeScript to JavaScript
• Building an app with TypeScript

Module 2: Constructing User Interface (UI) Components

Defining components

• Structure of a component
• Introducing the component hierarchy
• Declaring metadata with the @Component decorator
• Controlling HTML5 generation with Templates
• Displaying repeating data with @for blocks
• Conditional generation of DOM content

Debugging techniques and strategies

• Interpreting framework error messages
• Exploring the component hierarchy with Angular Dev Tools

Reducing code complexity with Dependency Injection (DI)

• Principles of DI
• Creating loosely coupled applications
• Configuring providers and declaring Injectables
• Satisfying dependencies with Provider metadata

Module 3: Testing Angular Components & Functionality

Structuring test strategies

• Unit testing vs. integration testing
• Working with mock Angular components
• Asynchronous testing with Typescript arrow functions

Leveraging 3rd party tools

• Defining tests with Jasmine
• Automating tests with Angular CLI (command line interfaces) and Karma
• Building and running a Cypress Integration test

Module 4: Adding Interactivity to Your Applications

Coordinating Component interaction

• Passing data from parent to child with Input bindings
• Listening for property changes with ngOnChanges
• Binding a model to display with interpolation

Managing events

• Detecting and responding to user interaction
• Capturing browser events
• Emitting custom events to trigger behavior

Module 5: Navigation and Data Transformation

Creating modular applications

• Controlling application flow with the Component Router
• Building Feature Modules
• Parameterizing routes for dynamic navigation

Manipulating data with Pipes

• Formatting dates for display
• Chaining pipes to combine functionality
• Filtering data with custom Pipes

Module 6: Building Interactive Forms

Displaying and capturing data

• Developing forms with ngFormModel and FormBuilder
• Differentiating Template Driven and Reactive forms
• Two-way binding between input controls and data model

Validating form input

• Leveraging HTML5 and custom validation
• Providing user feedback from validators

Module 7: Managing Asynchronous Behavior

Keeping the App Responsive

• Subscribing to Observables
• Converting stream data types with the Observable map function
• Optimizing change detection with immutability and onPush

Interacting with a Web APIs

• Exchanging data with the HTTP (HyperText Transfer Protocol) object
• Bidirectional communication using Web Sockets
• Gracefully handling errors

Module 8: Extending Angular Capabilities

• Creating a custom styling directive 
• Incorporating Angular Material Components
• Customising Material themes
• Improving layout with Sidenav and Cards