Angular Developer Training - Introduction

Course Description

This course is a comprehensive introduction to the Angular framework up to the latest version. 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.
5 Days
€1750.00
 

Prerequisites

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 to the latest version.
For Angular.js training, see our Angular.js Developer Training Course.

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

Angular is under steady development, this module will cover the newer features that have been added to Angular in the latest release.

AngularJavaScriptMEANWeb ProgrammingModern Web DevelopmentWeb DevelopmentFront End Web DevelopmentFullstack Web DevelopmentTypeScript