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

We're able to load the `<app-home-main>` component in the app's template. However, it's not what we're aiming for. We want to load it if the client is requesting the homepage. The Angular Router can help us with this. First, we'll need to make some modifications to our modules.

# Understanding routing

Routing is the idea of tying components to a path in the URL. URLs are mainly comprised of a domain and a path. 

Other things make up a URL, but I'm keeping it simple to explain how routes work. The path portion of a URL is where we request specific resources from a server. When the server serves our application, Angular will grab the path from the URL. It will match the path against the routes registered in our application. 

Angular will not magically know which path should render which component. It's our responsibility to tell Angular what to render when a specific URL is visited. This process is what's known as routing. 

It's not necessary to add routing to an application, but there are a lot of benefits to doing so. Some benefits are:

- Separating the content into different areas
- Protecting areas of an app based on a specific set of rules
- Easier to maintain

Imagine navigating around an app. For example, let's say you're on an e-commerce site. Some things you might do is click on products, view your cart, or checkout. Each of these actions would lead you to different pages. If we built an app like this, there would be a lot of problems if we didn't dedicate URLs to each page.

- You can't refresh the page and keep your location within the app.
- You are unable to bookmark a page and revisit it.
- You are unable to share a page with other people.

By adding routes, these issues are non-existent. A URL can point to a specific resource in our application. Angular comes with a routing feature to help us build custom URLs in our application.

# Routing module

We created a module in the previous lesson with the `--routing` option in the command. It generated two modules, one of them with `-routing` in its name. Modules with `-routing` in their name are called routing modules. 

Routing modules are responsible for defining new routes and configuring the router. Every routing module is tied to another module. Angular recommends routing module to have a parallel name to its companion module using the suffix `-routing`. 

For example, if we have a module called `home`, it's routing module should be called `home-routing`. The CLI takes care of adding the suffix for us.

# Adding a new route

Routes must be defined in routing modules. We'll define our first route in the `home-routing.module.ts` file. In this file, there's a variable called `routes`. It's set to an array. Let's modify it to the following:

In this lesson, we'll learn how to use the RouterOutlet element to load a component for a route.

First Steps

Our First Project

Component Basics

Pipes

Directives

Modules

Routing

Advanced Components

Services

RxJS

Reactive Forms

Template Forms

Custom Validators

Authentication

Conclusion

The RouterOutlet Placeholder

Understanding routing