SlideShare a Scribd company logo
1 of 9
Download to read offline
Page
1
Mastering Angular | Angular Project Development Training
About the Course
The Mastering Angular with Live Project course is primarily designed for UI Developer(s)/Web Developer(s) who want to
learn how to create single page web application using Angular. In this course, you will learn the Angular including versions
2 to 12 and TypeScript fundamental like modules, components, life cycle hooks, pipes, directives, services, forms
validation, classes, interface, method overloading, arrow function, REST API using express etc. that help you to build rich,
scalable, extensible and high-performance single page web application and much more.
In this course, you will learn each and every topic with the help of hands-on labs. This program includes a hands-on live
project with the implementation of recommended design patterns and practices.
Course objectives
At the completion of this course, attendees will be able to;
• Understand Typescript core and advanced concepts
• Understand Angular including versions 2 to 11, basic and advanced in-depth concepts
• Create components, services, pipe and forms validations etc.
• Implement advanced concepts like observables – RxJS, Lifecycle and change detection etc.
• Create and Consume REST services
• Writing Unit Tests using Jasmine and Karma
• Optimize web page performance
• Secure application based on user roles
• Use Angular Material for beautiful UI
• Publish their App on cloud
Who can do this course?
All professionals who are keen to develop interactive, light weight and highly extensible SPA should go for this course.
Pre-requisites
Anyone who wants to learn Mastering Angular should have a basic knowledge of JavaScript programming and HTML5.
Tools/IDE
Visual Studio Code, Angular CLI, Node.js
Page
2
Course Curriculum
Module 1
TypeScript
• Issues with Plain JavaScript
• Introduction to TypeScript
• Advantages of TypeScript
• Getting Started with TypeScript
• Setting VS Code for TypeScript
TypeScript Fundamentals
• TypeScript Data Types
• Numbers
• Strings
• Loops
Functions
• Functions
• Arrow Function
• Default and Optional Parameters
• Function overloading
Classes, Access Modifiers and Constructors
• Classes
• Access Modifiers
• Constructor
• Constructor Overloading
• Static Members
Inheritance and Interfaces
• TypeScript Inheritance
• Introduction to Interface
• Using Interfaces
Generics and Modules
• Generics
• Creating Modules
• Importing Modules
Module 2
Introduction to Angular 2 to 12
• Introduction to Angular
• Angular History
• Understanding Angular Versions
• Angular1 vs. Angular2
Page
3
Setting Up Environment
• Installing Node.js and Angular CLI
• Installing Visual Studio Code
• Useful VS Code Extensions for Angular Development
Angular CLI
• Introduction to Angular CLI
• Creating new project - ng new
• Building Project - ng build and ng serve
• Angular CLI Commands and Options
Module 3
Exploring Angular App Structure
• Understanding Angular folder structure
• Angular Initialization Process
• Angular Building Blocks
Modules and Components
• Understanding Modules
• Introduction to Component and Template
• Creating a Component
• Bootstrapping the Component
Decorators and Metadata
• Understanding Decorators
• Understanding Metadata
Databinding
• Understanding Data Binding
• Interpolation
• Property Binding
• Two-way Data Binding
• Event Binding
Directives
• Introduction to Directive
• Built in Directives - ngIf, ngFor, ngSwitch etc.
• Creating Custom Directives
• Using Custom Directive
Pipes
• Introduction to Pipes
• Built-in Pipes – lowercase, uppercase, currency
• Using third-party pipes
• Creating Custom Pipes
Page
4
Module 4
Routing
• Understanding Routing
• Defining Routes
• Understanding Location Strategies
Navigation and Route Parameters
• Adding a Navigation Bar
• Styling Active Router Links
• Navigation using code
• Route Parameters – Required, Optional and Query Params
Nested Routes and Lazy Loading
• Setting up Child or Nested Routes
• Setting up and navigating to Lazy loading module
Angular Route Guards
• Introduction to Angular Route Guards
• Types of Route Guards
• Using Route Guards
Module 5
Advanced Components
• Components Life Cycle Hooks
• Nested Components
• Data Sharing using @Input and @Output Decorators
Inheritance
• Components Inheritance
• Constructor Inheritance
• Metadata Inheritance
• Lifecycle hooks Inheritance
Angular Content Projection
• Introduction to content projection
• Reusing code using content projection
Module 6
Angular Forms and Controls
• Introduction to Angular Forms
• Angular Form Building Blocks
• Angular Forms and Forms Control States
Template Driven Form
• Understanding Template Driven Form
Page
5
• Creating Template Driven Form
• Angular form input controls
• Angular form built-in validation
• Template Driven Form validation
Model Driven Form
• Understanding Model Driven (Reactive) Form
• Creating Model Driven Form
• Creating form using Form Builder
• Reactive Form validation
• Custom Validations
• Template Driven vs. Model Driven Forms
Module 7
Debugging
• Understanding Angular Error Messages
• Debugging Code in the Browser
• Debugging Code using IDE
ReactiveX and Observables
• Introduction to ReactiveX
• Understanding Observables and Observers
• Observables Operators
• Observables vs. Promises
Services in Angular
• Understanding Angular2 Services
• Creating Services
Change Detection
• Introduction to Zone.js
• Understanding Change Detection
• Change Detection Strategies
Module 8
Angular Material
• Understanding Angular Material
• Angular Material Components
• Angular Material Layout
• Angular Material Navigation
• Angular Material Buttons
• Form Controls
Database Operations with REST Service
• Introduction to REST
• Developing REST services using Express
• REST Service CRUD Operations
Page
6
Module 9 (Self-paced)
Unit Testing
• Understanding Unit Testing
• Angular Unit Testing Framework
• Unit Testing with Jasmine and Karma
• Writing Unit Tests
Angular Unit Tests
• Unit tests for component
• Unit tests for Angular forms
• Unit Testing test for services
• Test code coverage
• Running and Debugging Unit Tests
Module 10 (Project)
Discussing Project Architecture
• Understanding Application layers
• Discussing Application Entities Properties
• Discussing Relationship among Application Entities
Developing Application Architecture
• Designing Application Architecture
• Developing REST API
• Developing User Login and Signup Page
Module 11 (Project)
Security
• Implementing Token based Authentication
• Managing User session
• Implementing Authorization
Route Protection
• Protecting a Route from Unauthorized Access
• Need of Route Protection
Developing Category, Product Operations
• Developing Category CRUD Operations
• Developing Product CRUD Operations
Product Listing
• Displaying Products to Users
• Applying Paging and Sorting
Page
7
Module 12 (Project)
Cart
• Creating Cart
• Adding Products to Cart
• Removing Products from Cart
Deployment
• Angular Hosting Options
• Hosting Angular App
Build Angular Real-Projects
Apply your coding skills to solve real-world problems. You’ll learn how to start a project from scratch by following
recommended architecture, practices and deploy to server.
Page
8
Angular Project Architecture
The primary purpose of an application architecture is to support the development life cycle of the system. Good
architecture makes the system easy to understand, easy to develop, easy to maintain, and easy to deploy. The ultimate
benefit of architecture is to minimize the lifetime cost of the system and to maximize programmer productivity.
The goal of the given architecture is to learn and implement important principles and design patterns to build various
domains applications like eCommerce, edTech, Food Delivery or other Service based industries applications.
What you will learn through project?
At the completion of project, attendees will be able to;
• Develop Angular Single Page App
• Break a project into multiple modules
• Create shopping cart
• Integrate Angular Material
• Validate User Inputs
• Implement Token based Security
• Create backed using REST Services
• Scale application for Phone, Tablets, and Laptop & Desktop
• Optimize your page performance
• Secure their application based on user roles
• Configure and Publish App.
Contact Us
• For more information about the course, visit: www.dotnettricks.com/training/masters-program/angular
• Feel free to call us at +91 9999 123 502 or email us at info@dotnettricks.com

More Related Content

What's hot

Developing a Demo Application with Angular 4 - J2I
Developing a Demo Application with Angular 4 - J2IDeveloping a Demo Application with Angular 4 - J2I
Developing a Demo Application with Angular 4 - J2INader Debbabi
 
Angular App Presentation
Angular App PresentationAngular App Presentation
Angular App PresentationElizabeth Long
 
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...Edureka!
 
Meetup SkillValue - Angular 6 : Bien démarrer son application
Meetup SkillValue - Angular 6 : Bien démarrer son applicationMeetup SkillValue - Angular 6 : Bien démarrer son application
Meetup SkillValue - Angular 6 : Bien démarrer son applicationThibault Even
 
Angular vs. AngularJS: A Complete Comparison Guide
Angular vs. AngularJS: A Complete Comparison GuideAngular vs. AngularJS: A Complete Comparison Guide
Angular vs. AngularJS: A Complete Comparison GuideCloud Analogy
 
Angular tutorial
Angular tutorialAngular tutorial
Angular tutorialRohit Gupta
 
Angular resolver tutorial
Angular resolver tutorialAngular resolver tutorial
Angular resolver tutorialKaty Slemon
 
Angular Meetup 1 - Angular Basics and Workshop
Angular Meetup 1 - Angular Basics and WorkshopAngular Meetup 1 - Angular Basics and Workshop
Angular Meetup 1 - Angular Basics and WorkshopNitin Bhojwani
 
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | EdurekaAngular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | EdurekaEdureka!
 
Introduction To Angular 4 - J2I
Introduction To Angular 4 - J2IIntroduction To Angular 4 - J2I
Introduction To Angular 4 - J2INader Debbabi
 
Talk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG BéninTalk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG BéninEzéchiel Amen AGBLA
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJSDavid Parsons
 
Angular 2 - Core Concepts
Angular 2 - Core ConceptsAngular 2 - Core Concepts
Angular 2 - Core ConceptsFabio Biondi
 
Angular interview questions
Angular interview questionsAngular interview questions
Angular interview questionsGoa App
 
What’s new in angular 12[highlights of angular 12 features]
What’s new in angular 12[highlights of angular 12 features]What’s new in angular 12[highlights of angular 12 features]
What’s new in angular 12[highlights of angular 12 features]Katy Slemon
 

What's hot (20)

Developing a Demo Application with Angular 4 - J2I
Developing a Demo Application with Angular 4 - J2IDeveloping a Demo Application with Angular 4 - J2I
Developing a Demo Application with Angular 4 - J2I
 
Angular App Presentation
Angular App PresentationAngular App Presentation
Angular App Presentation
 
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
 
Meetup SkillValue - Angular 6 : Bien démarrer son application
Meetup SkillValue - Angular 6 : Bien démarrer son applicationMeetup SkillValue - Angular 6 : Bien démarrer son application
Meetup SkillValue - Angular 6 : Bien démarrer son application
 
Angular vs. AngularJS: A Complete Comparison Guide
Angular vs. AngularJS: A Complete Comparison GuideAngular vs. AngularJS: A Complete Comparison Guide
Angular vs. AngularJS: A Complete Comparison Guide
 
Angular tutorial
Angular tutorialAngular tutorial
Angular tutorial
 
Angular resolver tutorial
Angular resolver tutorialAngular resolver tutorial
Angular resolver tutorial
 
An Overview of Angular 4
An Overview of Angular 4 An Overview of Angular 4
An Overview of Angular 4
 
Angular Meetup 1 - Angular Basics and Workshop
Angular Meetup 1 - Angular Basics and WorkshopAngular Meetup 1 - Angular Basics and Workshop
Angular Meetup 1 - Angular Basics and Workshop
 
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | EdurekaAngular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka
 
Angularjs PPT
Angularjs PPTAngularjs PPT
Angularjs PPT
 
Introduction To Angular 4 - J2I
Introduction To Angular 4 - J2IIntroduction To Angular 4 - J2I
Introduction To Angular 4 - J2I
 
Lecture 32
Lecture 32Lecture 32
Lecture 32
 
Angular 2
Angular 2Angular 2
Angular 2
 
Talk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG BéninTalk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG Bénin
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Angular 2 - Core Concepts
Angular 2 - Core ConceptsAngular 2 - Core Concepts
Angular 2 - Core Concepts
 
Angular vs react
Angular vs reactAngular vs react
Angular vs react
 
Angular interview questions
Angular interview questionsAngular interview questions
Angular interview questions
 
What’s new in angular 12[highlights of angular 12 features]
What’s new in angular 12[highlights of angular 12 features]What’s new in angular 12[highlights of angular 12 features]
What’s new in angular 12[highlights of angular 12 features]
 

Similar to Mastering angular - Dot Net Tricks

Mastering react with redux
Mastering react with reduxMastering react with redux
Mastering react with reduxGaurav Singh
 
Mastering asp.net mvc - Dot Net Tricks
Mastering asp.net mvc - Dot Net TricksMastering asp.net mvc - Dot Net Tricks
Mastering asp.net mvc - Dot Net TricksGaurav Singh
 
Angular js Online Training
Angular js Online TrainingAngular js Online Training
Angular js Online TrainingLearntek1
 
Microsoft certified azure developer associate
Microsoft certified azure developer associateMicrosoft certified azure developer associate
Microsoft certified azure developer associateGaurav Singh
 
Mastering microservices - Dot Net Tricks
Mastering microservices - Dot Net TricksMastering microservices - Dot Net Tricks
Mastering microservices - Dot Net TricksGaurav Singh
 
Angular patterns
Angular patternsAngular patterns
Angular patternsPremkumar M
 
Evolution and History of Angular as Web Development Platform.pdf
Evolution and History of Angular as Web Development Platform.pdfEvolution and History of Angular as Web Development Platform.pdf
Evolution and History of Angular as Web Development Platform.pdfiFour Technolab Pvt. Ltd.
 
Introduction to angular with a simple but complete project
Introduction to angular with a simple but complete projectIntroduction to angular with a simple but complete project
Introduction to angular with a simple but complete projectJadson Santos
 
Introduction to Protractor
Introduction to ProtractorIntroduction to Protractor
Introduction to ProtractorFlorian Fesseler
 
Single Page Applications in SharePoint with Angular
Single Page Applications in SharePoint with AngularSingle Page Applications in SharePoint with Angular
Single Page Applications in SharePoint with AngularSparkhound Inc.
 
Means stack course in pune(etlhive)
Means stack course in pune(etlhive)Means stack course in pune(etlhive)
Means stack course in pune(etlhive)sambhajimeher
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Ganesh Kondal
 

Similar to Mastering angular - Dot Net Tricks (20)

Mastering react with redux
Mastering react with reduxMastering react with redux
Mastering react with redux
 
Mastering asp.net mvc - Dot Net Tricks
Mastering asp.net mvc - Dot Net TricksMastering asp.net mvc - Dot Net Tricks
Mastering asp.net mvc - Dot Net Tricks
 
Angular js
Angular jsAngular js
Angular js
 
Angular js Online Training
Angular js Online TrainingAngular js Online Training
Angular js Online Training
 
Angular js
Angular jsAngular js
Angular js
 
Microsoft certified azure developer associate
Microsoft certified azure developer associateMicrosoft certified azure developer associate
Microsoft certified azure developer associate
 
What's new in Angular 2?
What's new in Angular 2?What's new in Angular 2?
What's new in Angular 2?
 
Mastering microservices - Dot Net Tricks
Mastering microservices - Dot Net TricksMastering microservices - Dot Net Tricks
Mastering microservices - Dot Net Tricks
 
Angular patterns
Angular patternsAngular patterns
Angular patterns
 
Evolution and History of Angular as Web Development Platform.pdf
Evolution and History of Angular as Web Development Platform.pdfEvolution and History of Angular as Web Development Platform.pdf
Evolution and History of Angular as Web Development Platform.pdf
 
Introduction to angular with a simple but complete project
Introduction to angular with a simple but complete projectIntroduction to angular with a simple but complete project
Introduction to angular with a simple but complete project
 
Introduction to Protractor
Introduction to ProtractorIntroduction to Protractor
Introduction to Protractor
 
Angular
AngularAngular
Angular
 
Introduction to Angular JS
Introduction to Angular JSIntroduction to Angular JS
Introduction to Angular JS
 
Single Page Applications in SharePoint with Angular
Single Page Applications in SharePoint with AngularSingle Page Applications in SharePoint with Angular
Single Page Applications in SharePoint with Angular
 
Means stack course in pune(etlhive)
Means stack course in pune(etlhive)Means stack course in pune(etlhive)
Means stack course in pune(etlhive)
 
Angular 14.pptx
Angular 14.pptxAngular 14.pptx
Angular 14.pptx
 
KhajavaliShaik
KhajavaliShaikKhajavaliShaik
KhajavaliShaik
 
Angular Certification Course1(12-06-2023).pptx
Angular Certification Course1(12-06-2023).pptxAngular Certification Course1(12-06-2023).pptx
Angular Certification Course1(12-06-2023).pptx
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5
 

Recently uploaded

Capitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptxCapitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptxCapitolTechU
 
DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersDATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersSabitha Banu
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxpboyjonauth
 
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17Celine George
 
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxHow to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxmanuelaromero2013
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsanshu789521
 
Hierarchy of management that covers different levels of management
Hierarchy of management that covers different levels of managementHierarchy of management that covers different levels of management
Hierarchy of management that covers different levels of managementmkooblal
 
Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...jaredbarbolino94
 
CELL CYCLE Division Science 8 quarter IV.pptx
CELL CYCLE Division Science 8 quarter IV.pptxCELL CYCLE Division Science 8 quarter IV.pptx
CELL CYCLE Division Science 8 quarter IV.pptxJiesonDelaCerna
 
Types of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptxTypes of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptxEyham Joco
 
Painted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaPainted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaVirag Sontakke
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon AUnboundStockton
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...M56BOOKSTORE PRODUCT/SERVICE
 
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Celine George
 
MARGINALIZATION (Different learners in Marginalized Group
MARGINALIZATION (Different learners in Marginalized GroupMARGINALIZATION (Different learners in Marginalized Group
MARGINALIZATION (Different learners in Marginalized GroupJonathanParaisoCruz
 
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTiammrhaywood
 

Recently uploaded (20)

Capitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptxCapitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptx
 
DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersDATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginners
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptx
 
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17
 
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxHow to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptx
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha elections
 
Hierarchy of management that covers different levels of management
Hierarchy of management that covers different levels of managementHierarchy of management that covers different levels of management
Hierarchy of management that covers different levels of management
 
ESSENTIAL of (CS/IT/IS) class 06 (database)
ESSENTIAL of (CS/IT/IS) class 06 (database)ESSENTIAL of (CS/IT/IS) class 06 (database)
ESSENTIAL of (CS/IT/IS) class 06 (database)
 
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
 
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdfTataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
 
Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...
 
CELL CYCLE Division Science 8 quarter IV.pptx
CELL CYCLE Division Science 8 quarter IV.pptxCELL CYCLE Division Science 8 quarter IV.pptx
CELL CYCLE Division Science 8 quarter IV.pptx
 
Types of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptxTypes of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptx
 
Painted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaPainted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of India
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon A
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
 
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17
 
MARGINALIZATION (Different learners in Marginalized Group
MARGINALIZATION (Different learners in Marginalized GroupMARGINALIZATION (Different learners in Marginalized Group
MARGINALIZATION (Different learners in Marginalized Group
 
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
 

Mastering angular - Dot Net Tricks

  • 1.
  • 2. Page 1 Mastering Angular | Angular Project Development Training About the Course The Mastering Angular with Live Project course is primarily designed for UI Developer(s)/Web Developer(s) who want to learn how to create single page web application using Angular. In this course, you will learn the Angular including versions 2 to 12 and TypeScript fundamental like modules, components, life cycle hooks, pipes, directives, services, forms validation, classes, interface, method overloading, arrow function, REST API using express etc. that help you to build rich, scalable, extensible and high-performance single page web application and much more. In this course, you will learn each and every topic with the help of hands-on labs. This program includes a hands-on live project with the implementation of recommended design patterns and practices. Course objectives At the completion of this course, attendees will be able to; • Understand Typescript core and advanced concepts • Understand Angular including versions 2 to 11, basic and advanced in-depth concepts • Create components, services, pipe and forms validations etc. • Implement advanced concepts like observables – RxJS, Lifecycle and change detection etc. • Create and Consume REST services • Writing Unit Tests using Jasmine and Karma • Optimize web page performance • Secure application based on user roles • Use Angular Material for beautiful UI • Publish their App on cloud Who can do this course? All professionals who are keen to develop interactive, light weight and highly extensible SPA should go for this course. Pre-requisites Anyone who wants to learn Mastering Angular should have a basic knowledge of JavaScript programming and HTML5. Tools/IDE Visual Studio Code, Angular CLI, Node.js
  • 3. Page 2 Course Curriculum Module 1 TypeScript • Issues with Plain JavaScript • Introduction to TypeScript • Advantages of TypeScript • Getting Started with TypeScript • Setting VS Code for TypeScript TypeScript Fundamentals • TypeScript Data Types • Numbers • Strings • Loops Functions • Functions • Arrow Function • Default and Optional Parameters • Function overloading Classes, Access Modifiers and Constructors • Classes • Access Modifiers • Constructor • Constructor Overloading • Static Members Inheritance and Interfaces • TypeScript Inheritance • Introduction to Interface • Using Interfaces Generics and Modules • Generics • Creating Modules • Importing Modules Module 2 Introduction to Angular 2 to 12 • Introduction to Angular • Angular History • Understanding Angular Versions • Angular1 vs. Angular2
  • 4. Page 3 Setting Up Environment • Installing Node.js and Angular CLI • Installing Visual Studio Code • Useful VS Code Extensions for Angular Development Angular CLI • Introduction to Angular CLI • Creating new project - ng new • Building Project - ng build and ng serve • Angular CLI Commands and Options Module 3 Exploring Angular App Structure • Understanding Angular folder structure • Angular Initialization Process • Angular Building Blocks Modules and Components • Understanding Modules • Introduction to Component and Template • Creating a Component • Bootstrapping the Component Decorators and Metadata • Understanding Decorators • Understanding Metadata Databinding • Understanding Data Binding • Interpolation • Property Binding • Two-way Data Binding • Event Binding Directives • Introduction to Directive • Built in Directives - ngIf, ngFor, ngSwitch etc. • Creating Custom Directives • Using Custom Directive Pipes • Introduction to Pipes • Built-in Pipes – lowercase, uppercase, currency • Using third-party pipes • Creating Custom Pipes
  • 5. Page 4 Module 4 Routing • Understanding Routing • Defining Routes • Understanding Location Strategies Navigation and Route Parameters • Adding a Navigation Bar • Styling Active Router Links • Navigation using code • Route Parameters – Required, Optional and Query Params Nested Routes and Lazy Loading • Setting up Child or Nested Routes • Setting up and navigating to Lazy loading module Angular Route Guards • Introduction to Angular Route Guards • Types of Route Guards • Using Route Guards Module 5 Advanced Components • Components Life Cycle Hooks • Nested Components • Data Sharing using @Input and @Output Decorators Inheritance • Components Inheritance • Constructor Inheritance • Metadata Inheritance • Lifecycle hooks Inheritance Angular Content Projection • Introduction to content projection • Reusing code using content projection Module 6 Angular Forms and Controls • Introduction to Angular Forms • Angular Form Building Blocks • Angular Forms and Forms Control States Template Driven Form • Understanding Template Driven Form
  • 6. Page 5 • Creating Template Driven Form • Angular form input controls • Angular form built-in validation • Template Driven Form validation Model Driven Form • Understanding Model Driven (Reactive) Form • Creating Model Driven Form • Creating form using Form Builder • Reactive Form validation • Custom Validations • Template Driven vs. Model Driven Forms Module 7 Debugging • Understanding Angular Error Messages • Debugging Code in the Browser • Debugging Code using IDE ReactiveX and Observables • Introduction to ReactiveX • Understanding Observables and Observers • Observables Operators • Observables vs. Promises Services in Angular • Understanding Angular2 Services • Creating Services Change Detection • Introduction to Zone.js • Understanding Change Detection • Change Detection Strategies Module 8 Angular Material • Understanding Angular Material • Angular Material Components • Angular Material Layout • Angular Material Navigation • Angular Material Buttons • Form Controls Database Operations with REST Service • Introduction to REST • Developing REST services using Express • REST Service CRUD Operations
  • 7. Page 6 Module 9 (Self-paced) Unit Testing • Understanding Unit Testing • Angular Unit Testing Framework • Unit Testing with Jasmine and Karma • Writing Unit Tests Angular Unit Tests • Unit tests for component • Unit tests for Angular forms • Unit Testing test for services • Test code coverage • Running and Debugging Unit Tests Module 10 (Project) Discussing Project Architecture • Understanding Application layers • Discussing Application Entities Properties • Discussing Relationship among Application Entities Developing Application Architecture • Designing Application Architecture • Developing REST API • Developing User Login and Signup Page Module 11 (Project) Security • Implementing Token based Authentication • Managing User session • Implementing Authorization Route Protection • Protecting a Route from Unauthorized Access • Need of Route Protection Developing Category, Product Operations • Developing Category CRUD Operations • Developing Product CRUD Operations Product Listing • Displaying Products to Users • Applying Paging and Sorting
  • 8. Page 7 Module 12 (Project) Cart • Creating Cart • Adding Products to Cart • Removing Products from Cart Deployment • Angular Hosting Options • Hosting Angular App Build Angular Real-Projects Apply your coding skills to solve real-world problems. You’ll learn how to start a project from scratch by following recommended architecture, practices and deploy to server.
  • 9. Page 8 Angular Project Architecture The primary purpose of an application architecture is to support the development life cycle of the system. Good architecture makes the system easy to understand, easy to develop, easy to maintain, and easy to deploy. The ultimate benefit of architecture is to minimize the lifetime cost of the system and to maximize programmer productivity. The goal of the given architecture is to learn and implement important principles and design patterns to build various domains applications like eCommerce, edTech, Food Delivery or other Service based industries applications. What you will learn through project? At the completion of project, attendees will be able to; • Develop Angular Single Page App • Break a project into multiple modules • Create shopping cart • Integrate Angular Material • Validate User Inputs • Implement Token based Security • Create backed using REST Services • Scale application for Phone, Tablets, and Laptop & Desktop • Optimize your page performance • Secure their application based on user roles • Configure and Publish App. Contact Us • For more information about the course, visit: www.dotnettricks.com/training/masters-program/angular • Feel free to call us at +91 9999 123 502 or email us at info@dotnettricks.com