Understand Angular 4 Application Terminologies

Angular Tutorial

What is Bootstrapping?

In Angular 4 we use a bootstrapper. You can find the bootstrapping logic in the src/main.ts module:

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.log(err));

Which starts your application by loading important modules and by defining environment level logic.

What is a Module?

A TypeScript module is a way to encapsulate, group, reuse, distribute and load code in JavaScript.

Generally, a module will contain code that encapsulates a specific functionality. The module will expose this functionality to the rest of the application by defining a series of exports that other parts of the system can then import.

The core module for Angular 4, for instance, is called ‘angular2/core’ and it gives you access to Angular core primitives like Component.

In the above code, we are importing the platformBrowserDynamic object from ‘@angular/platform-browser-dynamic’ module and called its bootstrapModule function with the AppModule as an argument.

Some things we need to note here are:

  • The ‘@angular/platform-browser-dynamic bootstrapper tells us that Angular 4 is platform agnostic. That is, you can run it in the browser, but you can also run it on a web worker or in the server using different bootstrappers.
  • Notice how we import modules in a different way, Angular 2 modules are imported by name, and application components are imported using relative paths.

Calling the bootstrapModule function with the AppModule as argument tells Angular that this module is the main module for your application.

Angular 2 Modules

Angular 2 modules and the new NgModule decorator allow us to declare in one place all the dependencies and components of our application without the need to do it on a per-component basis. a higher level module to wrap ES6 modules that are all about developer ergonomics.

Angular 2 module code

The NgModule decorator takes an object with the following information:

  • The imports array where you declare your module dependencies, for instance, browser, forms, routing or http. The BrowserModule we are using above contains all the dependencies necessary to run Angular 4 on a browser.
  • The declaration array where you declare the components and directives that belong to the current module.
  • And A bootstrap array that identifies our root component that Angular 4 uses to bootstrap your application.

In this example, we import an AppComponent component from the app.component.ts module and set it as the root of our application.

What is a Component?

The component is the core building block of Angular 4 applications. It represents a reusable piece of UI that is usually depicted by a custom HTML element tag.

A component is self-contained and is constituted by :

  • A piece of HTML code that is known as Template.
  • A class that encapsulates the data and access to these data are available to the Template.
  • And the Selector – CSS selector that identifies our component in a Template.

The AppComponent looks like this:

Angular Tutorials : Angular component

This code is available on your project, which will be located at my-app/src/app.component.ts

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

This code has an AppComponent class that is decorated by some metadata in the form a TypeScript decorator @Component which binds the class to its template, its styles and the app-root selector (Can you remember the <app-root> element from the index.html file?).

This metadata tells Angular 4 that whenever you see a <app-root> HTML element you should render the template in templateUrl, with the styles in stylesUrls and in the context of the AppComponent class.

What is a Decorator?

Think of a decorator like a function that is applied to whatever it decorates. In this case, the Component decorator attaches some metadata to the AppComponent class.

If you open component.html file you`ll see title variable in a h1 tag among other things, which will look something like this

  <h1>
    Welcome to {{ title }}!
  </h1>

The double brackets around title  (which we call interpolation syntax) tells Angular 4 to display the content of the component title variable when rendering the component. Indeed, if you run ng serve you can see how the browser renders the text “app” inside an h1 element.

Now look back at the AppComponent definition and the project structure you’ll realize that the Angular CLI follows a convention when creating components:

  • All files for a given component are placed within the same folder named like the component itself (in this case app)
  • These files have been named with component and have different extensions based on their function:
    • component.ts for the component itself
    • component.html for the template
    • component.scss for the styles

Now let’s see how we can bind the AppComponent class members to the template. Let’s change the title property value from “app” to “My First Angular App”. If you now save the file, your browser should automatically refresh itself and you should be able to see the My First Angular App as the title of your app (If you closed your browser just open it again and if you stopped the development server then remember to run ng serve –open to start it again and see your changes).

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";
}

For More read our Next Articles