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

By default, every observable we've created has been a unicast observable. A unicast observable is when every observer is given its own set of data. 

## Unicast observables in action

So far, we've been working with one observer. We can have multiple observers if we'd like. For every observer we have, we'll get a unique set of data. Let's look at an example.

const { Observable } = rxjs;
const { tap } = rxjs.operators;

const observable = new Observable(observer => {
    observer.next('Hello');

    observer.complete();
}).pipe(
    tap(value => console.log('Tap function is running:', value))
);

observable.subscribe(
    (value) => console.log('1st Observer:' , value),
    (err) => console.log(err.message),
    () => console.log('1st Complete')
)

observable.subscribe(
    (value) => console.log('2nd Observer:' , value),
)

codemirror

console

There are a couple of things going on here. First, we're grabbing a new operator called `tap`. The `tap` operator will allow us to catch the value emitted from the observable. It's similar to the `map` operator, except we don't have to return the value. It's an operator meant solely for debugging. We're using it in our pipeline to log the value.

Below the observable, we have two observers. They both have different log messages to help us identify which observer is running.

If we view the output, we'll see the messages get logged. The most important thing to notice is the `tap()` operator running twice. 

When we create the first observer, the observable will emit the data and send the data down the pipeline. This will cause the `tap()` operator to log the value. Afterward, the observable will run the completion event where the first observer's `complete()` function runs. In a way, this will *reset* the observable.

Next, when we create the second observer, the observable will run *again*. It will emit the data again and run it through the pipeline. This is why the `tap()` operator runs twice. 

In both instances, the `tap()` operator is provided with their own set of data. We're being offered a fresh set of data for each observer. This is called a unicast observable. It's essential to understand this because we shouldn't assume that we'll get the same data every time. Just because one observer gets one set of data doesn't guarantee another observer will get the same data.

By default, every observable we've created has been a unicast observable. A unicast observable is when every observer is given its own set of data. 

# Unicast observables in action

So far, we've been working with one observer. We can have multiple observers if we'd like. For every observer we have, we'll get a unique set of data. Let's look at an example.

In this lesson, we'll learn how unicast observables work.

First Steps

Our First Project

Component Basics

Pipes

Directives

Modules

Routing

Advanced Components

Services

RxJS

Reactive Forms

Template Forms

Custom Validators

Authentication

Conclusion

Unicast Observables

Unicast observables in action