Angular 8 Syllabus
Original -
* https://docs.google.com/document/d/1cUvTHxOpB9OEqfvpQ20UpXu0zJxWL9W0biyAAxR8pXw/edit
* https://docs.google.com/document/d/123O8_BSgVOayoiCpr6R6nmCT-UuJ6SWcd6mKiKZkiVA/edit
Angular Online Training Course Syllabus
Introduction to Angular8 (Duration: 1.5Hrs) Learning Objective:
First things first! What is Angular? Why would you want to learn it? This session helps with to answer this question. So many Angular versions! What’s up with them and which version does this course cover? Enough of the talking, let’s create our first Angular project and view our first app in the browser.
Topics:
∙ What is Angular?
∙ Angular vs Angular 2 vs Angular 8
∙ CLI Deep Dive & Troubleshooting
∙ Project Setup and First App
∙ What is TypeScript?
∙ Tools we use in Angular 8
Hands-On:
Creating our first Angular 8 app and modify it.
Data Bindings, ng-for, style management, pipes, build in
Directives (Duration: 3Hrs)
Learning Objective:
This session will help you understand how angular 8 use data binding, uses of build-in directives, pipes.
Topics:
∙ Creating a Dashboard
∙ ngFor & Nested ngFor
∙ Overview of Data Bindings & Working with All Types of Binding
∙ Style Handling & ngClass
∙ ngIf & ngIf-else & ng-template
∙ Built-in Pipes & Date Formats
∙ ngSwitch
Hands-on:
∙ How to use build-in Directives, build in pipes, style handling.
Modules and Services (Duration: 3Hrs)
Learning Objective:
This session will help you understand how to create custom modules , services and dependency injunction.
Topics:
∙ Creating Custom Modules
∙ Creating Services & Dependency Injection
Hands-on exercises:
∙ creating custom modules & services and how we can use dependency injunction. Authentication and security (Duration: 2Hrs) Learning Objective:
This session will help you understand why we use jwt in angular and what is jwt. Why Authentication and security is important.
Topics:
∙ User Authentication in Asp.Net Core Mvc
∙ User Authentication in Angular
∙ Understanding JWT
∙ JWT Authentication in Asp.Net Core Mvc
∙ JWT Authentication in Angular
∙ Http Interceptors
∙ Catching 401 UnAuthorized Responses using Interceptors
∙ can activate Guard
∙ Role-Based Authentication
∙ Prevent XSRF (Cross-Site Request Forgery)
∙ prevent XSS(cross-site scripting)
Hands-on Lab:
∙ how to use jwt in angular and XSRF and XSS.
Template Driven Forms (Duration: 2Hrs)
Learning Objective:
This session will help you understand what is template-driven forms and how to create it and how to validate it.
Topics:
∙ Adding CheckBox, RadioButton, DropDownList with Foreign Key
∙ Validations in Template Driven Forms
∙ Custom Validations in Template Driven Forms
∙ Cross Field Custom Validations in Template Driven Forms
∙ Async Custom Validations in Template Driven Forms with REST-API Calls Hands-on:
∙ Create Template-driven form
∙ validate forms.
Reactive Forms (Duration: 2Hrs) Learning Objective:
This session will help you understand how Reactive Forms work. Adding components in reactive forms and validation of forms.
Topics:
∙ Understanding Reactive Forms & Creating SignUp Form using Reactive Forms ∙ Adding Radio Buttons to Reactive Forms
∙ Adding Dynamic Radio Buttons to Reactive Forms
∙ Adding Dynamic DropDownList to Reactive Forms
∙ Adding CheckBox to Reactive Forms
∙ Subscribing to value changes Observable
∙ setValue, patchValue, reset
∙ Nested Form Groups
∙ Form Arrays
∙ Form Builder
∙ Validations in Reactive Forms
∙ Adding Validation Error Messages
∙ Custom Validations
∙ Cross Field Validations
∙ Submitting SignUp Form using REST API Call
∙ Async Validations with REST API Call
Hands-on:
∙ Create a simple form with input and output.
Component Communication (Duration: 2Hrs)
Learning Objective:
This session will help you understand how the parent component communicates with child component & component communication using services.
Topics:
∙ Parent To Child Communication – using Input Binding
∙ Child To Parent Communication – using Output Binding with Custom Events ∙ Parent to Child – using ViewChild
∙ Adding Dynamic DropDownList to Reactive Forms
∙ Parent to Child – using ViewChildren
∙ Component Communication using Services
∙ Custom RxJS Observables
∙ RxJS Subject
∙ RxJS BehaviorSubject
∙ Passing Content from Parent to Child
∙ Child to Grand Child – using ContentChild
∙ Child to Grand Child – using ContentChildren
∙ ElementRef
Hands-on:
∙ How two-component communicate. Rxjs Codes.
Debugging and Auto Deployment
(Duration: 1.5Hrs)
Learning Objective:
This session will help you understand how to debug angular.
Topics:
∙ Debugging the Angular Code
∙ Using Gulp for Continuous Deployment
Hands-on:
∙ How To debug the code.
Life Cycle Hooks (Duration: 2Hrs) Learning Objective:
This session will help you understand the lifecycle hooks.
Topics:
∙ Overview of Life Cycle Hooks
∙ ngOnChanges
∙ ngOnInit
∙ ngDoCheck
∙ ngAfterContentInit and ngAfterContentChecked
∙ ngAfterViewInit, ngAfterViewChecked
∙ ngOnDestroy
Hands-on:
∙ The flow of Lifecycle using code.
Pipes – Deep Dive (Duration: 2Hrs) Learning Objective:
This session will help you understand how to debug angular.
Topics:
∙ Creating a Simple Custom Pipe
∙ Parameterized Custom Pipe
∙ Creating Complex Custom Pipe
∙ Pure Pipes (vs) Inpure Pipes
∙ Client-Side Paging using Custom Pipe
∙ Async Pipe
Hands-on:
∙ How To use pipes.
Directives – Deep Dive (Duration: 2Hrs)
Learning Objective:
This session will help you understand Deep Dive into Directives.
Topics:
∙ Attribute Directives (vs) Structural Directives
∙ Custom Directives
∙ Receiving Parameters using Input Properties in Directives
∙ HostListener
∙ HostBinding
∙ Renderer2
∙ Creating Custom Structural Directive
Hands-on:
∙ Deep dive on directives using code.
Advanced Routing (Duration: 2Hrs) Learning Objective:
This session will help you understand Routing.
Topics:
∙ Route Parameters
∙ Child Routes
∙ Nested Routes in AdminModule
∙ Router Events
∙ Server-Side Logging using Router Events
Hands-on:
∙ Routes with Examples.
Animations (Duration: 2Hrs) Learning Objective:
This session will help you understand how can be use animation in Angular.
Topics:
∙ Introduction to Animations
∙ Fade Animation
∙ Slide-Up Animation
∙ Zoom-Up Animation
∙ Zoom-Left Animation
∙ Slide-Left or Right Animation
∙ Keyframe Animation
∙ Hands-on:
∙ Understand animation with example.
Dynamic Components (Duration: 2Hrs) Learning Objective:
This session will help you understand the Dynamic Component in depth.
Topics:
∙ Preparing for Dynamic Components
∙ Preparing Masters Menu Dynamically
∙ Loading Components Dynamically into Tabs
∙ Data Binding to Dynamic Components
∙ Destroying Dynamic Components
Hands-on:
∙ creating dynamic components and how to use dynamic components.
------------------------------------------------------------------
Syllabus of Angular 7 Course in Chennai
Introduction to Angular
npm install -g @angular/cli
ng new my-app
ng new my-app
19:10
cd my-app
ng serve --open
https://www.javatpoint.com/angular-7-files-explanation
To open your Angular application in VS Code, open another terminal (or command prompt) and navigate to the my-app folder and type code .:
cd my-app
code .
no need to do anything else just follow below steps -
right click on my computer (this pc).
go to properties.
click on advanced system setting.
click on environmental variable.
select path variable from system variable.
click on edit button.
add %AppData%\npm and %ProgramFiles%\nodejs\ at top of the list. 8 click on ok. ok. ok
restart your system.
after restart open visual studio code as run as administrative mode.
Enjoy...............!!!!!
What is Angular?
Angular Versions: AngularJS (vs)
package.json: This is npm configuration file. It includes details about your website's package dependencies along with details about your own website being a package itself.
package-lock.json : This is an auto-generated and modified file that gets updated whenever npm does an operation related to node_modules or package.json
environments folder: The environments folder is used to hold the environment configuration constants that help when building the angular application. The constants are defined in 2 separate .ts files (environment.ts and environment.prod.ts), where these constants are used within the angular.json file by the Angular CLI. For example, if you run the ng build command, it will build the application using the development environment settings, whereas the command ng build ?prod will build the project using the production environment settings
assets folder: This folder is a placeholder for resource files which are used in the application such as images, locales, translations etc.
index.html: This is the entry file which holds the high level container for the angular application.
styles.css:/ This is a global css file which is used by the angular application.
main.ts: As defined in angular.json file, this is the main ts file that will first run. This file bootstraps (starts) the AppModule from app.module.ts , and it can be used to define global configurations.
app folder: The app folder contains the files, you have created for app components.
app.component.css: This file contains the cascading style sheets code for your app component.
app.component.html: This file contains the html file related to app component. This is the template file which is used by angular to do the data binding.
app.component.spec.ts: This file is a unit testing file related to app component. This file is used along with other unit tests. It is run from Angular CLI by the command ng test.
app.component.ts: This is the most important typescript file which includes the view logic behind the component.
app.module.ts: This is also a typescript file which includes all the dependencies for the website. This file is used to define the needed modules to be imported, the components to be declared and the main component to be bootstrapped.
Angular 7 Components
Components are the key features of Angular. The whole application is built by using different components.
The core idea behind Angular is to build components. They make your complex application into reusable parts which you can reuse very easily.
Create Components
ng g c component_name
Use Components in users.componets.ts
<app-users></app-users>
What is interpolation & USe it
String Interpolation is a one-way databinding technique which is used to output the data from a TypeScript code to HTML template (view). It uses the template expression in double curly braces to display the data from the component to the view. String interpolation adds the value of a property from the component.
For example:
{{ data }}
For Dynamic Data
Open app.component.ts file and use the following code within the file:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Data binding example using String Interpolation';
}
Now, open app.component.html and use the following code to see string interpolation.
<h2>
{{ title }}
</h2>
Now, open Node.js command prompt and run the ng serve command to see the result.
Output:
Example:
Update the app.component.ts file with the following code:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Data binding example using String Interpolation';
numberA: number = 10;
numberB: number = 20;
}
app.component.html:
<h2>Calculation is : {{ numberA + numberB }}</h2>
You can use the same application in another way:
App.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Data binding example using String Interpolation';
numberA: number = 10;
numberB: number = 20;
addTwoNumbers() {
return this.numberA + this.numberB;
}
}
App.component.html:
<h2>Calculation is : {{ numberA + numberB }}</h2>
Button Click
Call Get Api
https://jsonplaceholder.typicode.com/posts
(here) this.postData = data
For Alert
Change console.log to alert
NGIF (.html)
<h2 *ngIf="false">
HI Test
</h2>
--------------
<h2 *ngIf="true">
HI Test
</h2>
--------------
<h2 *ngIf="showme">
HI Test
</h2>
.ts
export class AppComponent {
title = 'my-app';
showme = 'false';
}
Property Binding
export class AppComponent {
title = 'my-app';
showme = 'false';
disabled = true;
nameTxt = 'Property';
}
<input type="text" [disabled]=disabled placeholder = {{nameTxt}}>
Angular Form
Passing data From Parent to child component
ng g component users
Dynamic Style Binding
Css For True & False Both
Change Dynamic Color
Local Json
E:\@!Tutorials\@Angular Videos\@Angular 9\Angular project - 1 install and setup ( 720 X 1280 )
https://github.com/typicode/json-server
ng new resto
npm install -g json-server
Create a db.json file with some data
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
Start JSON Server
json-server --watch db.json
Now if you go to http://localhost:3000/posts/1, you'll get
{ "id": 1, "title": "json-server", "author": "typicode" }
Install postman chrome extension
Check the json url like (Get)
Post data without id
{ "title": "json-server", "author": "typicode" }
Update Data (PUT)
{ "title": "json-server", "author": "vr" }
Search Like Keyword
http://localhost:3000/posts?q=vr
Delete
Angular Setup for local development
Cmd to add curd components
E:\Projects\@Angular Proj\resto
ng g component add-resto
ng g component update-resto
ng g component list-resto
ng g component login
ng g component register
0App.component.html
<h1></h1>
<ul>
<li><a routerLink="add">Add New</a></li>
</ul>
<router-outlet></router-outlet>
Bootstrap Menu
https://getbootstrap.com/docs/4.0/components/navbar/
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Resto</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-item nav-link " routerLink="add">Add New</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" routerLink="list">list</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="login">login</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="register">register</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="update">update</a>
</li>
</ul>
</div>
</nav>
npm install bootstrap
json-server --watch db.json
Create Service
ng g service resto
The environment of Installing NodeJS, NPM
Installing Visual Studio Code
Angular CLI
Develop First Angular program using Angular CLI and Visual Studio Code.
Angular Architecture
Introduction
Basic Building Blocks of Angular Applications Angular Modules and @NgModule decorator Angular Libraries Component, Templates and
Metadata Data Binding
Directives
Services and Dependency Injection
Displaying Dynamic Data
Types of Directives
Template Expressions
String Interpolation
Built-In Directives
ngIf
ngSwitch
ngFor
vs <template>
When to use <ng-container>
Angular Components Deep Dive
What are the Components?
Components Life Cycle Hooks. Dynamic Components. Working with Model Class. Nested Components. Working with Arrays / Collection
Data Binding
Binding properties and Interpolation One-wayfinding Property Binding Event Binding
Two-way Binding
Two-way binding with NgModel Attribute Binding
Style and Class Binding
Styles Binding In Components
Style and Class Bindings
þÿBuilt-In Directives NgStyle & NgClass Using Component Styles
Special selectors
Loading Styles into Components View Encapsulation
ViewChild & ViewChildren
ContentChild & ContentChildren
Template Driven Forms
Introduction
Create the component that controls the form Create a template with the initial form layout
Bind data properties to each form input control with the model two-way data binding syntax Add the name attribute to each form input control
Add custom CSS to provide visual feedback Show and hide validation error messages Handle form submission with submitting
Disable the form submits button until the form is valid Resetting the form.
Reactive Forms
Reactive Forms Introduction
Form Controls
Form Control Properties
setValue and patchValue
Validating Form Elements
Submitting and Resetting forms
Observing and Reacting to Form Changes
Using FormBuilder
Working with Pipes
Built-in Pipes
Using parameters and chaining Pipes
Custom Pipes
Parameterized Custom Pipe
Pipes and Change Detection
Pure and Impure pipes
Changes in Pipes Syntax from 4 to 5
Custom Directives
Custom Attribute Directive
Using HostListener
Using HostBinding
Custom Validator Directive
Dependency Injection
Understanding Dependency Injection Understanding DI in Angular
Framework ReflectiveInjector
Exploring Provider
Types of Tokens
Types of Dependencies
Configuring DI using Providers
Implementing DI in Angular
Optional Dependencies
Services in Angular
Building and Injecting Custom Services
Service using another Service
Reactive Extension for JavaScript
Introduction
Observable and Observer
Reactive Operators
Http Client Service
Http client module and Http client Classes
Writing Service with Get / Add / Edit /
Delete Using Service in Component
Angular Routing
Introduction
Configuring and Navigating Parameterized routes
Nested (or) Child Routes
Router Guards & Routing Strategies
Angular Modules
AppModule as Root Module Feature modules
Lazy Loading a Module Shared Module
Performing CRUD Operations as in Realtime Angular Application.
Create an ASP.NET MVC Web API Application
Add Angular-Seed, download files and Configure Project Setup Project for Entity Framework Code First Model Add Web API Controller to perform CRUD Operations using EF. Create Angular Feature and Routing Modules
Configure Angular to use HTTP and JSON Services
Program Angular Modules to performing CRUD Operations.
Angular CLI and MVC Application
Create an Angular CLI Project
Build CLI Project
Integrate build output with MVC Application
Comments
Post a Comment