fbAPIKey

fbAuthDomain

fbDBUrl

fbProjectId

fbStorageBucket

fbSenderId

Gain insights into designing scalable Angular applications. Learn about components, directives, routing, RXJS, forms, and Firebase authentication to develop rich, interactive web solutions.

Angular Designing and Architecting Web Applications.png

angular-starter-v5.tar.gz

Angular

Angular Install Dependencies

Angular with Relaunch

This course will teach you step-by-step how to design and architect large Angular applications. 

You’ll start with the basics: components, pipes, and directives. These are the building blocks of any Angular application, so you will get plenty of hands-on practice with this material. Next, you’ll ramp things up by stepping into modules, routing, and RXJS, where you’ll learn how to declaratively manage data and dive deep into observables.

In the latter half of the course, you’ll cover reactive and template forms (crucial for handling user data), as well as custom validators and setting up authentication with Firebase.

By the end of this course, you'll be able to design large, scalable applications, be able to develop rich interactive components, and you’ll really understand how Angular works under the hood.

Angular: Designing and Architecting Web Applications

In the last example, we used the `fromEvent()` function to assist us in creating an observable. It makes an observable out of an element where it emits the event if the `input` event is triggered. We're able to create an observable ourselves if we need more control over when an event is emitted.

# The `Observable` object

We'll be starting from scratch. A low-level observable can be created by creating a new instance of the `Observable` object. Let's see what that looks like.

const { Observable } = rxjs;

const observable = new Observable(observer => {
    observer.next('Hello!');

    observer.complete();

    observer.error(new Error('An error has occurred.'));
});

In the example above, we're grabbing the `Observable` object from `rxjs`. We're creating a new instance out of it. We can pass in a function to the constructor function where we'll be provided an object called `observer`. In some examples online, you may see this parameter aliased as `subscriber`.

The `observer` parameter is an object with functions for interacting with the observer. The functions can be used to emit a value, stop the observable completely, or throw an error. We have full control over the observable.

There are three functions we can use.

- `next()`: This will send a payload of data to the next observable. 
- `complete()`: This notifies the observer that the observable is finished sending data.
- `error()`: This notifies the observer that an error has occurred in the observable.

Currently, we're using the `next()` function to send a string as the payload. This will tell the observable to run the payload down the pipeline. Eventually, after the data has flowed through the pipeline, the observer will receive the data. 

We can chain the `pipe()` function to add operators. Remember: operators will return a new observable. The `next()` function sends the payload down the pipeline. We're not going to add pipes to this example. Pipes are entirely optional.

As for the `complete()` function, we don't need to supply it anything.

The `error()` function can be provided with any value. It's usually recommended to create a new instance of the `Error` object.

# Subscribing to the observable

Let's listen for the changes in the observable by creating an observer with the `subscribe()` function.

In this lesson, we'll look at how we can create an observable from scratch.

First Steps

Our First Project

Component Basics

Pipes

Directives

Modules

Routing

Advanced Components

Services

RxJS

Reactive Forms

Template Forms

Custom Validators

Authentication

Conclusion

Creating Raw Observables

The `Observable`

Creating Raw Observables

The Observable

The `Observable`