Angular First App & Bootstrapping Tutorial

In this Angular tutorial we do a quick edit of our first app. We also take a look at the App component, how it's loaded and some of the files that were generated when we created the app.

Here's a table of contents of what you'll learn in this lesson:
(click on a link to skip to its section)

Let's jump right in.

Editing our first app

In the development server setup section of the previous lesson, we created and served our first app.

Now, we’ll edit our first app to demonstrate how easy it is to work with Angular.

If we take a look at the project, we will see a bunch of files and folders in the Explorer pane of Visual Studio Code.

At first glance this may look a little intimidating, but it’s really not. We will go through some of these files in just a bit, but let’s edit our app first.

1. In the Explorer pane, expand the src folder, then expand the app folder inside that as well. Now double-click the app.component.html file to open it up in the Editor pane.

2. Press Ctrl + A and then Delete on your keyboard to delete everything inside the document.

It’s okay to delete this code because it’s just placeholder content that Angular generates when we create a new project.

3. Add the following code and save the document with Ctrl + S.

Example: app.component.html
<h1>Hi! This is {{ title }}</h1>

If we go back to the browser, we can see that the content on the page has changed from Angular’s starting screen to our simple H1.

Let’s take it a step further and edit the dynamic content of our app.

1. Open the app.component.ts file.

2. At the bottom of this file, look for the part that says title = 'my-app' ;

This title property is linked to the one in the HTML file. Anything we put in here will be shown where {{ title }} is in the HTML.

This is how dynamic content is placed inside our application, a process called data binding. The data can be created manually, calculated dynamically or come from an external resource, like a database.

3. Replace the text between quotes with ‘my first app’ so that it looks like this.

Example: app.component.ts
...
export class AppComponent {
  title = 'my first app';
}
...

If we go back to the browser we can see the text changed from “Hi! this is my app” to “Hi! This is my first app”.

All of this is called a component, which is simply a self-contained unit of HTML (structure), CSS (style) and Typescript (functionality) code.

We can and should have more than one component in our application.

App component

Let’s take a quick look at how it works.

Keep the app.component.ts file open in the editor, and open the index.html file in the src folder.

It should look something like the following.

Example: index.html
...
<body>
  <app-root></app-root>
</body>
...

Notice in the body we have a tag called <app-root>.

If we look in the app.component.ts file inside the @Component decorator, we see ‘app-root’ as a selector.

Example: app.components.ts
...
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
...

Essentially, we’re creating an HTML tag and then dynamically injecting the code from our component into that tag.

We can also see two other properties called templateUrl and styleUrls . These tell Angular on which HTML page to look for the selector we specify, like ‘app-root’, and where to find its styles.

This way we can build a complete application, with dynamic content, on a single page and simply switch out components as we need.

Bootstrapping

Bootstrapping is simply the teqnique of loading, or initializing, our Angular application. In other words, how does the Angular application start, how does it kick off.

Go to the browser, right-click anywhere on the page and select View page source.

You should see something similar to the example below.

Example: HTML Source
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css"></head>
<body>
  <app-root></app-root>
<script src="runtime.js" defer></script>
<script src="polyfills.js" defer></script>
<script src="styles.js" defer></script>
<script src="vendor.js" defer></script>
<script src="main.js" defer></script>
</body>
</html>

Notice that there are some extra script imports added that isn’t present in our index.html source code file.

The Angular CLI will automatically bundle all the application’s code and inject these scripts into the index file when building our application.

When a user visits the page, the script files are executed. The first code to be executed is the code we write in our main.ts file, also located in the src folder.

Let’s open it up and have a closer look at what gets executed.

Example: main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

First, we have a couple of imports. Then, we check if we are in production or development mode. Finally, we get to the bootstrapModule() method.

This method is what Angular uses to do everything that’s needed to start the application. Notice the argument for the method is AppModule which is imported from src/app/app.module.ts.

In the Architecture lesson , we learned that Angular organizes all of its building blocks, like components, into modules. The default module being ngModule.

If we open up the app.module.ts file, we see the @NgModule decorator with a bootstrap array.

Example: app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent  } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

This array lists all of the components that should be known to Angular when it analyzes our index.html file.

The AppComponent is the main component of our application that we edited in the sections above.

So, let’s break it down step by step.

  1. The main.ts file is started when the user visits our page.
  2. There, we bootstrap an Angular module with the AppModule (in src/app/app.module.ts) as the argument.
  3. In this module we tell Angular that we want it to know about and load the AppComponent (in src/app/app.component.ts) when it tries to start.
  4. Then Angular will analyze the app.component.ts file and see the <app-root> selector, which it knows is also present in the index.html file.
  5. Angular will then insert the contents of the app.component.html file where the <app-root> selector is in index.html.

Application files

Now, let’s quickly take a look at all the files and folders in our project’s main directory.

  • 🗀 e2e contains the files for ‘end-to-end’ testing with Protractor
  • 🗀 node_modules contains all the dependencies for the project that was downloaded with npm when we initialized the project
  • 🗀 src contains the source code for our app, we will mostly be working inside this folder
  • 🗎 .browserslistrc is used by the build system to help our app be compatible across multiple browsers
  • 🗎 .editorconfig sets the configuration for the code we write, like the character set to use, indentation, quotes etc.
  • 🗎 .gitignore is prepopulated with Angular specific files and folders that should be ignored when we use Git with our project
  • 🗎 angular.json contains configuration options for this project’s Angular setup
  • 🗎 karma.conf.js contains the configuration options for the Karma launcher (Karma launches the Jasmine unit testing module)
  • 🗎 package.json contains the lists of the dependencies and dev-dependencies of our project (Everything in the node_modules folder)
  • 🗎 tsconfig.json and its variants contain the configuration options for TypeScript

Many of these won’t need modification at all, the defaults are fine for most projects.

Now that we know what the files are for, it’s much less intimidating.