Getting Started Front End Development with Angular

Getting Started Front End Development with Angular

অনেকে আছেন যারা HTML , CSS , Application Development etc. এইসব বিষয়ে কাজ করতে চান এবং নিজের ক্যারিয়ার গড়তে চান, এবং Front end Developer হিসেবে নিজেকে প্রস্তুত করতে চান, তাদের জন্যই এই কোর্সটি ।

course at a glance

  • Date : 7 Apr - 19 May 2019
  • No. of Classes/ Sessions : 12
  • Total Hours : 48
  • Last Date of Registration : 6 Apr 2019
  • Class Schedule :
    • Sunday - 5:30 PM - 9:30 PM
    • Tuesday - 5:30 PM - 9:30 PM
  • venue : PencilBox Training & Consultancy BDBL Bhaban (3rd Floor-West) 12 Kawran Bazar, Dhaka-1215 Bangladesh.

Price: TK. 15,000
(Excluding VAT & TAX)
Early Bird Registration Going on Valid Until 31 March, 2019 Taka @10000

This training is jointly organized by BITM & Pencilbox Training & Consultancy, A Training wing of bitBirds Solutions.

Training will be held in Pencilbox Training & Consultancy Premises.

Course Outline

Chapter 1. Introducing Angular

What is Angular?
Central Features of the Angular Framework
Why Angular?
Building Blocks of an Angular Application
Basic Architecture of an Angular Application
Angular vs. AngularJS
Angular Semantic Versioning
Installing and Using Angular
A Basic Angular Application
Anatomy of a Basic Application
The Main Component File
The Application Module File
The index.html File
The Bootstrap File
Running the Application
Building the Application

Chapter 2. Development Setup of Angular

Angular Development Lifecycle
Angular is Modular
What is Node.js?
Installing Node.js and NPM
Node Package Manager (NPM)
Descriptor File - package.json
Semantic Version Numbering

Package Version Numbering Syntax
Updating Packages
Uninstalling Packages
Installing Angular Packages
Angular CLI
Creating a New Project Angul

TypeScript Typings
Testing Tools
Development Web Server
Configuring the Web Server
The Build System
Configuring the Build

Chapter 3. Introduction to TypeScript and ES6 Programming Languages for Use with Angular TypeScript Syntax

Programming Editors
The Type System – Defining Variables
The Type System – Defining Arrays
The Type System – Classes & Objects

Class Constructors
Class Constructors – Alternate Form Interfaces
Parameter and Return Value Types
Working with Modules TypeScript Transpilation Var,let and const Arrow Functions
Template Strings – Variables and Expressions
Template Strings – Multiline

Generics - Class
Generics - Methods
Generics - Restricting Types
Generics - Restricting Types: Exampl

Chapter 4. Components in Angular

What is a Component?
An Example Component
The Component Class
Adding a Component to Its Module
Creating a Component Using Angular CLI
Developing a Simple Login Component
Component Template
Login Component: Add HTML
The HTML Component Template
The templateUrl property
Login Component: Add CSS Styling
Login Component: Hook Up Input Fields and Button
Login Component: Fields & Button in the Component Class Component
Decorator Properties Component Hierarch
The Application Root Component
Using a Regular Component
The Build System
Component Lifecycle Hooks
Using a Lifecycle Hook:

Chapter 5. Data and Event Binding

Binding Syntax
One-Way Output Binding
Binding Displayed Output Values
Two-Way Binding of Input Fields
Input Binding Examples
Binding Events
Binding Events Examples
Setting DOM Element Properties
Setting Properties: Examples
Passing Data into Components using @Input() Passing Data from Child to Parent using @Output() @Output() Example - Child Component @Output() Example – Parent

Chapter 6. Attribute Directives and Property

Bindings 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

Chapter 7. Structural Directives

Structural Directives
Adding and Removing Elements Dynamically
If-Else Syntax of ngIf
Declare Variables in ngIf
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

Chapter 8. Template Driven Forms

Template Driven Forms
Importing Forms Module
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
Controlling when validation is applied
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
Select (Drop Down) Fields
Rendering Options for Select (Drop Down)
Date fields
Radio Buttons

Chapter 9. Model Driven Forms

Model Driven Forms Overview
Setup for Model Driven Forms
Form Component Setup
Setup Main FormGroup
Form ControlName
FormControl Object
Getting Form Value
FormBuilder Form Initialization Validation
Built-In Validators
Controlling when validation is applied
Custom Validator
Using a Custom Validator
Useful FormGroup and FormControl Properties/Functions
Sub FormGroups - Component Class
Sub FormGroups - HTML Template
Why Use Sub FormGroups

Chapter 10. Angular Modules

Why Angular Modules?
But, We Already Had ES6 Module
Angular Built-in Modules
The Root Module
How to Create a Module
Feature Modules
@NgModule Properties
Using One Module From Another
Importing BrowserModule or CommonModule
Lazy-Loaded Modules
How to Organize Modules?
Relative Paths for Resources

Chapter 11. Services and Dependency Injection

What is a Service?
Creating a Basic Service
What is Dependency Injection?
What Dependency Injection Looks Like
Injecting Services
Dependency Injection Hierarchy Diagram
Using a Service in a Component: Dedicated Instance Injection Hierarchy - Dedicated Instance
Using a Service in a Component: Dedicated Instance - Example Code
to Initialize Component Data
Using a Shared Service Instance
Injection Hierarchy - Shared Instance
Dependency Injection and @Host
Dependency Injection and @Optional

Chapter 12. HTTP Client

The Angular HTTP Client
Using The HTTP Client - Overview
Importing HttpClientModule
Importing Individual Providers into Services
Service Using HttpClient
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
Returning a Response Object
Importing Observable Methods
Enhancing the Service with .catch()
Using .catch()
Using toPromise()
GET Request
Options Object
GET Request with Options
POST Request
POST Request Example
Reading HTTP Response Headers

Chapter 13. Pipes and Data Formatting

What are Pipes?
More on Pipes
Formatting Changes in Angular
Using a Built-in Pipe
Built-In Pipes
Using Pipes in HTML
Chaining Pipes
Using Pipes in JavaScript
Some Pipe Examples
Internationalized Pipes (i18n)
Decimal Pipe
Decimal Pipe - i18n
Currency Pipe
Currency Pipe - i18nCustom Pipes

Custom Pipe Example
Using Custom Pipes
A Filter Pipe
A Sort Pipe
Pipe Category: Pure and Impure
Pure Pipe Example
Impure Pipe Example

Chapter 14. Introduction to Single Page Applications What is a Single Page Application (SPA) SPA Workflow

Traditional Web Application Capabilities
Single Page Application Advantages
SPA and Traditional Web Sites
SPA Challanges
Implementing SPA's Using Angular
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

Chapter 15. The Angular Component Router

Routing and Navigation
The Component Router
Traditional Browser Navigation
Component Router Terminology
Setting up the Component Router
Local URL Links
Browser pushState and <base href>

The app.routes.ts File
The app.routes.ts File - Example
Importing Routing in app.module.ts
Basic App With Routing

App Routes
AppComponent - Code
AppComponent - Router Related Features
AppComponent - <router-outlet>
AppComponent - routerLinks
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
Retrieving a Route Parameter Asynchronously

Query Parameters
Query Parameters - Example Component
Query Parameters - queryParams
Query Parameters - Navigation
Retrieving Query Parameters Asynchronously Problems with Manual URL
Entry and Bookmarking Fixing Manual
URL entry and Bookmarking Summary

Chapter 16. Angular 5Features

Angular Versions
Angular 5 Overview
Upgrading to Angular 5
Creating New Projects with Angular v5
TypeScript 2.4 Support
HttpClientModule Setup
NgForOf Directive
Internationalized Pipes
Build Optimizer
AOT Compilation
Progressive Web App Support

Lab Exercises

Lab 1. Introduction to Angular
Lab 2. Introduction to TypeScript
Lab 3. Introduction to Components
Lab 4. Create the Subscription Form Component
Lab 5. Understanding Data Binding
Lab 6. One Way Data Binding in a Custom Component
Lab 7. Using Basic Angular Directives
Lab 8. Using Structural Directives
Lab 9. Template Driven Form
Lab 10. Validation of a Template Driven Form
Lab 11. Model Driven Form
Lab 12. Service and Dependency Injection
Lab 13. HTTP Client Development
Lab 14. Using Pipes
Lab 15. Basic Single Page Application Using Route


Module Getting Started Front End Development with Angular 48 Hrs

Tentative Class Start

7th April, 2019

Available Seat

10 / 13

who can join


Students should have some prior understanding of web development using, HTML, CSS and JavaScript. Experience developing with AngularJS or with prior versions of Angular (2-4) is not require.

Meet the Instructor