Angular Step by Step Tutorial for beginners

Posted by Questpond under Angular category on | Points: 350 | Views : 2068
This 2 hours of tutorial will help you understand the basic concepts in Angular that can be implemented in real-time project. It covers 10 Parts as listed out below -

Part 1 :- Introduction ( 5 minutes)
What is Angular ?
Pre-requisite for Angular

Part 2 :- Installation ( 25 minutes)

Downloading VS Code.
VS Code vs Visual studio.
Installing VS Code (64 bit and 32 bit).
Running VS Code and Admin rights.
VS Code open folder ,Trust ,Explorer and Terminal.
Installing / Downloading Nodejs & different versions.
Checking node version (node -v)
Checking version of Node package manager(npm)
Checking node commands from VSCode
Power Shell vs Command Prompt
Installing and checking Angular CLI
Creating Project using ng new
Running project using ng serve
Common Errors during installation.
Installation Summary.

Part 3 :- Understanding Node and NPM (15 minutes)

What is Node ?
Understanding the V8 Chrome engine.
Running a simple JS code using node.
Understanding NPM node package manager
Running npm install command.
Importance of "node_modules" folder.
Understanding Package.json

Part 4 :- Typescript (15 Minutes)

What is Typescript ?
Dynamic language, Strongly typed & Loosely typed.
Demo of loosely typed concept using JavaScript.
Installing typescript using npm.
Checking typescript version
Compiling your first Typescript code.
Demo of strongly typed using typescript.
Typescript increases productivity.
Classes , Inheritance and Aggregation.
Creating modules using Imports and exports.
Compile vs Transpile vs Convert
Configurations using tsconfig.json file.
Creating tsconfig.json file using TS command line.
Seeing a simple example of "outdir" tsconfig.json
Strict check parameter using tsconfig.json.

Part 5 :- Creating the Angular project - Angular CLI.(15 Minutes)

Installation of Angular CLI using NPM.
Checking the version of Angular CLI.
Creating a project using Angular CLI.
Running project using "ng serve".
Fixing ng serve error of project description.

Part 6 :- Understanding the files in Angular project ( 10 minutes)

Package.json,tsconfig.json ,angular.json and spec files.
AngularJS vs Angular :- Different versions of Angular.
Understanding the src and app folder.
Revisiting Angular definition
Component :- The basic unit of Angular ( View + Logic)
Writing simple logic in the component.

Part 7 :- Decorator, Componenet, Modules and Directives (15 min)

Decorator(@Component),Selector, TemplateUrl and styleUrls.
Component = HTML + Logic + CSS
Revisiting the component concept visually.
Directives :- Adding behavior to HTML elements.
What is a Template ?
Module :- Logically grouping components.
Declaration and BootStrap in modules.

Part 8 :- Understanding Angular BootStrapping flow. (10 min)

Importance of Main.ts and Index.html
Components = View + Logic
Modules Group components.

Part 9 :- Bindings ,expressions and interpolation.(15 min)

ngModel directive and expressions.
Interpolation Mixing Angular with HTML.
Common Errors during binding and fixing the same.
Importance of FormsModule.
Understanding collections and for loops
Writing Simple Forms and Table Binding logic.

Part 10 :- Different types of Bindings.(10 min)

Three different types of Bindings.
Component , Structural and Attribute
Understanding difference between each one of them.

Get Questpond videos on discounted price from

Comments or Responses

Login to post response