Angular 9 Masterclass with TypeScript, Firebase, & Material Course Site

Angular 9 Masterclass with TypeScript, Firebase, & Material Course Site

61.54

Language: English

Assessment: Yes

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

What you’ll learn

Angular 9 Masterclass with TypeScript, Firebase, & Material Course Site

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

Requirements

  • NodeJS Installed
  • Basic knowledge of NodeJS, NPM, node_modules
  • We’ll use Visual Studio Code as our IDE
  • You should know JavaScript
  • Experience with Object-Oriented Programming is a plus

Description

Angular is one of the most popular front-end frameworks for building single-page applications or web apps with HTML, CSS, and TypeScript.Learning Angular 2 or Angular 4/5/6/7/8 or Angular 9 or simply Angular(as the Angular team likes to call it) on your own can be confusing or frustrating at times. It might require you to browse through several tutorials, articles, YouTube videos, etc and get a grip on it.

 

If you want to get rid of going through all that trouble and just focus on learning Angular, this is THE course 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 the course 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 AJAX Calls to REST APIs
  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)
      • Metadata – basic overview
      • Lifecycle hooks
      • Order and triggering of each hook
      • Hooks specific to Components and Decorators

      Dependency Injection(Providers)

      • Dependency Injection – Why?
      • The Dependency Injection – As a design pattern
      • Dependency Injection – As a framework
      • Dependency Injection – What?
      • Injectors and Providers
      • Hierarchical Dependency Injection

      Angular 9 Masterclass with TypeScript, Firebase, & Material Course Site

      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 the map, subscribe, catch, retry, etc
      • Subjects
      • Sharing data across Components using Service

      Directives(@Directive)

      • Built-In Structural Directives – NgFor, NgIf, NgSwitch
      • Built-In Attribute Directives – NgClass, NgStyle, NgNonBindable
      • Building a Custom Structural Directive
      • Building a Custom Attribute Directive

       

      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)
      • Metadata – basic overview
      • Lifecycle hooks
      • Order and triggering of each hook
      • Hooks specific to Components and Decorators

      Dependency Injection(Providers)

      • Dependency Injection – Why?
      • The Dependency Injection – As a design pattern
      • Dependency Injection – As a framework
      • Dependency Injection – What?
      • Injectors and Providers
      • Hierarchical Dependency Injection

      Angular 9 Masterclass with TypeScript, Firebase, & Material Course Site

      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 the map, subscribe, catch, retry, etc
      • Subjects
      • Sharing data across Components using Service

      Directives(@Directive)

      • Built-In Structural Directives – NgFor, NgIf, NgSwitch
      • Built-In Attribute Directives – NgClass, NgStyle, NgNonBindable
      • Building a Custom Structural Directive
      • Building a Custom Attribute Directive

       

      Pipes(@Pipe)

      • Build-in Pipes
      • Building Custom Pipes
      • Pure and Impure Pipe

      Forms

      • Template Driven Forms
      • Reactive forms
      • Form Validations
      • Custom Synchronous form validations
      • The Custom Asynchronous form validations

      Custom Decorators

      • Metadata – deep dive
      • Building Custom Class Decorator
      • Building Custom Property Decorator

      Integrating with Third-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 Apps in Angular on your own
      • Understand and fix common compile-time and run-time errors in minutes
      • Understand and implement clean and maintainable code like a professional
      • Apply best practices when 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 and build your first Angular app within minutes.

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

      • Displaying data and handling DOM events
      • Building reusable components
      • Manipulating the DOM using directives(both Structural and Attribute)
      • Transforming data using pipes
      • Building template-driven and reactive forms 
      • Consuming REST APIs using HTTP services 
      • Handling HTTP errors properly
      • Using Reactive Extensions and Observables
      • Adding routing and navigation to adhere to the basics of a Single Page Application
      • Building real-time, server-less apps with Firebase
      • Building beautiful UIs using Angular Material, and Material Design Bootstrap