Angular First App

Your First Angular App

In the previous chapter, we generated a brand new application named my-first-angular-app.

Now, it is time to launch a local development server and view your app in the browser!

We will also take a quick tour of the massive folder structure Angular generated.

Serving the Application

To view your application, you must navigate inside the newly created project folder.

Then, you run the ng serve command to start the Angular development server.

cd my-first-angular-app
# The --open flag automatically opens your default browser!
ng serve --open

Your application is now running locally at http://localhost:4200/.

Whenever you modify and save a file, the server will automatically reload the webpage for you!

Understanding the Folder Structure

When you open your project in a code editor like VS Code, you will see many files.

The most important directory for your daily development is the src/ folder.

• src/index.html: The main HTML file. It contains the <app-root> tag where Angular injects your app.
• src/styles.css: Your global stylesheet that applies CSS to the entire application.
• src/main.ts: The main entry point of your app. It tells Angular to load the AppModule.

The App Component

Inside the src/app/ folder, you will find the files for your root component.

Every Angular app has at least one component, traditionally named app.component.ts.

This component controls the main view of your website.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-first-angular-app';
}

The templateUrl points to the app.component.html file, which dictates what the user actually sees.

If you open app.component.html and delete everything inside it, your browser will show a blank white page!

The App Module

Also inside the src/app/ folder is app.module.ts.

This file organizes your app into cohesive blocks of functionality.

Every new component you create must be declared in this module before it can be used.