Angular 8 - Complete Essential Guide
3.8 (37 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.
179 students enrolled

Angular 8 - Complete Essential Guide

Let's learn and understand Angular core concepts in details by watching presentation and writing code in labs.
3.8 (37 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.
179 students enrolled
Created by Awais Jamil
Last updated 6/2019
English
English [Auto]
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
  • 12 hours on-demand video
  • 1 article
  • 1 downloadable resource
  • 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
  • Develop modern, complex, responsive and scalable web applications with Angular 8
  • Fully understand the architecture behind an Angular 8 application and how to use it
  • Use their gained, deep understanding of the Angular 8 fundamentals to quickly establish themselves as frontend developers
  • Crack angular job interviews easier
  • Create Angular Apps From Scratch and scale it up to any level
  • Learn Angular with Firebase to build Realtime Web and Mobile Apps
Course content
Expand all 90 lectures 11:50:35
+ Introduction to Angular
11 lectures 01:11:00

In this video, we will learn what is an angular and it's overall introduction.

Preview 04:42

In this video we will Angular Architecture, will understand:

  • Modules

  • Components

  • Services

  • Pipes

We will look at how angular works.


Preview 07:18

List of Project Available in the course

Preview 01:17

In this video, We will setup Angular Development Environment and will generate a new project

Creating Angular Project
05:37

We will learn all the Project Files and folder in this Video.

  • App Folder

  • Assets Folder

  • Environment Folder

  • Favicon File

  • tslint.json

  • main.ts

Also we will take a look at how to build the project and run it on browser.

Angular Project Structure
06:04

In this Video we will learn Video studio Code and It's features for web development and Angular. We will look at some important Extensions for Angular Workflow

Visual Studio Code and it's Features
07:24

Very Important topic ( Decorator ). Decorator are really important in Angular they bring the different files and code together and configure them to work together.

To create component we use:

  • @Component Decorate for Components

  • Modules we will use @NgModule

  • @Injectable  for services.


Very important topic that we need to talk about it right now.

Preview 06:15

We will learn about workspace configuration | Overall  JSON structure of Angular.json file.

Project WorkSpace Configuration
08:02

In this video we will learn how the Angular Project get bootstraps. In simple words how the different pieces of code gets together to be able to run in the browser

Bootstrapping Angular Application
04:41

Angular CLI ( Command Line Utility ) which is an amazing tool to generate new project and other components of application :

  • Modules

  • Components

  • Services

  • Pipes

Angular CLI is used to run the project and build is for production.

Angular CLI
05:00

We will be learning angular console GUI utility which is really helpful for people who are not good with remembering terminal command. User can generate components, Services with Angular Console pretty much anything you can do with CLI you can do with console the good thing about it is that this show you options with description so you exactly know what available to you.

Angular Console
14:40
+ Understanding Core Concept of Angular
12 lectures 01:28:43

In this video we will learn about What are directive and will learn about ngIf directive which helps us to hide or show directive on DOM.

Theory - Angular Built-In Directives
03:32

Practical Lab for NgModule

Lab: Ng Modules
05:57

Practical Lab for Components

Lab: Components
10:15

In this video, We will learn about Dependency Injection. How it works and also it's gonna be brief introduction to DI . Later in the course we have seperate section for DI.

Theory - Dependency Injection
09:26

Let's put everything in code whatever we learned in DI Theory.

Lab - Dependency Injection
08:34

In this video, we will learn Interpolation {‌{ }} and these topics :

  • interpolation {‌{ .... }}

  • Template Expression

  • Expression Guidelines

  • Template Syntax

  • Click event (click)="Expression"

  • Introduction to Directives *ngIf



Template Syntax
13:13

Lab For *ngFor Directive In details

Lab: *ngFor
06:04

We will explore data binding techniques.

Binding Syntax
03:10
  • Event Binding Brief Intro

  • Target Event

  • Template Reference #Symbol

Event Bindings and Template Reference Variable
08:28

We will learn @input Decorator to accept values from outside the component.

Accepting Inputs from Parent Template
08:45

Will Explore @Output Decorator for sending the Data Out Side the Component

Output Decorator and Event Emitter
06:52

Pipes are used to filter data. we will take a look at some built in pipes and also will look at how we can create our custom pipe.

Pipes in Angular
04:27
+ Project: Reddit Clone App
7 lectures 49:10

Note: Download the source code for this Reddit Clone Project from Resources Section of this video.

Creating Reddit Clone Project and Bootstrap Implementation
09:15
UI form for Adding Articles
02:24
Add Article Function
04:16
Article Component and Marking
05:21
Article Class and Modified Component
06:18
Multiple Articles and Adding Articles
16:05
Deploying Reddit Clone App
05:31
+ Built-In Directives In Details
6 lectures 41:18

Introduction to this Chapter

Introduction to this Chapter
00:39

NgIf directive is used to hide and show different DOM elements on the DOM.

NgIf
07:17

A Switch Statement for in HTML

NgSwitch
07:25

NgStyle is amazing directive sets up the style Dynamically

NgStyle
05:44

Amazing Directive which let us apply classes dynamically.

NgClass
08:12

My Most favourite directive  Which performs a loop in HTML DOM.

NgFor in Details
12:01
+ Forms In Angular
4 lectures 01:25:30

Forms are very important in web application. Whenever you need to capture data from user forms are the way to do that. let's take a look at introduction to Forms in this Chapter.

Introduction to Forms
03:37

Template Form are easy and quick way to inject forms in Html code.

Template Driven Forms
23:07

Angular has amazing concept called Reactive forms which can be generated and created by TypeScript Code which makes our code short and manageable.

Reactive Forms
33:03

Workshop where you learn how to build a library which can used to build object based forms

Exercise : Object Based Forms
25:43
+ Dependency Injection in Details
5 lectures 32:09

In this video we will learn the concept Singleton Pattern

Singleton Pattern
02:45

DI Lab

Lab: Dependency Injection
16:24

Factory Pattern where you learn How to Create Multiple instance of Services Using Factory Pattern.

Theory - Factory Pattern
03:21

We will learn Hierarchy of Dependency Injection.

Hierarchical Dependency Injectors
04:58

Let explore different type of Providers available in Angular .

Lab: Types of Providers
04:41
+ HTTP Module
2 lectures 09:55
HTTP Module Introduction
01:15
Lab - HttpModule and HttpClient
08:40
+ Routing in Angular
9 lectures 54:00
Theory - Angular Routing Introduction
01:06
Theory - Angular RoutingModule and Router
04:32
Lab - Angular RoutingModule and Router
16:06
Lab - Child Routes
09:36
Theory - AuthGuard In Angular
01:54
Theory - Lazy Loading Modules
02:50

Lazy Loading has been changed in Angular 8. If you are Using Angular 8 then use this syntax in Angular 8.

Updates - Theory - Lazy Loading
01:03

Lab - For Lazy loading and Auth Guards.

Lab - Lazy loading and AuthGuards
13:12
Updates - Lab - Lazy Loading
03:41
+ Angular Material - Project
12 lectures 01:45:53

What we will be building in the crash course ?

Preview 02:34

Let's Understand What is Angular Material and Why should be use it ?

Theory - Introduction to Angular Material
04:14

In this video we will explore Angular Material Documentation and will learn how to use Angular Material Documentation to learn more about Angular Material Components.

Exploring Angular Material Documentation
10:34

In this video we will learn how to setup Project with Angular material and Also we will learn how to use Angular Material Component.

Adding Angular Material to Angular Project
07:34

In this video, we will Generate Auth Module and Dashboard Module and required components  to Build our Nice UI for Dashboard.

Project Routing and Modules
08:54

We will convert our project to SCSS preprocessor for CSS and also it's easier to add Material Module in to one module so we will only need import in one place.

Converting project to SCSS and Adding material Module
04:40

We will build a Responsive dashboard for web Application.


Side Nav Bar

Notification Panel

Top ToolBar

Dashboard Content Area

Navigation Component
23:05

We will use ngFor to generate Side Nav Links and also we will create components to render in our dashboard content Area.

Navigation from Object and Child Components
08:44

We will use SCSS preprocessor to build custom css and make dashboard ui responsive.


Dynamic CSS
13:58

Angular Material Provide Dashboard Schematics which is a set of cards to build responsive custom card.

Angular Material Dashboard Symatics
13:37
Testing Dynamic CSS and Dashboard
02:57
Testing Project
05:02
+ Mobile App Development Project with Angular and IONIC 4
22 lectures 02:52:56
Setting Up The Development Environment
03:17
Creating New IONIC Project
03:08
Opening Project in VS Code
07:03
Home Module and IONIC Documentation
05:00
Adding Fab Button
04:07
Add Expense Modal
14:18
Expense Modal #2
08:49
Add Component UI
13:35
Application in IOS Emulator
08:55
Running Application on Android Emulator
03:41
Home Page UI
05:09
Observable to Hold Data
04:06
Add Expense Validation
19:01
UI For Expense In Home Page
06:07
Saving and Getting Data From Storage
09:44
Change Date Event
07:20
Testing Application on IPhone Emulator
03:21
Testing on Android Emulator
02:38
Decimal Keyboard
04:01
Deploying to Google Play Store
18:08
Deploying to App Store
19:36
Requirements
  • HTML
  • CSS
  • JavaScript
  • TypeScript
Description

Angular was designed by Google to address challenges programmers face building complex, single-page applications. This JavaScript framework takes care of the back end so you can take care of the client side. Angular 8 Essential Training introduces you to the essentials of this "superheroic" framework, including powerful features such as rich templates, change detection, user interactions, two-way data binding, comprehensive routing, and dependency injection.

Awais Jamil steps through the framework one feature at a time, focusing on the component-based architecture of Angular. Learn what Angular is and what it can do, as Awais builds a full-featured web app from start to finish. After mastering the essentials

Topics Included:

  • What is an Angular ?

  • Angular Project Structure

  • Angular CLI

  • Angular Console

  • Modules

  • Components

  • Dependency Injection

  • Services

  • Building Events and Properties

  • Getting Data to Components

  • Template Forms

  • Reactive Forms

  • Routing

  • HTTP Module

  • Angular Deployment

Who this course is for:
  • JavaScript Developer wants to Dive Deep into Angular Framework and Build Single Page Web Apps and Mobile App.