Angular Developer Training – Introduction

Start date: 09/11/2020

Location: Virtual

Cost: Subsidised fee: €400

Programme overview

This 4 day course is a comprehensive introduction to the Angular framework (Angular 2 - 10). It covers
both the ES6 JavaScript syntax and Typescript needed to work with Angular. It gives practical
examples of the main Angular concepts including Components, Directives, Dependency
Injection, Pipes and Single Page Applications (SPA). Angular is a large framework and it can be
intimidating to get started with because it uses both a new language, Typescript, and has a large
range of concepts that need to be understood before you can get started. This course is the
perfect introduction for people who have worked with web applications who are embarking on a
project that requires Angular

Pre-requisites
Participants should be familiar with web application development concepts and have some
knowledge of HTML, CSS and JavaScript.

Versions
This course is applicable for Angular 2, Angular 4, Angular 5, Angular 6, Angular 7, Angular 8,
Angular 9 and Angular 10.
For Angular.js training, see our Angular.js Developer Training Course.

Course Content

The Angular Development environment
Visual Studio Code
Integrated terminal – command line interface
What is node.js?
What is the relationship between node.js and Angular?
What is npm?
Installing the Angular CLI

Introduction to Angular
What is Angular?
Angular versions
Angular hello world
ng serve
Live reloading
Understanding the project layout

The main Angular files

Understanding TypeScript
What is Typescript?
Basic javascript (ES5) features that are important for Angular development
ES6 features that are used for Angular development
Typescript features that are used in Angular

Components
What is a component?
What is a component framework?
ng generate
How do you customise / configure a component in html
How do we customise or configure components in Angular
@Input parameters

Directives
Angular template syntax
Attribute directives
Structural directives
*ngFor

Events
Angular syntax for event handling
@Output
Event emitters
Creating a custom event
Adding a custom event handler

Compound Components
Creating a compound component
Components can be nested
Create a child component
Create a parent component

Pipes
What is a pipe?
Examine the built-in pipes
Chain two pipes together
Debugging by piping an object to json

Data Binding
FormsModule
Template variables
Passing a control to an event handler
Two way data binding

Creating a more complicated component
Having two modes of operation
Using *ngIf to show two different UIs
Using data binding to read updated values
Implementing a cancel button

CSS

Understanding CSS inheritance
Component CSS encapsulation
Global styles
Adding external css frameworks – font-awesome, bootstrap

Services
The MVC (Model View Controller) family of design patterns
Separation of concerns
What is an Angular Service
Creating a data service
Using a service
Understanding dependency injection

HttpClient
RESTful web services
An external web service
Creating our own test web service
Adding HTTP support
Introduction to Observables
Asynchronous operations using Observables
Updating the data service to read from an external source

Single Page Applications
What is a Single Page Application (SPA)
Understanding the UX requirements of the Back button
Understanding the UX requirements for bookmarking a page
Introduction to routing
Angular Router
Setting up routes

Creating a working Single Page Application
Creating a project
Adding a bootstrap navigation bar
Routing using path parameters
Reading the path parameters
Adding in a data service
Master list view
Detail view

Whats new in Angular 9
This module will cover the newer features that have been added to Angular in the latest release.

To register your interest or make an enquiry please click here

Enquire Now