Angular 4 Training

Angular 4 Course:
Angular is the next big deal. Being the successor of the overwhelmingly successful Angular.js framework it’s bound to shape the future of frontend development in a similar way. The powerful features and capabilities of Angular allow you to create complex, customizable, modern, responsive and user friendly web applications. Angular 4 simply is the latest version of the Angular framework and simply an update to Angular 2. This course starts from scratch, you neither need to know Angular 1 nor Angular 2! (Angular 4 simply is the latest version of Angular 2) Angular is faster than Angular 1 and offers a much more flexible and modular development approach. After taking this course you’ll be able to fully take advantage of all those features and start developing awesome applications immediately. Due to the drastic differences between Angular 1 and Angular (=Angular 4) you don’t need to know anything about Angular.js to be able to benefit from this course and build your futures projects with Angular. Angular 4 training starts from scratch, you neither need to know Angular 1 nor Angular 2! (Angular4 simply is the latest version of Angular 2)

Angular 4 Course Curriculum

1. Angular 4 basics

Module Introduction

How an Angular App gets Loaded and Started

Components are Important!

Creating a New Component

Understanding the Role of AppModule and Component Declaration

2. Using Custom Components

Creating Components with the CLI & Nesting Components

Working with Component Templates

Working with Component Styles

Fully Understanding the Component Selector

3. What is Databinding?

String Interpolation

Property Binding

Property Binding vs String Interpolation

Event Binding

Bindable Properties and Events

Passing and Using Data with Event Binding

Two-Way-Databinding

Important: FormsModule is Required for Two-Way-Binding

Combining all Forms of Databinding

Understanding Directives

Using ngIf to Output Data Conditionally

Enhancing ngIf with an Else Condition

Styling Elements Dynamically with ngStyle

Applying CSS Classes Dynamically with ngClass

Outputting Lists with ngFor

Getting the Index when using ngFor

4. Components & Databinding Deep Dive

Module Introduction0

Splitting Apps into Components

Property & Event Binding Overview

Binding to Custom Properties

Assigning an Alias to Custom Properties

Binding to Custom Events

Assigning an Alias to Custom Events

Custom Property and Event Binding Summary

Understanding View Encapsulation

5. Directives Deep Dive

Module Introduction

ngFor and ngIf Recap

ngClass and ngStyle Recap

Creating a Basic Attribute Directive

Using the Renderer to build a Better Attribute Directive

More about the Renderer

Using HostListener to Listen to Host Events

Using HostBinding to Bind to Host Properties

Binding to Directive Properties

What Happens behind the Scenes on Structural Directives

Building a Structural Directive

Understanding ngSwitch

6. Using Services & Dependency Injection

Module Introduction

Why would you Need Services?

Creating a Logging Service3

Injecting the Logging Service into Components

Creating a Data Service6

Understanding the Hierarchical Injector

How many Instances of Service Should It Be?

Injecting Services into Services

Using Services for Cross-Component Communication

7. Changing Pages with Routing

Module Introduction

Why do we need a Router?

Understanding the Example Project

Setting up and Loading Routes

Navigating with Router Links

Understanding Navigation Paths

Styling Active Router Links

Navigating Programmatically

Using Relative Paths in Programmatic Navigation

Passing Parameters to Routes

Fetching Route Parameters

Fetching Route Parameters Reactively

An Important Note about Route Observables

Passing Query Parameters and Fragments

Retrieving Query Parameters and Fragments

Practicing and some Common Gotchas

Setting up Child (Nested) Routes

Using Query Parameters - Practice

Configuring the Handling of Query Parameters

Redirecting and Wildcard Routes

Important: Redirection Path Matching

Outsourcing the Route Configuration

An Introduction to Guards

Protecting Routes with canActivate

Protecting Child (Nested) Routes with canActivateChild

Using a Fake Auth Service

Controlling Navigation with canDeactivate

Passing Static Data to a Route

Resolving Dynamic Data with the resolve Guard

Understanding Location Strategies

8. Understanding Observables

Module Introduction

Analyzing a Built-in Angular Observable

Building & Using a First Simple Observable

Building & Using a Custom Observable from Scratch

Unsubscribe!

Where to learn more

Using Subjects to Pass AND Listen to Data

Understanding Observable Operators

9. Handling Forms in Angular Apps

Module Introduction

Why do we Need Angular's Help?

Template-Driven (TD) vs Reactive Approach

TD: Creating the Form and Registering the Controls

TD: Submitting and Using the Form

TD: Understanding Form State

TD: Accessing the Form with @ViewChild

TD: Adding Validation to check User Input

Built-in Validators & Using HTML5 Validation

TD: Using the Form State

TD: Outputting Validation Error Messages

TD: Set Default Values with ngModel Property Binding

TD: Using ngModel with Two-Way-Binding

TD: Grouping Form Controls

TD: Handling Radio Buttons

TD: Setting and Patching Form Values

TD: Using Form Data

TD: Resetting Forms

10. Introduction to the Reactive Approach

Reactive: Setup

Reactive: Creating a Form in Code

Reactive: Syncing HTML and Form

Reactive: Submitting the Form

Reactive: Adding Validation

Reactive: Getting Access to Controls

Reactive: Grouping Controls

Reactive: Arrays of Form Controls (FormArray)

Reactive: Creating Custom Validators

Reactive: Using Error Codes

Reactive: Creating a Custom Async Validator

Reactive: Reacting to Status or Value Changes

Reactive: Setting and Patching Values

11. Using Pipes to Transform Output

Introduction & Why Pipes are Useful

Using Pipes

Parametrizing Pipes

Where to learn more about Pipes

Chaining Multiple Pipes

Creating a Custom Pipe

Parametrizing a Custom Pipe

Example: Creating a Filter Pipe

Pure and Impure Pipes (or: How to "fix" the Filter Pipe)

Understanding the "async" Pipe

12. Making Http Requests

Introduction & How Http Requests Work in SPAs

Example App & Backend Setup

Sending Requests (Example: POST Request)

Adjusting Request Headers

Sending GET Requests

Sending a PUT Request

Transform Responses Easily with Observable Operators (map())

Using the Returned Data

Catching Http Errors

Using the "async" Pipe with Http Requests

13. Authentication & Route Protection in Angular Apps

Module Introduction

How Authentication Works in Single-Page-Applications

More about JWT

Creating a Signup Page and Route

Setting up the Firebase SDK

Signing Users Up

Signin Users In

Requiring a Token (on the Backend)

Sending the Token

Checking and Using Authentication Status

Adding a Logout Button

Route Protection and Redirection Example

Possible Improvements

14. Deploying an Angular App

Module Introduction

Deployment Preparations and Important Steps

Example: Deploying to AWS S3

15. Bonus: TypeScript Introduction (for Angular 2 Usage)

Introduction

Using Types

Classes

Interfaces

Generics

Wrap up & Modules

Deep dive into TypeScrip

Frequently Asked Questions

What are the modes of training for "Angular 4" course?

This "Angular 4" course is an instructor-led training (ILT). The trainer travels to your office location and delivers the training within your office premises. If you need training space for the training we can provide a fully-equipped lab with all the required facilities. The online instructor-led training is also available if required. Online training is live and the instructor's screen will be visible and voice will be audible. Participants screen will also be visible and participants can ask queries during the live session.

Will I be provided with any study material during the "Angular 4" training?

Participants will be provided "Angular 4"-specific study material. Participants will have lifetime access to all the code and resources needed for this "Angular 4". Our public GitHub repository and the study material will also be shared with the participants.

What is the pedagogy of zekeLabs?

All the courses from zekeLabs are hands-on courses. The code/document used in the class will be provided to the participants. Cloud-lab and Virtual Machines are provided to every participant during the "Angular 4" training.

What is the duration of this course?

The "Angular 4" training varies several factors. Including the prior knowledge of the team on the subject, the objective of the team learning from the program, customization in the course is needed among others. Contact us to know more about "Angular 4" course duration.

What would be the venue for the "Angular 4" training?

The "Angular 4" training is organised at the client's premises. We have delivered and continue to deliver "Angular 4" training in India, USA, Singapore, Hong Kong, and Indonesia. We also have state-of-art training facilities based on client requirement.

Who is the trainer for "Angular 4" training?

Our Subject matter experts (SMEs) have more than ten years of industry experience. This ensures that the learning program is a 360-degree holistic knowledge and learning experience. The course program has been designed in close collaboration with the experts working in esteemed organizations such as Google, Microsoft, Amazon, and similar others.

Can we customize this course based on our requirements?

Yes, absolutely. For every training, we conduct a technical call with our Subject Matter Expert (SME) and the technical lead of the team that undergoes training. The course is tailored based on the current expertise of the participants, objectives of the team undergoing the training program and short term and long term objectives of the organisation.

How can I reach out to you if I have any other queries regarding the "Angular 4" course?

Drop a mail to us at [email protected] or call us at +91 8041690175 and we will get back to you at the earliest for your queries on "Angular 4" course.