Angular 15 Masterclass with TypeScript, Firebase, & Material

Master and build reactive Single Page Applications(SPA) from scratch using Angular (formerly "Angular 2" or "AngularJS")

What you'll learn:

• Built a Single Page Application using Angular
• Using TypeScript
• Implementing various building blocks in Angular
• Using Third Party Modules like Angular Material and AngularFire

Angular is one of the most popular front-endframeworks for building single-page applications or web apps with HTML, CSS, and TypeScript. So basically, if you want tobecome a successfulfront-end or a full-stack developer, that gethired,you need to haveAngular as a skill under your belt.

Learning Angular 2 or Angular 4/5/6/7/8/9/10/11/12/13/14 or Angular 15 or simply Angular(as the Angular team likes to call it) on your own can be confusing or frustrating at times. It might require youto browse through several tutorials, articles, YouTube videos, etc, and get a grip onit.

If you want to get rid of going through all that trouble and just focus on learning Angular, this is THEcourse for you. In this course, I'll take you through an exciting journey of learning Angular concepts through fun and easy to understand coding examples.

______________________________________________________________________________________________________________________________

As thecourse progresses, you'll get familiar with:

1. Single Page Applications and why should we use Angular to build them

2. TypeScript and ESNext( ECMAScript 2015 or ES6 and later versions of it)

3. Angular Modules, the @NgModule Decorator and Angular Application Bootstrap Mechanism

4. Angular Components, the @Component Decorator, component communication and LifeCycle Hooks

5. Directives, the @Directive Decorator, and creating custom structural and attribute directives.

6. Dependency Injection In Angular, the @Injectable Decorator, Services, RxJS Observables and making AJAXCalls to RESTAPIs

7. Routing, Child Routing, and Route Guards

8. Pipes the @Pipe Decorator, and creating custom pure pipes and impure pipes.

9. Template Driven Forms and Reactive Forms in Angular

10. Custom Decorators

11. Using third-party libraries like Angular Material, Firebase, etc.

Section 1 - Single Page Applications, Why Angular and Project Setup:

1. Course Overview

2. Introduction to SPA

3. What do we need Angular for?

4. Setting up the Development Environment.

5. Angular Application Architecture

6. Angular CLI

7. Project Structure

Section 2 - TypeScript and ESNext:

1. What is TypeScript

2. Basic Types in TypeScript

3. Variable Declarations using Let and Const

4. Spread and Destructure.

5. Classes

6. Interfaces

7. Arrow Functions

8. Modules

9. fetch API

10. async / await

Angular Modules and Angular Components

• @NgModule

• Angular Application Bootstrap Mechanism

• @Component

• Data/Property Binding

• View Encapsulation

• Inter-component Communication (@Input/@Output, Event Emitter)

• Template variables (ViewChild/ContentChild)

• Content Projection(ng-content)

• Templates – will be covered as part of components

• Metadata – basic overview

• Lifecycle hooks

• Order and triggering of each hook

• Hooks specific to Components and Decorators

Dependency Injection(Providers)

• Dependency Injection - Why?

• Dependency Injection - As a design pattern

• Dependency Injection - As a framework

• Dependency Injection - What?

• Injectors and Providers

• Hierarchical Dependency Injection

Routing

• Child routes

• Route params

• Route Guards - CanActivate, CanActivateChild, CanDeactivate, Resolve, CanLoad

Services(@Injectable)

• Service as a singleton, data sharing.

• HttpClient, HttpHeaders, HttpParams

• Observables with Operators like themap, subscribe,catch, retry etc

• Subjects

• Sharing data across Components using Service

Directives(@Directive)

• Built-InStructural Directives - NgFor, NgIf, NgSwitch

• Built-InAttribute Directives - NgClass, NgStyle, NgNonBindable

• Building aCustom Structural Directive

• Building aCustom Attribute Directive

Pipes(@Pipe)

• Build-in Pipes

• Building Custom Pipes

• Pure and Impure Pipe

Forms

• Template Driven Forms

• Reactive forms

• Form Validations

• Custom Synchronousform validations

• Custom Asynchronousform validations

Custom Decorators

• Metadata – deep dive

• Building Custom Class Decorator

• Building Custom Property Decorator

Integrating withThird-Party Libraries

• Material Design Bootstrap

• Angular Material

• Firebase

______________________________________________________________________________________________________________________________

By the end of this course, you'll be able to:

• Build end-to-end Single Page AppsinAngular on your own

• Understand and fixcommon compile-time and run-time errors in minutes

• Understand and implementclean and maintainable codelike a professional

• Applybest practiceswhen building Angular apps

We'll always start with the basics and go from there.Right from the beginning of the second module, you'll jump in andbuild your first Angular app within minutes.

Angular 2 and all the later versions of Angularhas been written in TypeScript. So, before getting started with Angularinsection 3, you'lllearn the fundamentals of TypeScript and object-oriented programmingin section 2to better understand and appreciate this powerful framework.

Over the next 15hours, you'll learn theessentials of building Single Page Applications(SPAs)with Angular:

• Displaying dataand handling DOM events

• Building reusablecomponents

• Manipulatingthe DOMusingdirectives(both Structural and Attribute)

• Transforming data usingpipes

• Buildingtemplate-driven and reactiveforms

• Consuming RESTAPIs usingHTTPservices

• HandlingHTTPerrorsproperly

• UsingReactive Extensionsand Observables

• Addingrouting and navigation to adhere to the basics of a Single Page Application

• Building real-time, server-lessapps withFirebase

• Buildingbeautiful UIs usingAngular Material, andMaterial Design Bootstrap

So, if you're a busy developer with limited time and want to quicklylearn howtobuild SPAs with Angular, you're at the right place.

All these topics are coveredbyover 15 hours of high-qualitycontent. Taking this courseisequivalent togoing through hundreds ofarticles, tutorials, and videos on the web!Just that the content is laid out to cover all that you'll get to know during all that time! Once you go through the course(or just the preview videos), you'll know that the topics are explained in a clear and concise mannerwhich is going to save youa lot ofyour precious time! This course is also packed with techniques and tips, that you can only learn from a seasoned developer.You'll see howwe'll createa brand new Angular project with Angular CLIand buildan application from Ato Z, step-by-step.

You'll also get to knowways tobuild a real-time SPA with Angular, Firebase,and Bootstrap. This application exhibits patterns that you see in a lot of real-world applications:

• Master/detail

• CRUDoperations

• Interaction with a data store

• Forms with custom validation

• And a lot more...!

PREREQUISITES

You don't need familiarity with TypeScript or any previous versions of Angular. You're going to learn both TypeScript and Angular from scratch in this course.

______________________________________________________________________________________________________________________________

WHATOTHERSTUDENTSWHOHAVETAKENTHISCOURSESAY:

"Explanation is crisp.. instructor is comfortable with the topic...examples used are good and easy to understand...various aspects of the code are explained...using MDB and material for angular both are covered for creating UI components...just only the full screen is shown at all times.. which makes things appear very small... screen highlight or zoom is not used while recording video.. rest all is great.. for learning angular" - Maneesh Parihar

"內容詳細"- Huang JiaLin

"That's a very comprehensive course on Angular that also teaches Angular Material and Firebase @Siddharth Ajmera: Thanks for this great course! As with so many other courses I would love to see some Summaries or cheatsheets as PDFs or foils and also I'd appreciate to see more schematics, graphs, and sketches." - He

"講解詳細" -曾玟凱

"This course was perfect for beginners like me. I learned so much from it. Thanks a lot Siddharth for such a good course. Looking forward to more courses from you. Can you please add a section that demonstrates building of an application end to end?" - ankita daur

"Siddarth explained the course in a very simple manner and with simple examples. Would love more indepth on Angular Material and Firebase from him. Great course." - Kumar

"There is so much information provided in this course. I was looking for custom Decorators and use cases where in they could be implemented to make the code cleaner. I found perfect examples on similar topics in this training. This course is great for beginners." - Kewal Shah

______________________________________________________________________________________________________________________________

30-DAY FULL MONEY-BACK GUARANTEE

This course comes with a 30-day full money-back guarantee. Take the course, watch every lecture, follow along while coding, and if you are not happy for any reason, contact Udemy fora full refundwithin the first 30 days of your enrolment.All your money back, no questions asked.

ABOUT YOUR INSTRUCTOR

Siddharth is a software engineer with more than 6 years of professional experience. He is the author of this coursewithmore than 60,000students in 192 countries. He has done hisBachelor of Engineering in Computer Science. He has worked on several Modern Web Applications. Chatbots, and frameworks. He writes articles about Angular, and Chatbots on Medium.

What are the requirements?

• Basic familiarity with HTML, CSS, and JavaScript

• NO knowledge of AngularJS or Angularis required

What am I going to get from this course?

• Establish yourself as a skilled professional developer

• Build real-world Angular applications on your own

• Troubleshoot common Angular errors

• Master the best practices

• Write clean and elegant code like a professional developer

What is the target audience?

• Developers who want to upgrade their skills and get better job opportunities

• Front-end developers who want to stay up-to-date with the latest technology

• Back-end developers who want to learn front-end development and become full-stack developers

• Hobbyist developers who are passionate about working with new frameworks