Home / Tutorials / Angular / First App & Bootstrapping

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.

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 on your keyboard and then Delete 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.

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. It’s value will be shown where {{ title }} is in the HTML.

This is how dynamic content is placed inside our application, a process known as 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; A self-contained unit of HTML (structure), CSS (style) and Typescript (functionality) code.

We can, and will, have many components 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 value for the selector property.

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

What we’re doing is creating whatever is in the selector property, into an HTML tag. Then we dynamically inject the code from our component into that tag.

We can also see two other properties, templateUrl and styleUrls . These tell Angular on which HTML page to look for the selector we specify, and where to find its styles respectively.

We can switch out components as we need to, which means that our entire application is in a single page.

Bootstrapping

Bootstrapping is the technique of loading, or initializing, our Angular application. In other words, it’s how the application starts.

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

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 extra script imports that isn’t in the index.html source code.

When the Angular CLI builds the application, it will inject these scripts into the source code. When a user visits the page, the first script that gets executed is the main.ts file.

Let’s open it up and see what gets executed. It should look similar to the following.

Example: main.ts
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

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

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

The first two import statements allows the script to check if it’s in development or production mode in the if conditional. That part isn’t important at the moment though.

Then we have two more imports, AppModule and platformBrowserDynamic.

The platformBrowserDynamic import allows us to use the bootstrapModule() method, which does everything needed to start the application. Notice the argument for the method is the other import, AppModule.

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

When we create a new project, Angular will automatically generate a default module in src/app/app.module.ts for us. That default is the AppModule.

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

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 property is a list of all the components that will be shown on the index.html page when the application first starts.

Currently, that is the “AppComponent”, which is the main component of our application that we edited in the sections above. It’s where we define the content that we see on the page, like the “Hello World” text.

It’s also where we add other components, and sub-components, that we need in the application.

Let’s go thorugh it step by step.

  1. When a user visits our page, the main.ts script loads.
  2. This executes the bootstrapModule() method that loads the AppModule from src/app/app.module.ts .
  3. In this module we tell Angular that we want it to load the “AppComponent” from src/app/app.component.ts .
  4. Angular then analyzes the “AppComponent” file and sees the “app-root” selector.
  5. It knows <app-root> is in index.html so it mounts the “AppComponent” onto it.

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.

Previous
Environment Setup
Next
Components