Designing and Architecting Web Applications

TypeScript for Angular Developers

This module 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 module, 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 module, 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 going to start things off by scaffolding a new project. You'll learn how to start a project both locally and on Educative.

## Scaffolding a new project locally

We installed the CLI in the previous lesson. We're going to use it to create a new project. In the terminal, we'll need to run the `ng new` command.

```bash
ng new reverse-phrase
```

After inputting the command, we'll need to provide a name for the project. The first project we'll create will reverse a string based on an input. Hence, the reason we're calling it the *reverse phrase*.

The CLI will ask us a couple of questions about the project we'd like to generate. These are just options to customize the project further. Generally, we'll be asked if we'd like to turn on routing. Routing is a topic we'll cover in the future, but we don't need it right now. Select *No*. 

Then, it will ask us to select a CSS tool. Plain CSS will work.

Just hit *enter* for everything. We'll be using the default settings. We won't be doing anything super complex, so the default settings will work just fine. 

After running the command, the CLI will start downloading the starter files and install its dependencies.

## Starting/stopping the server

Angular will provide us with a development server to locally preview the app in the browser. It will even watch the files for changes and refresh the application for us. The best part is that we don't need to configure the server. It works out of the box. This lets us focus on developing the application.

There are two commands to start the server: `npm start` and `ng serve`. You will find that most tutorials will use either one. However, they're 100% identical. There aren't any differences between the two. Behind the scenes, the `npm start` command will run the `ng serve` command. Feel free to use either one. In the terminal, run the following command:

```bash
ng serve
```

Angular will begin to compile your project. It will then watch your files for changes. Anytime you make a change, Angular will recompile the project. You should be provided with a link to view your project in the browser.

By default, you can view the project over at http://localhost:4200 or http://127.0.0.1:4200

Here's an example of what you may see:


We're going to start things off by scaffolding a new project. You'll learn how to start a project both locally and on Educative.

# Scaffolding a new project locally

We installed the CLI in the previous lesson. We're going to use it to create a new project. In the terminal, we'll need to run the `ng new` command.

```bash
ng new reverse-phrase
```

After inputting the command, we'll need to provide a name for the project. The first project we'll create will reverse a string based on an input. Hence, the reason we're calling it the *reverse phrase*.

The CLI will ask us a couple of questions about the project we'd like to generate. These are just options to customize the project further. Generally, we'll be asked if we'd like to turn on routing. Routing is a topic we'll cover in the future, but we don't need it right now. Select *No*. 

Then, it will ask us to select a CSS tool. Plain CSS will work.

Just hit *enter* for everything. We'll be using the default settings. We won't be doing anything super complex, so the default settings will work just fine. 

After running the command, the CLI will start downloading the starter files and install its dependencies.

# Starting/stopping the server

Angular will provide us with a development server to locally preview the app in the browser. It will even watch the files for changes and refresh the application for us. The best part is that we don't need to configure the server. It works out of the box. This lets us focus on developing the application.

There are two commands to start the server: `npm start` and `ng serve`. You will find that most tutorials will use either one. However, they're 100% identical. There aren't any differences between the two. Behind the scenes, the `npm start` command will run the `ng serve` command. Feel free to use either one. In the terminal, run the following command:

```bash
ng serve
```

Angular will begin to compile your project. It will then watch your files for changes. Anytime you make a change, Angular will recompile the project. You should be provided with a link to view your project in the browser.

By default, you can view the project over at http://localhost:4200 or http://127.0.0.1:4200

Here's an example of what you may see:


You'll learn how to create an Angular app with a few commands, run the server, and turn it off.

Before We Begin

Our First Project

Component Basics

Pipes

Directives

Modules

Routing

Advanced Components

Services

RxJS

Reactive Forms

Template Forms

Custom Validators

Authentication

Conclusion

Creating an App

Scaffolding a new project locally