Front-End Web Designing Course with Angular JS

CSS 3

• What is CSS?
• Different ways to write CSS e.g. external, internal, inline
• Styling of HTML elements-text
• Selectors in CSS
• Attributes in CSS
• Attribute Selectors
• Links, lists and tables
• Writing Media Rules for Mobiles, Tabs & Other Devices
• Image Sprites and Gradients
• CSS Pseudo Classes and Pseudo Elements

Includes

• Real Time Activity
• Sample Illustration on using CSS concepts in designing real time web pages
• Task
• Create and design web pages using HTML and CSS – On completion of above topics, one can able to use CSS concepts to enhance the design of the web pages

Javascript

• Introduction to Js
• Array Methods (e.g. map(), filter() etc.
• Callback functions
• Async Await
• call(), bind(), apply()
• JSON
• JSON Objects
• Ajax
• Variables And Methods
• Functions
• Array Methods
• Events
• Create Elements
• Attributes
• Set Timeout
• Set Interval
• Browser Storages
• Call apply bind
• Closure
• Callbacks
• Promises
• Async Await

Includes

• Real-Time Activity
• Task
  
• Create faster Webpages using Javascript - On completion of the above topics, one can able to use Javascript concepts to create faster and efficient web pages.

jQuery

• Introduction to jQuery
• Adding jQuery to web pages
• jQuery Selectors
• jQuery Events
• jQuery Hide/Show/Fade Effects
• How to use jQuery plugins in the website

Includes

• Real-Time Activity
• Sample Illustration and tasks on below mentioned list
• Task
• How to use jQuery Plugins to the websites

Bootstrap

• Introduction to Bootstrap
• Containers
• Bootstrap Grids
• Flex Properties
• Bootstrap Carousels
• Bootstrap Tooltips
• Bootstrap Modals

Includes

• Real-Time Activity
• Sample Illustration on creating responsive web pages using Bootstrap concepts
• Task
• Create responsive Webpages using Bootstrap - On completion of the above topics, one can able to use Bootstrap concepts to create responsive web pages.

Angular JS

Introduction to Angular JS

• Introduction to JS
• What is Angular?
• What do we need Angular for?
• Why should we use Angular?
• How do we use Angular?

Basics of AngularJS

• Setting up the Development Environment
• Angular Application Architecture
• First Angular App
• Angular Invocation
• Core modules
• Angular Invocation
• Compilation
• Execution cycle
• Modules
• Controllers
• Dependency Injection
• Service
• Filters
• Data Binding
• Scopes
• Template
• Directives
• Routers
• Providers

Data Types, Functions and Logical expressions

• Objects
• Strings
• Numbers
• Auto Casting
• Prototype
• Function
• Self Invoicing Functions
• Array
• Booleans
• Un defined
• If statements
• Else and elseif statements
• Logical operators
• Switch statements
• For loops
• For each loop
• Continue
• Break
• Defining functions
• Function arguments
• Returning values from a function
• Multiple return values
• Scope and global variables

Typescript

• Overview of Typescript
• Overview of TypeScript
• Why TypeScript?
• JavaScript vs TypeScript
• Module Introduction and Introduction to TypeScript
• Setting up the environment to write TypeScript
• Variable declarations (var, let, and const)
• Types - Primitives
• Types - Reference and Special Types
• Operators - Spread and Backticks
• Operators - Destructure and Rest
• Classes
  • Introduction to Classes
  • Inheritance
  • Access Modifiers
  • Getters and Setters
  • Read only and static
• Interface
  • Introduction to Interfaces
  • Optional properties and methods
  • Strict structural contract
  • Extending interface
  • Implementing interface
  • Introduction to Modules
  • Import / Export
  • Default
• Arrow
• Functions
• Modules
• Fetch
• Async or await

Decorators

• Introduction to Decorators
• Angular Modules and the @NgModule Decorator
• Declarations
• Imports and Exports
• providers, bootstrap, and entry
• Components
• Angular Application Bootstrap Mechanis

Components

• Angular Components and the @Component Decorator
• Creating an Angular Component using the Angular CLI and on StackBlitz
• Component Decorator Metadata
• Component configuration object
• Custom components
• Component with templates: Inline, External
• Component with Styles: Inline, External
• Angular Elements
• Creating components manually
• Creating components using npm
• Calling a component
• Nesting components
• Execution flow of Angular applications
• Component Interactions
• View Encapsulation - Emulated, ShadowDom, None
• Data Binding - String Interpolation - {{ }}
• Property Binding - []
• Event Binding - ()
• @Input and @Output Property Decorators
• Two-way Data Binding - [()]
• Attribute Binding - [attr.]
• Class Binding - [class.]
• Style Bindings - [style.]
• Introduction to Lifecycle Hooks in Angular
• Using Lifecycle Hooks in Angular
• View Queries - View Child, View Children, Content Child, Content Children
• Change Detection Mechanism in Angular. ZoneJS, NgZones

Directives

• Introduction to Section
• Introduction to Directives
• Built-in directives
• Structural directive
• NgIf
• NgFor
• NgSwitch
• Attribute directive
• NgClass
• NgStyle
• NgModel
• Built in Structural Directives
• Built in Attribute Directives
• Building custom Attribute Directives
• Building Custom Structural Directives

Pipes

• Introduction to Pipes in Angular
• Using Built In Pipes
• Creating Custom Pipes in Angular
• Pure and Impure Pipes in Angular
• Importing and using pipes
• Parameterizing pipes
• Chaining pipes
• Creating a Filter pipe
• Decorators Revisited
• Building Custom Decorators in Angular
• Building a Custom Lifecycle Hook Class Logger Decorator
• Building Custom Property Decorator in Angular

Forms in AngularJS

• Introduction to forms
• Types of Form Building Strategies in Angular
• Creating Long Bootstrap forms quickly using VS Code using Emmet
• Adding FormControl(s) to a Template Driven form using the ngModel directive
• Getting the JavaScript Object Representation of a form using ngForm directive
• Disabling the Submit Button on a Form using form's $invalid flag
• Getting the JavaScript Object Representation of a form in TypeScript Class
• Adding Checkbox, Radio Buttons and Select List to your Template Driven Form
• Creating Subsections in the form using NgModelGroup directive
• Steps to implement a Reactive form in Angular Quickly creating a Bootstrap form for our Reactive form using Emmet
• Creating a Reactive form in the TypeScript class & connecting it to the template
• Adding form Validations to a Reactive Form
• Dynamically Adding or Removing FormControl(s) or FormGroup(s) using FormArray(s)
• Adding Synchronous Custom Validations to your Reactive Form
• Adding Async Custom Validations to your Reactive Form
• Resetting the value of a form
• Form and field validation
• Validation check with ng-pristine,ng-dirty, ng-touched, ng-untouched, ng-valid, ng-invalid
• Show and hide validation error messages
• Form submission with ngSubmit
• Reactive/ Model drive forms
• Reactive Forms Module
• Form Group, Form Control classes
• Form Builder for easy form building
• Setting form model using setValue and patchValue
• Use Form Array to build repeated from controls or form groups

Templating

• HTML as template
• Data binding

Dependency injection

• Introduction
• Why DI
• @Injectable decorator
• Custom service development
• Registering the service with NgModule using providers key
• Provider Types
• Class
• Factory
• Value
• DI as a Pattern, DI as a Framework and Types of Providers
• Hierarchical Dependency Injection
• Introduction to Services in Angular
• GET data from a Rest API using HttpClient
• CRUD Operations using HttpClient, HttpParams and HttpHeaders
• Observables and Operators in Observables - Map, Retry, Catch
• Behavior Subject and Sharing Data using Behavior Subjects

Routing

• Introduction to Routing
• Implementing Routing in an Angular App
• @angular/router library
• Configure routes
• RouterModule.forRoot and RouterModule.forChild
• RouterOutlet, RouterLink, RouterLinkActive
• Nested Routes
• Parametrized routes
• Route guards
• Creating a User List. Setting the stage for Child Routing
• Abstracting the user link to a separate component
• Implementing Child Routes
• Path Match and Route Types
• Introduction to Route Guards in Angular
• CanActivate and CanActivateChild Guards in Angular
• CanDeactivate Guard in Angular
• Prefetching Data for a Component using Resolve

Using third party libraries

• Introduction to the Section
• Creating an Angular CLI Project with SCSS as a base style
• Introducing Material Design Bootstrap into your Angular CLI Project
• Adding a Navbar in your header
• Adding Material Design Buttons
• Adding Cards
• Using Material Design Dropdowns and Form Inputs
• Introducing Angular Material into your Angular CLI Project on the top of MDB
• Adding Radio Buttons, Slide Toggle, Slider, Progress Bar and Spinner
• Introduction to Firebase
• Creating an App using the Firebase Console
• Setting up your Angular CLI Project to support Firebase
• Interacting with Firebase Realtime Database using methods on AngularFireList
• Adding and Reading Data from Realtime Database in Firebase
• Updating and Deleting Data from Realtime Database in Firebase

Rxjs Primer

• Introduction to Rxjs
• Why RxJs
• Observable interface
• Streams
• Operators
• Subscription
• Subject
• Schedulers

Interfacing with backend services & APIs using HTTP client

• Setup installing the module
• Making a request for JSON data
• Type checking the response
• Error handling
• Sending data to the server
• Making a POST request
• Configuring other parts of the request
• HTTP get vs post
• Requesting and sending data to the server
• Sending get Request
• Sending put Request
• Adjusting Request Headers

Level up with Angular

• Creating libraries
• Angular Material Essentials
• Lazy Loading
• Customizing the Angular CLI using the Builder API
• Server Side Rendering with Angular Universal
• Working with Service Workers
• Building a Progressive Web App

Deployment

• Manually
• Using the Angular CLI with Ahead-Of-Time (AOT) Compilation and Tree-Shaking (removing unused library code)
• Deployment Platforms for Angular Apps