Angular Step by Step for beginners
4.5 (794 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
7,985 students enrolled

Angular Step by Step for beginners

This course teaches Angular from basic to advanced level by creating a Customer data entry project.
4.4 (794 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
7,985 students enrolled
Last updated 1/2020
English
English [Auto-generated]
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 8 hours on-demand video
  • 12 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Understanding Node NPM, CLI , VS ,Typescript and Webpack build tool.
  • Understanding Module and Component architecture in angular. Understanding important properties of component like templateurl , styleurl and selector.
  • Understanding configuration files like Angular json , tsconfig json , package json file and semantic versioning.
  • Understanding Routing ,router-outlet , routeLink and Lazy loading
  • Angular validation using formgroup , formcontrols and validators.
  • Creating loosely coupled architecture using DI ( Dependency Injection) and providers.
  • Implementing reusable user controls using input , output and event emitters.
  • Making http calls , understanding httpclient , http interceptors and fixing double entry problem
  • Integrating Angular with visual studio , MVC core and WebAPI.
  • Unit testing using Jasmine and Karma.
Course content
Expand all 12 lectures 08:03:37
+ Lab 1 :- Running your First Angular Application
1 lecture 01:11:02

In this first 1 hour training video we will learn basics of angular.It has 16 chapters which are as listed below.


Chapter 1  :- Node and NPM

Chapter 2  :- Running first app & Angulr CLI

Chapter 3  :- VS Code editor.

Chapter 4  :- TypeScript

Chapter 5  :- CLI project folder structure

Chapter 6  :- The config JSON files

Chapter 7  :- ng serve vs ng build

Chapter 8  :- Angular the binding framework

Chapter 9  :- Component and Modules

Chapter 10 :- Expression , Decorators and TemplateURL

Chapter 11 :- Declaration and BootStrap in Modules

Chapter 12 :- The main.ts file for module startup

Chapter 13 :- Index.html and the selector tag

Chapter 14 :- Polyfills

Chapter 15 :- Webpack :- Packaging and deploying

Chapter 16 :- Vendor.js and Runtime.js

Preview 01:11:02
Test your Angular Knowledge
5 questions
+ Lab 2 :- Creating a Customer user interface with Grid
1 lecture 39:49

In lab 2 the following chapters are covered.


Chapter 17 :- Angular File naming Convention

Chapter 18 :- Creating Customer UI

Chapter 19 :- Creating Customer Model

Chapter 20 :- Consuming model in component

Chapter 21 :- ngModel , One way and Two way binding

Chapter 22 :- Expressions

Chapter 23 :- Understanding and Intrepeting Errors

Chapter 24 :- FormsModule

Chapter 25 :- *ngForLoop

Chapter 26 :- package.lock.json and versioning

Chapter 27 :- Using source code of the tutorial.

Creating UI , Component and Model
39:49
Lab 2 Quiz
5 questions
+ Lab 3 - Creating MasterPage page,Supplier page ,Home page & enabling navigation
1 lecture 31:14

In this the following chapters are covered
Chapter 28 :- Thinking Uniform , Thinking Master Pages

Chapter 29:- Creating Angular UI and its components.

Chapter 30 :- Organizing project folders, modules & components.

Chapter 31 :- Masterpage and selector

Chapter 32 :- Grouping components in to Modules.

Chapter 33 :- Understanding UI loading in selector.

Chapter 34 :- Routing and Routing collection

Chapter 35 :- router-outlet and routerLink

Chapter 36 :- RouterModule and loading routes in Angular.

Chapter 37 :- Understanding the flow of Angular with routing. 

Lab 3 :- Routing - Creating Masterpage with proper navigation
31:14
+ Lab 4 :- Increasing Performance using Lazy Loading
1 lecture 35:47

This lab is of 30 minutes and this lab has 10 chapters as show below.

Chapter 38 :- Performance issues due to eager loading.

Chapter 39 :- Implementing Lazy loading

Chapter 40 :- Dividing project in to self contained Angular modules.

Chapter 41 :- Self contained routes for self contained modules.

Chapter 42 :- loadChildren :- The heart of lazy loading

Chapter 43:- Understanding path structure for folders and loadChildren.

Chapter 44:- forRoot and forChild

Chapter 45:- Multiple Modules , Multiple builds and Multiple outputs.

Chapter 46:- CommonModule for Lazy Loading

Chapter 47:- Seeing the physical separate modules in the "dist" folder.

Chapter 48:- Revising Angular architecture with Lazy routing 

Lab 4 :- Increasing Performance using Lazy Loading
35:47
+ Lab 5 :- Implementing Validation in Angular
1 lecture 41:03

In this lab we will look in to applying validations using Angular. Below are the chapters covered in this lab.


Chapter 49 :- Validation object model.

Chapter 50 :- Appropriate place to put validations

Chapter 51 :-Formgroup , FormControl , Validators and FormBuilder

Chapter 52 :- Using Angular validation :- The CCC process.

Chapter 53 :- Creating validations

Chapter 54 :- Applying validations to the UI

Chapter 55 :- Checking validation status

Chapter 56 :- ReactiveForms

Chapter 57 :- ngModelOption standalone

Chapter 58 :- Display errors for individual validations.

Chapter 59 :- The dirty flag.

Chapter 60 :- Centralizing validation code for reusability.

Lab 5 :- Validation in Angular
41:03
+ Lab 6 :- Dependency Injection and Providers
1 lecture 34:41

In this Lab we will understand how to create decoupled architecture using Angular DI and providers.


Chapter 61: - Definition of a good architecture

Chapter 62: - Concrete classes and tight coupling

Chapter 63: - Provider - provides things to component.

Chapter 64: - Creating providers: - Provide & UseClass

Chapter 65: - Interfaces issues with Angular DI

Chapter 66: - Finally understanding Dependency Injection

Chapter 67: - Seeing the actual fruits of Dependency Injection

Chapter 68: - Centralized and Conditional DI

Chapter 69: - Injector and tokens - Conditional DI

Chapter 70: - Dynamic collections

Chapter 71: - Revising Angular DI architecture

Lab 6 :- Dependency Injection and Providers
34:41
+ Lab 7 :- Input , Output and Event Emitters
1 lecture 38:05

In this video we will try to understand how to create reusable component using input,output and event emitters.

Chapter 72 :- Defining a user control

Chapter 73 :- Interactions :- Input, output and event emitters

Chapter 74 :- Creating user control and its components

Chapter 75 :- Creating user control component and importance of selector

Chapter 76 :- The @input decorator

Chapter 77 :- Stters and custom component naming convention

Chapter 78 :- Creating the Grid UI of the user control

Chapter 79 :- Defining output and event emitters

Chapter 80 :- Understanding the user control flow

Chapter 81 :- Importing and running the user control

Chapter 82 :- Debugging and watching the full flow.

Lab 7 :- Input , Output and Event Emitters
38:05
+ Lab 8 :- Making HTTP calls using Angular.
1 lecture 41:41

In this lecture we will understand how to make HTTP calls , HTTP client and its new features , interpolation , DTO model and double data post problems.

Chapter 83 :- Json-server , the fake webserver

Chapter 84 :- Configuring json-server & db.json.

Chapter 85 :- importing and creating  http component object

Chapter 86:-  Making HTTP Post calls and the subscribe method.

Chapter 87 :- Import HTTP Module at the module level.

Chapter 88 :- Implementing DTO( Data transfer objects)

Chapter 89 :- Lambdas and Callback

Chapter 90 :- Angular HTTP Client.

Chapter 91 :- Using HttpClient

Chapter 92 :  Simplicity of HttpClient.

Chapter 93:-  Interceptors in HttpClient

Chapter 94:-  The double data post

Lab 8 :- Making HTTP calls using Angular.
41:41
+ Lab 9 :- Integrating MVC core with Angular using visual studio
1 lecture 01:31:08

Chapter 1 :- Defining the scope of the tutorial.
Chapter 2 :- Using Angular template and its limitation
Chapter 3 :- Respecting individual build and compilation.
Chapter 4 :- MVC wwwroot folder and Angular
Chapter 5 :- Issues with ng serve and integration
Chapter 6 :- Bootstrapping through MVC
Chapter 7 :- Deployurl concept.
Chapter 8 :- Integrating Webapi with Angular Http
Chapter 9 :- Debugging Angular and MVC
Chapter 10 :- Ahh the camel case and pascal case issue
Chapter 11:- Integrating Grunt with Task runner explorer
Chapter 12 :- Grunt configuration using appsettings.json
Chapter 13 :- Prebuild and Postbuild style
Chapter 14 :- Double tooling VS code and Visual studio

Lab 9 :- Integrating MVC core with Angular using visual studio
01:31:08
+ Lab 10:- Migrating Angular 6 to Angular 7
1 lecture 17:36

In this lesson we have 4 chapters which focuses on Migrating Angular 6 to 7 migration :-


Chapter 109 :- Create new project using ng new command.
Chapter 110 :- Copy the code in to newly created projects.
Chapter 111 :- Run ng serve , fix errors http to httpclient
Chapter 112 :- Test and you are all set

Lab 10:- Migrating Angular 6 to Angular 7
17:36
Requirements
  • Basic JavaScript and HTML knowledge needed.
  • Basic programming knowledge is needed.
  • You do not need to know any old Angular version of Angular.
Description


This tutorial teaches Angular using a project. So a simple customer screen is taken and around the same the whole course revolves. Remember the best way to learn any technology is by doing a project.

Below are complete details of the course :-

Chapter 1  :- Node and NPM
Chapter 2  :- Running first app & Angulr CLI
Chapter 3  :- VS Code editor.
Chapter 4  :- TypeScript
Chapter 5  :- CLI project folder structure
Chapter 6  :- The config JSON files
Chapter 7  :- ng serve vs ng build
Chapter 8  :- Angular the binding framework
Chapter 9  :- Component and Modules
Chapter 10 :- Expression , Decorators and TemplateURL
Chapter 11 :- Declaration and BootStrap in Modules
Chapter 12 :- The main.ts file for module startup
Chapter 13 :- Index.html and the selector tag
Chapter 14 :- Polyfills
Chapter 15 :- Webpack :- Packaging and deploying
Chapter 16 :- Vendor.js and Runtime.js
Chapter 17 :- Angular File naming Convention
Chapter 18 :- Creating Customer UI
Chapter 19 :- Creating Customer Model
Chapter 20 :- Consuming model in component
Chapter 21 :- ngModel , One way and Two way binding
Chapter 22 :- Expressions
Chapter 23 :- Understanding and Intrepeting Errors
Chapter 24 :- FormsModule
Chapter 25 :- *ngForLoop
Chapter 26 :- package.lock.json and versioning
Chapter 27 :- Using source code of the tutorial.
Chapter 28 :- Thinking Uniform , Thinking Master Pages
Chapter 29:- Creating Angular UI and its components.
Chapter 30 :- Organizing project folders, modules & components.
Chapter 31 :- Masterpage and selector
Chapter 32 :- Grouping components in to Modules.
Chapter 33 :- Understanding UI loading in selector.
Chapter 34 :- Routing and Routing collection
Chapter 35 :- router-outlet and routerLink
Chapter 36 :- RouterModule and loading routes in Angular.
Chapter 37 :- Understanding the flow of Angular with routing.
Chapter 38 :- Performance issues due to eager loading.
Chapter 39 :- Implementing Lazy loading
Chapter 40 :- Dividing project in to self contained Angular modules.
Chapter 41 :- Self contained routes for self contained modules.
Chapter 42 :- loadChildren :- The heart of lazy loading
Chapter 43:- Understanding path structure for folders and loadChildren.
Chapter 44:- forRoot and forChild
Chapter 45:- Multiple Modules , Multiple builds and Multiple outputs.
Chapter 46:- CommonModule for Lazy Loading
Chapter 47:- Seeing the physical separate modules in the "dist" folder.
Chapter 48:- Revising Angular architecture with Lazy routing
Chapter 49 :- Validation object model.
Chapter 50 :- Appropriate place to put validations
Chapter 51 :-Formgroup , FormControl , Validators and FormBuilder
Chapter 52 :- Using Angular validation :- The CCC process.
Chapter 53 :- Creating validations
Chapter 54 :- Applying validations to the UI
Chapter 55 :- Checking validation status
Chapter 56 :- ReactiveForms
Chapter 57 :- ngModelOption standalone
Chapter 58 :- Display errors for individual validations.
Chapter 59 :- The dirty flag.
Chapter 60 :- Centralizing validation code for reusability.
Chapter 61: - Definition of a good architecture
Chapter 62: - Concrete classes and tight coupling
Chapter 63: - Provider - provides things to component.
Chapter 64: - Creating providers: - Provide & UseClass
Chapter 65: - Interfaces issues with Angular DI
Chapter 66: - Finally understanding Dependency Injection
Chapter 67: - Seeing the actual fruits of Dependency Injection
Chapter 68: - Centralized and Conditional DI
Chapter 69: - Injector and tokens - Conditionnal DI
Chapter 70: - Dynamic collections
Chapter 71: - Revising Angular DI architecture
Chapter 72 :- Defining a user control
Chapter 73 :- Interactions :- Input, output and event emitters
Chapter 74 :- Creating user control and its components
Chapter 75 :- Creating user control component and importance of selector
Chapter 76 :- The @input decorator
Chapter 77 :- Stters and custom component naming convention
Chapter 78 :- Creating the Grid UI of the user control
Chapter 79 :- Defining output and event emitters
Chapter 80 :- Understanding the user control flow
Chapter 81 :- Importing and running the user control
Chapter 82 :- Debugging and watching the full flow.
Chapter 83 :- Json-server , the fake webserver
Chapter 84 :- Configuring json-server & db.json.
Chapter 85 :- importing and creating  http component object
Chapter 86:-  Making HTTP Post calls and the subscribe method.
Chapter 87 :- Import HTTP Module at the module level.
Chapter 88 :- Implementing DTO( Data transfer objects)
Chapter 89 :- Lambdas and Callback
Chapter 90 :- Angular HTTP Client.
Chapter 91 :- Using HttpClient
Chapter 92 :  Simplicity of HttpClient.
Chapter 93:-  Interceptors in HttpClient
Chapter 94:-  The double data post
Chapter 95 :- Defining the scope of the tutorial.
Chapter 96 :- Using Angular template and its limitation
Chapter 97 :- Respecting individual build and compilation.
Chapter 98 :- MVC wwwroot folder and Angular
Chapter 99 :- Issues with ng serve and integration
Chapter 100 :- Bootstrapping through MVC
Chapter 101 :- Deployurl concept.
Chapter 102 :- Integrating Webapi with Angular Http
Chapter 103 :- Debugging Angular and MVC
Chapter 104 :- Ahh the camel case and pascal case issue
Chapter 105:- Integrating Grunt with Task runner explorer
Chapter 106 :- Grunt configuration using appsettings.json
Chapter 107 :- Prebuild and Postbuild style
Chapter 108 :- Double tooling VS code and Visual studio
Chapter 109 :- Create new project using ng new command.
Chapter 110 :- Copy the code in to newly created projects.
Chapter 111 :- Run ng serve , fix errors http to httpclient
Chapter 112 :- Test and you are all set
Chapter 113 :- Integration testing vs Unit Testing
Chapter 114 :- Black Box vs White Box
Chapter 115 :- Jasmine and Karma
Chapter 116 :- Understanding Jasmine syntaxes , BDD , Describe and it.
Chapter 117 :- BeforeEach,BeforeAll,AfterEach and AfterAll
Chapter 118 :- The TestBed API
Chapter 119 :- Angular loading flow.
Chapter 120 :- Fixture the baseline.
Chapter 121 :- DebugElement , componentInstance and nativeElement
Chapter 122 :- Assertion - expect , tobeTruthy , toEqual
Chapter 123 :- Synching DOM's DetectChanges.
Chapter 124 :- QuerySelectors.
Chapter 125 :- Running Angular test
Chapter 126 :- Writing a complex unit test for the Customer screen

Who this course is for:
  • This course is for people who are new to Angular and want to start from basic and go to advanced level.