Location
-
Format
What’s this? Ways to train
Classroom
Live, instructor-led training in a standard, professional classroom environmentVirtual
Live, instructor-led training conducted over the internet, with hands-on labsOnline
An online, HTML5, self-paced learning experience available for all coursesOn-site
Private training for your entire team, delivered at your location, a training center, or onlineVideo classroom
Learn more about our training formats
High-definition video of our most popular courses, streamed to your laptop or personal device
-
3 Days
-
All of our private classes are customized to your organization's needs.
-
Click on the button below to send us your details and you will be contacted shortly.
Already purchased this offering? Log in
Request more information
Inquiry for: Myself My Company
By providing your contact details, you agree to our Privacy Policy
Thank You
Our learning consultant will get back to you in 1 business day
Angular 5
WHAT YOU WILL LEARN
Angular 5 was conceived as a complete rewrite
in order to fulfil the expectations of modern developers who demand fast
performance and responsiveness from their web applications. Participant will
set up working environment to have all the tools needed to start building
Angular 5 components with minimum effort. Participant will understand
TypeScript, a powerful typed superset of JavaScript that compiles to plain
JavaScript. In this course, developers will learn to use Angular 5 Directives
and to create Angular 5 Components and Services to develop applications based
on the Model-View-Controller (MVC) architecture. Developers will also explore
how to consume external APIs and data services and allow data editing by
harnessing the power of web forms made with Angular 5.
PREREQUISITES
Before attending this course, students should
have general programming experience and knowledge of HTML, CSS and JavaScript.
METHODOLOGY
This program will be
conducted with interactive lectures, PowerPoint presentation, discussion and
practical exercise.
COURSE OBJECTIVES
·
Creating components using
JSX
·
Building composite
components
·
Props, state, and controller
views
·
Working with controlled
forms
·
Routing with react-router
·
Unit Testing ReactJS
components
·
Implementing the Flux design
pattern
·
Leveraging stores and
actions
Modules
·
Overview
·
Environment Setup
·
Basic Syntax
·
Types, Variables and
Operators
·
Decision Making and Loops
·
Functions and Lambda
Expressions
·
Generics
·
Enums
·
Number and Strings
·
Arrays
·
Tuples
·
Union
·
Interface, Classes and
Objects
·
Namespaces
·
Modules
·
Ambients
·
Decorators
·
Mixins
·
Why Angular 5
·
Angular 5 Features
·
Installing and Using Angular
5
·
Creating the first Angular
Project
·
Architecture Overview
·
What is new in Angular 5
·
Summary
·
Introducing the component
·
Component Decorator
Properties
·
Template
·
Inline Template
·
Interpolation – Plain text,
Object and Array
·
Adding CSS
·
Component Starter
·
Integrating Bootstrap
·
Developing a Header
Component
·
Developing a Footer
Component
·
Developing a Product
Component
·
Summary
·
Binding Syntax
·
One-Way Output Binding
·
Property binding
·
Attribute binding
·
Binding Events
·
Binding Events Examples
·
Setting Element Properties
·
Setting Properties: Examples
·
Two-Way Binding of Input
Fields
·
Input Binding Examples
·
Summary
·
What are Directives
·
Directive Types
·
Apply Styles by Changing
Classes
·
Changing Classes – Example
·
Applying Styles Directly
·
Applying Styles Directly -
Example
·
Obsolete Directives and
Property Binding
·
Controlling Element
Visibility
·
Setting Image Source
Dynamically
·
Setting Hyperlink Source
Dynamically
·
Summary
·
Adding and Removing Elements
Dynamically
·
Looping Using ngFor
·
ngFor - Basic Syntax
·
ngFor - Full Template Syntax
·
Creating Tables with ngFor
·
ngFor Local Variables
·
ngFor Changes in the backing
data source
·
Swapping Elements with
ngSwitch
·
ngSwitch - Basic Syntax
·
ngSwitch - Full Template
Syntax
·
Summary
·
Note on Deprecated Forms
APIs
·
A Basic Angular Form
·
Binding Input Fields
·
Accessing the Form Object
·
Binding the Form Submit
Event
·
The Submit Function
·
Basic HTML5 Validation -
"required" Attribute
·
HTML5 vs. Angular Validation
·
Angular Validators
·
Angular Validation State
·
Displaying Form Validation
State
·
Displaying Field Validation
State
·
Displaying Validation State
Using Classes
·
Disabling Submit when Form
is Invalid
·
Submitting the Form
·
Binding to Object Variables
·
Additional Input Types
·
Checkboxes
·
Select(drop down) Fields
·
Rendering Options for Select
(drop down)
·
Date fields
·
Radio Buttons
·
Summary
·
What is a Service?
·
Creating a Basic Service
·
What is Dependency
Injection?
·
What Dependency Injection
Looks Like
·
Injecting Services
·
Using a Service in a
Component: Dedicated Instance
·
Using a Service in a
Component: Dedicated Instance - Example Code
·
Using onInit to Initialize
Component Data
·
Using a Shared Service
Instance
·
Dependency Injection and
@Host
·
Dependency Injection and
@Optional
·
Summary
·
What is an Observable?
·
Observable Operators
·
Creating Observables Using
Static Operators
·
What is an Observer?
·
Observer Example
·
Subject
·
Subject Example
·
EventEmitter or Observable
·
The Angular HTTP Client
·
Using The HTTP Client -
Overview
·
Setting up HTTP_PROVIDERS in
the Root Component
·
Importing Individual
Providers into Services
·
Service Using Http Client
·
Service Imports
·
The Observable object type
·
What does an Observable
Object do?
·
Making a Basic HTTP GET Call
·
Using the Service in a
Component
·
The PeopleService Client
Component
·
Client Component Code Review
·
Importing Observable Methods
·
Enhancing the Service with
.map() and .catch()
·
Using .map()
·
Using .catch()
·
Using toPromise()
·
GET Request
·
GET Request with Options
·
POST Request
·
POST Request Example
·
Reading HTTP Response
Headers
·
Summary
·
What are Pipes?
·
More on Pipes
·
Using a Built-in Pipe
·
Built-In Pipes
·
Using Pipes in HTML
·
Chaining Pipes
·
Using Pipes in JavaScript
·
Some Pipe Examples
·
Decimal Pipe
·
Currency Pipe
·
Custom Pipes
·
Using Custom Pipes
·
A Filter Pipe
·
A Sort Pipe
·
Pipe Category: Pure and
Impure
·
Pure Pipe Example
·
Impure Pipe Example
·
Summary
·
What is a Single Page
Application (SPA)
·
SPA Workflow
·
Traditional Web Application
Capabilities
·
Single Page Application
Advantages
·
SPA and Traditional Web Sites
·
SPA Challenges
·
Implementing SPA's Using
Angular 4
·
Simple SPA Using Visibility
Control
·
SPA Using Angular Components
·
SPA with Angular Components
- Switching
·
SPA with Angular Components
- The Displayed Component
·
Implement SPA Using an
Angular Component Router
Summary
·
Routing and Navigation
·
The Component Router
·
Traditional Browser
Navigation
·
Component Router Terminology
·
Setting up the Component
Router
·
Local URL Links
·
Browser pushState and
·
Routes
·
The app.routes.ts File
·
Bootstrapping Routing in
Main.ts
·
A Basic App With Routing
·
App Routes
·
App Component
·
Programmatic Navigation
·
Basic Navigation
·
Passing Data During
Navigation
·
Creating Routes with Route
Parameters
·
Navigating with Route
Parameters
·
Using Route Parameter Values
·
Retrieving the Route
Parameter Synchronously and Asynchronously
·
Query Parameters
·
Query Parameters -
queryParams
·
Query Parameters -
Navigation
·
Retrieving Query Parameters
Asynchronously
·
Problems with Manual URL
entry and Bookmarking
·
Fixing Manual URL entry and
Bookmarking
·
Summary
·
Introduction
·
Bower Package Manager
·
Managing Packages Using
Bower
·
Using Bower Packages
·
Grunt Build Manager
·
Installing Grunt Components
·
Writing a Grunt Build Script
·
Running Grunt
·
Running JSHint Task
·
Compiling Less Files
·
Compressing CSS Files
·
Gulp Build Manager
·
Gulp vs. Grunt
·
Installing Gulp Components
·
Writing a Build Script
·
Running Gulp
·
Compiling Less Files
·
Summary

Thayanithy Jegan
Has a strong career, spanning over 19 years of Technical & Management experience. Technically sophisticated professional with a pioneering career reflecting strong leadership qualifications coupled with analysing user requirements, conceptualizing capabilities, software development and successful implementation of developed solutions. Clear communication and intuitive thinking have equipped me with skills required to achieve best results. Read More
Course Reviews
0
0 Ratings