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
1
Page
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
2
Page
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
Exploring Angular App Structure
• Understanding Angular folder structure
• Angular Initialization Process
• Angular Building Blocks

Module 3
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
3
Page
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
Debugging
• Understanding Angular Error Messages
• Debugging Code in the Browser
• Debugging Code using IDE

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
Change Detection
• Introduction to Zone.js
• Understanding Change Detection
4

• Change Detection Strategies

Page
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
• 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
ReactiveX and Observables
• Introduction to ReactiveX
• Understanding Observables and Observers
• Observables Operators
• Observables vs. Promises
Services in Angular
• Understanding Angular2 Services
• Creating Services
Database Operations with REST Service
• Introduction to REST
• Developing REST services using Express
• REST Service CRUD Operations

Module 8 (Self-paced)
Unit Testing
• Understanding Unit Testing
• Angular Unit Testing Framework
• Unit Testing with Jasmine and Karma
• Writing Unit Tests
5
Page
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 9 (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 10 (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

Module 11 (Project)
Product Listing
• Displaying Products to Users
• Applying Paging and Sorting
Cart
• Creating Cart
• Adding Products to Cart
• Removing Products from Cart
Deployment
• Angular Hosting Options
6

• Hosting Angular App

Page
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.

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.
7
Page
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 [email protected]
8
Page