UI Development with Angular and React Training Program

UI course content

(HTML,CSS,BOOTSTRAP, JAVASCRIPT, ES6)

ui technologies course content

• Introduction of UI Technologies
• UI Developer roles and Responsibilities
• Technologies around HTML

basics of html & css

• Document Object Model (DOM)
• Structure of HTML Page
• Mandatory tags in the HTML page (HTML, head, body)
• What is CSS
• Different ways of applying CSS for elements, and priority chain of CSS
• Heading tags(H1…H6), Tags and attributes(Class, Id, style..etc)
• Inline and block-level elements

html tags

• Including external page links in a page using anchor tags and its properties
• Working with row and column data using table tags
• Hiding and unhiding elements using display property
• image tag, p tag, ul and ol tags, li, nobr, hr, br etc
• Layouts, forms, buttons
• Input fields ( text box, radio button, checkbox, dropdown, text area etc)

HTML5

• List of Browsers support HTML5
• Media tags (audio and video tags)
• Graphics using Canvas tag
• Drag and Drop features
• Working on locations lat and long using Geolocation
• Storing user preferences using LocalStorage.

form elements

• Get & Post
• Validating input values in a form
• Form action and type

css properties

• Adding borders, font, pseudo classes
• Positioning elements (absolute, relative, fixed and static)
• Box model (margins, padding)
• Floating elements float left, right etc.
• Including external resources
• Absolute and Relative Paths
• Including external resources like CSS, images etc

CSS 3

• Difference between CSS2 and CSS3
• Adding borders and backgrounds
• Advanced text effects(shadow)
• Adding Transitions to elements
• Responsive Designs
• Difference between multiple devices, making a page to work on multiple devices
• Media queries

bootstrap

• What is Bootstrap Framework
• Advantages of Bootstrap Framework
• What is Responsive web page
• What is Mobile-First Strategy
• Setting up Environment
• How to apply Bootstrap to Applications

Bootstrap Grid

• What is Bootstrap Grid & How to apply Bootstrap Grid
• What is Container
• What is offset Column
• How to change class properties
• How to use Typography
• What is Bootstrap Tables
• What is Bootstrap Form Layout
• How to hide or show the text in Bootstrap

Bootstrap Components

• Why Bootstrap Components & Advantages
• What are the different types of Bootstrap Components
• How to use Glyphicons Component
• What is Bootstrap Dropdown Menu Component
• How to use Button Groups and Button Toolbar
• What are different Input Groups Components
• What is Navigation Pills & Tabs Components
• How to build a Responsive Navbar
• How to Add Forms and other controls to Navbar
• What is Jumbotron / Page Header Components
• How to Create Progress Bar
• What is Media Objects Component
• What is Bootstrap List Group Component
• What is Bootstrap Panel Component

Session-3 & 4 – 90 mins

JavaScript

• Introduction
• Data types and data structures in Js
• Control structures, if, if-else, while, for, switch case statements
• Dynamic creation and manipulation of DOM elements using JS
• Adding dynamic event listeners to DOM elements
• Event capturing and event bubbling
• Validations using key char codes
• JavaScript Supported Data structures
• Arrays & Objects
• Preened methods in arrays
• Strings and preened methods

Advanced JavaScript ES6

• Adding methods for an object
• Module Introduction
• Understanding “let” and “const”
• Arrow Functions
• Exports and Imports
• Understanding Classes
• Classes, Properties and Methods
• The Spread & Rest Operator
• Destructuring
• Reference and Primitive Types Refresher
• Refreshing Array Functions
• Wrap Up
• Next-Gen JavaScript – Summary
• JS Array Functions

angular js course content

Fetting Started

• Course Introduction – What is Angular?
• Angular vs Angular 2 vs Angular 9
• CLI Deep Dive & Troubleshooting
• Project Setup and First App
• Brief about Typescript

TypeScript

• Types
• Classes
• Interfaces
• Generics
• Modules

The Basics

• Getting Started with Angular
• Importance of Components
• Creating a New Component
• Understanding the Role of AppModule and Component Declaration
• Total = 22 Hours
• Using Custom Components
• Creating Components with the CLI & Nesting Components
• Working with Component Templates
• Working with Component Styles
• Fully Understanding the Component Selector
• Data binding
• String Interpolation
• Property Binding
• Event Binding
• Two-Way-Data binding
• FormsModule & Two-Way-Binding
• Passing and Using Data with Event Binding
• Understanding Directives
• Using ngIf to Output Data Conditionally
• Enhancing ngIf with an Else Condition
• Styling Elements Dynamically with ngStyle
• Applying CSS Classes Dynamically with ngClass
• Outputting Lists with ngFor
• Getting the Index when using ngFor

Debugging

• Understanding Angular Error Messages
• Debugging Code in the Browser Using Source maps
• Using Augury to Dive into Angular Apps

Components & Data binding

• Module Introduction
• Defining Apps into Components
• Property & Event Binding
• Binding to Custom Properties
• Binding to Custom Events
• Understanding View Encapsulation
• More on View Encapsulation
• Using Local References in Templates
• @ViewChild() in Angular
• Access to the Template & DOM with @ViewChild
• Components with ng-content
• Understanding the Component Lifecycle
• Lifecycle Hooks in Action
• Lifecycle Hooks and Template Access
• @ContentChild() in AngularGetting Access to ng-content with @ContentChild

Directives Deep Dive

• ngFor and ngIf Recap
• ngClass and ngStyle Recap
• Creating a Basic Attribute Directive
• Using the Renderer to build a Better Attribute Directive
• More about the Renderer
• Using HostListener to Listen to Host Events
• Using HostBinding to Bind to Host Properties
• Binding to Directive Properties
• Structural Directives
• Building a Structural Directive
• Understanding ngSwitch

Services & Dependency Injection

• Creating a Service
• Injecting Service into Components
• Creating a Data Service
• Understanding the Hierarchical Injector
• Instances of Service
• Injecting Services into Services
• Using Services for Cross-Component Communication
• Services in Angular

Routing

• Router
• Setting up Routes
• Navigating with Links
• Navigation Paths
• Styling Active Router Links
• Navigating Programmatically
• Relative Paths in Programmatic Navigation
• Passing Parameters to Routes
• Fetching Route Parameters
• Fetching Route Parameters Reactively
• Passing Query Parameters and Fragments
• Retrieving Query Parameters and Fragments
• Child (Nested) Routes
• Handling of Query Parameters
• Redirecting and Wildcard Routes
• Introduction to Guards
• Protecting Routes with canActivate
• Protecting Child (Nested) Routes with canActivateChild
• Using Auth Service
• Controlling Navigation with canDeactivate
• Passing Static Data to a Route
• Resolving Dynamic Data with the resolve Guard
• Understanding Location Strategies

Understanding Observables

• Angular Observables
• Building a Custom Observable
• Understanding Operators

Handling Forms in Angular Apps

• Template-Driven (TD) vs Reactive Approach
• TD: Creating the Form and Registering the Controls
• TD: Submitting and Using the Form
• TD: Understanding Form State
• TD: Accessing the Form with @ViewChild
• TD: Adding Validation to check User Input
• Built-in Validators & Using HTML5 Validation
• TD: Using the Form State
• TD: Outputting Validation Error Messages
• TD: Set Default Values with ngModel Property Binding
• TD: Using ngModel with Two-Way-Binding
• TD: Grouping Form Controls
• TD: Handling Radio Buttons
• TD: Setting and Patching Form Values
• TD: Using Form Data
• TD: Resetting Forms
• Reactive Forms : Setup
• Reactive: Creating a Form in Code
• Reactive: Syncing HTML and Form
• Reactive: Submitting the Form
• Reactive: Adding Validation
• Reactive: Getting Access to Controls
• Reactive: Grouping Controls
• Reactive: Arrays of Form Controls (FormArray)
• Reactive: Creating Custom Validators
• Reactive: Using Error Codes
• Reactive: Creating a Custom Async Validator
• Reactive: Reacting to Status or Value Changes
• Reactive: Setting and Patching Values

Pipes

• Using Pipes
• Chaining Multiple Pipes
• Custom Pipe
• Creating a Filter Pipe
• Pure and Impure Pipes
• Understanding the “async” Pipe

Http Requests

• How Does Angular Interact With Backends?
• The Anatomy of a Http Request
• Backend Setup
• POST Request
• GETting Data
• RxJS Operators to Transform Response Data
• Types with the HttpClient
• Loading Indicator
• Service for Http Requests
• Services & Components Working Together
• DELETE Request
• Handling Errors
• Using Subjects for Error Handling
• Using the catchError Operator
• Error Handling & UX
• Setting Headers
• Adding Query Params
• Different Types of Responses
• Introducing Interceptors
• Manipulating Request Objects
• Response Interceptors
• Multiple Interceptors

Authentication & Route Protection

• HAuthentication
• Adding the Auth Page
• Switching Between Auth Modes
• Handling Form Input
• Preparing the Backend
• Preparing the Signup Request
• Sending the Signup Request
• Adding a Loading Spinner & Error Handling Logic
• Improving Error Handling
• Sending Login Requests
• Login Error Handling
• Creating & Storing the User Data
• Reflecting the Auth State in the UI
• Adding the Token to Outgoing Requests
• Attaching the Token with an Interceptor
• Adding Logout
• Adding Auto-Login
• Adding Auto-Logout
• Adding an Auth Guard

Angular Modules & Optimisation

• Modules
• AppModule
• Feature Modules
• Routes to Feature Modules
• Component Declarations
• Understanding Shared Modules
• Understanding the Core Module
• Adding an Auth Feature Module
• Lazy Loading
• Modules & Services
• Ahead-of-Time Compilation

Unit Testing in Angular Apps

• About this Section
• Unit Tests
• Testing Setup (as created by the CLI)
• Running Tests (with the CLI)
• Adding a Component and some fitting Tests
• Testing Dependencies: Components and Services
• Simulating Async Tasks
• Using “fakeAsync” and “tick”
• Isolated vs Non-Isolated Tests

Deploying an Angular App

• Deployment Preparation & Steps
• Using Environment Variables
• Deployment Example: Firebase Hosting
• Server Routing vs Browser Routing

NgRx with Angular (Optional)

• Application State
• NgRx
• Reducers
• Actions
• NgRx Store
• State
• Dispatching Actions
• Multiple Actions
• Preparing Update & Delete Actions
• Expanding the State
• Managing More State via NgRx
• Removing Redundant Component State Management
• One Root State
• Setting Up Auth Reducer & Actions
• Dispatching Auth Actions
• Exploring NgRx Effects
• Effects & Error Handling
• Login via NgRx Effects
• Managing UI State in NgRx
• Preparing Other Auth Actions
• Adding Signup
• Further Auth Effects
• Adding Auto-Login with NgRx
• Adding Auto-Logout
• Using the Store Dev tools
• The Router Store

Angular Universal (Optional)

• Angular Universal & ModuleMapLoader
• Adding Angular Universal
• Adding Angular Universal with NestJS
• Deploying Universal Apps
• Getting Started with Angular Universal
• Adding a Server-Side Build Workflow
• Adding a NodeJS Server
• Pre-Rendering the App on the Server

Angular Animations (Optional)

• Making Animations Work with Angular
• Setting up the Starting Project
• Animations Triggers and State
• Switching between States
• Transitions
• Advanced Transitions
• Transition Phases
• The “void” State
• Using Keyframes for Animations
• Grouping Transitions
• Using Animation Callbacks

Online Capabilities with Service Workers (Optional)

• Service Workers
• Caching Assets for offine Use
• Caching Dynamic Assets & URLs