+91 88620 64497
 Frontend Web Development

Frontend Angular

  • Explore the power of Angular in our comprehensive course.
  • Whether you’re new to web development or an experienced coder, our program will take you from beginner to expert.
  • Learn to build dynamic and interactive web applications with Angular’s cutting-edge features.
  • Our hands-on, project-based approach ensures you gain practical skills that employers value.
  • Start your journey to becoming a sought-after frontend developer today with our Angular course.”
IT Shaala

Get in touch


Class Details

Course Name

Frontend Angular Developerment

Doubt Session

Monday To Friday

Course Features

What you’ll learn

  • What is Typescript and ECMAScript?, with Features,
  • AOT, JIT, TSC ( Transpilation ) Work and Config, code difference in JS and TS
  • What is Angular?
  • What is the framework?
  • The need for MVC, MVVM, MVW and MV* Architecture in Web Applications
  • What is Components-Based Web Development? And the benefits.
  • AngularJs (vs) Angular
  • Setup for the local development environment
  • Angular files and folder structure with JSON configuration
  • Role of Node JS and NPM in Angular
  • What is CLI? Angular CLI
  • (Command Line Interface) Commands
  • Introduction Of Example Project
  • Execution of angular.json and package.json
  • Linking between all project files in MVC architecture
  • Creating our first element and typescript
  • Selector: customize or ignore tag(s)
  • Decorators and Metadata
  • Import and imports array,
  • Component and @Component, NgModule and @NgModule, bootstrap, Selector and template,
  • Backticks and coding std in the template ( ES2015 feature ) templateUrl, styles array, and the styleUrls array
  • Declaration array, class,
  • BrowserModule and bootstrap Module etc.
  • Launching the application.
  • Role of the Module and Components.
  • Splitting of Module and Component.
  • Exporting in Angular

 

Apart from this, we will learn how Angular reacts to invalid structures, we will understand the concept of the framework with MVVM, MV*, MVW or MVC architecture.

  • Structural directives
  • Built-in Directives
  • ngIF, ngFor, ngSwitch
  • Style and Class Directives
  • ngClass, [class.clsName]
  • ngStyle, [style.stlName]
  • Attribute directives
  • Customise Directive
  • Component: Way to Create, Split and reuse it.
  • Host Listener and Host Binding

 

  • Interpolation
  • Property binding
  • Event binding
  • Two-way Binding
  • Class binding
  • Style binding
  • Methods
  • create a dynamic component ( without a separate component file ) using @Component.
  • What are the components?
  • Understanding Components lifecycle hooks
  • Creating a component with CLI
  • Split an Angular application using components to make Angular application lightweight and high performance.
  • Root App module
  • Ahead-Of-Time(AOT) Compilation
  • Feature modules
  • Getting more Object Oriented:
  • Create a Model for data ( validating data )
  • Classes – Properties, Methods, Constructors, Inheritance
  • Exporting a model
  • Mock data model ( as the Angular team prefers )

 

  • Implementing style:
  • inline style,
  • internal style, and
  • external style file
  • Splitting view files
  • CSS style Scope

 

  • Forms in Angular
  • Template Driven Forms
  • Reactive
  • Why pipes are useful?
  • Built-in pipes
  • Parameterizing pipes
  • Custom pipes
  • Creating Service
  • $http Service
  • Introduction to Injectors ( Dependency Injection )
  • Providers: use and implementation.
  • parameterized routing.
  • Introduction
  • Configuring & Navigating
  • Parameterized routes

 

  • requests using HTTP service.
  • Creating Services
  • Creating Components
  • Creating Routings
  • Configuring NgModule
  • Working with JSON Data file
  • Run the application
  • Deploy on FTP web server
  • Deployment on Google firebase web hosting service
  • Build an application as a product with a specific location
  • Build an application as a product in an optimized way
  • What is API(s)? Use and Benefits of using API(s).
  • Way to configure and implement it.
  • What is Google’s Material Design?
  • Use and benefits using Angular Material.
  • How to add and configure a new Module with an existing angular root module.
  • Way to convert and implement Materialize Designs in Angular Framework
  • What are Bootstrap and ngb?
  • Way to implement for development and testing environment
  • Understanding new and Deprecated CLI(s) in Angular.
  • Start with the development build
  • Web Programming Introduction

    • The architecture of a website
    • Different technologies in making the website
    • Web Development Introduction

    Introduction

    • History of HTML
    • Syntax of HTML

    Headers

    • Different types of tags used inside HTML headers

    Different Types of Tags

    • Basic Tags
    • Formatting Tags
    • Grouping Tags
    • List Tags
    • Table Tags
    • Form Tags

    Semantic HTML Elements

    • Different semantic HTML elements and it’s use case

Introduction

  • Introduction of CSS o Benefits, History of CSS

 Syntax

  • Syntax
  • Different ways to add CSS

Selectors and Specificity

  •  Types of selectors
  • CSS specificity

Types of CSS properties

  • Background
  • Border
  • Padding

Box Model

  • Introduction to Box Model

Introduction

  •  What is Bootstrap Framework
  • Why Bootstrap
  •  Advantages of Bootstrap Framework
  • What is Responsive web page
  • How to remove Responsiveness o Features of Bootstrap
  • Mobile-First Strategy
  • Environment Set up
  •  Implementing Bootstrap in Applications

Bootstrap Grid

  • Bootstrap Grid and implementation of Bootstrap Grid
  •  What is Container & Offset Column
  •  Reordering Columns
  • Advantages of Bootstrap Grid
  •  Display responsive Images & change class properties
  • Customize Bootstrap’s components &jQuery plug-in
  •  Bootstrap Typography & its use
  •  Bootstrap Tables, Form Layout & Bootstrap Button  Muted and Warning Text Messages
  •  Carets Classes / Hide or show the text in Bootstrap  Bootstrap Components / Plugins

General overview of JavaScript

  • Prerequisite of JavaScript
  •  Introduction and history of JavaScript How to include/add JavaScript in HTM
  • Syntax, Variables, Values, Data Types

Syntax review

  • Variable declaration
  • Data types supported in JavaScript
  • Key Difference between Var, Let, and Const
  • Expressions and Operators

 What are Operators in JavaScript

  • Different types of Operators in JavaScript

Control structures

  • Flow control and conditionals
  • Loops and iteration
  •  Jumps
  • Error handling

Throwing errors

  • Error handling

Data types with methods supported

  • String
  •  Numbers
  • Arrays
  • Functions

JSON

  • What is JSON and syntax of JSON

Regular Expressions

  •  Creating regular expressions for matching patterns

Objects

  • Creating object
  • Properties
  • Methods
  • Build-in JavaScript objects

ES6 Features.

Iterators and generators

  • Working with Iterators
  • Working with Generators

Prototype-based Object Oriented Programming Defining Constructors o Prototypes

  • Inheritance

JavaScript in the Web browse

  • Embedding JavaScript in HTML o Execution of JavaScript code

Browser Object Model

  • Introduction to the browser object model
  • Different use cases of a browser object model

Document Object Model

  •  Document structure/DOM tree
  •  HTML elements and attributes
  •  Creating, changing, and deleting nodes

Handling Events

  •  Types of events
  •  How to control events

 Ajax

  •  JavaScript and HTTP communication
  • Synchronous and asynchronous requests

JavaScript Async

  • JavaScript Callback o Promises
  • Async/Await

Data Storage

  • Cookies
  • Web Storage 0

Course Projects

>  Time Table using HTML

>  Mini Project using Semantic Tag

>  Project Using CSS Position 

>  Project Using CSS Flex 

>  Project Using CSS Grid  

>  Project Using DOM-1

>  Project Using DOM-1

>  CRUD User Profile

>  Simple Login & Signup API

Scroll to Top