Angular 2 Series Part Two: Exploring The Starter Files

In the previous post, we saw what Angular2 is all about. We discussed the selection of editors & programming languages for our application. We also discussed how we can build up our application architecture and install the required dependencies, using npm.

• Angular2 Series - Part One - Getting Started 

In this post, we’ll try to explore the starter files, which we downloaded and understand them thoroughly. If you open your app folder inside it, we’ll find 3 files namely

1. modules.ts- This is our application root module. Each & every application will have a root module.
2. component.ts- This is our application root component. Each & every application will have a root component.
3. ts- This is our application bootstrapper. It will bootstrap our application onto the browser.

What is an Angular2 Module Or @NgModule({})?

Angular2 is fully modularized. It has different modules such as “angular2/core”, “angular2/routing”, “angular2/http” etc. These modules are called Angular modules or @NgModules. You’ll find app.modules.ts in our application as a class decorated with @NgModule({}) decorator. @NgModule({}) helps us in modularizing our code. Each application will have a root module. However, in your application, you can always have sub modules too, but always remember to register your sub modules with the main module. How to register a module with the main module? We’ll discuss it later in this series. The default naming convention for main module name is “app.module.ts”. The contents of it are given below. 

/** Importing the angular modules from namespace */
import {
    NgModule
} from '@angular/core';
import {
    BrowserModule
} from '@angular/platform-browser';
/** Importing the AppComponent from the application's app folder */
import {
    AppComponent
} from './app.component';
@NgModule({
    imports: [BrowserModule], //other modules whose exported classes are needed by component templates declared in this module.
    declarations: [AppComponent], // the view classes that belong to this module. Angular has three kinds of view classes: components, directives, and pipes.
    bootstrap: [AppComponent] //the main application view, called the root component, that hosts all other app views. Only the root module should set this bootstrap property.
})
export class AppModule {}

For more information on @NgModules, follow this link.

What is an Angular2 Component?

In Angular2, everything is a component. They are the building blocks of our application. Angular2 component consists of

1. Typescript class, which has methods (used for binding events to HTML elements) & properties (used for binding properties to HTML elements).
2. An HTML markup for view (UI).
3. An Angular metadata (instructs Angular about how to process the class).

From our starter files, we’ve app.component.ts file, which is our Application’s root Angular2 component. Every application will have only one root component; the default naming convention is used for an application root component is “app.component.ts”.

We are importing component decorator from “@angular/core” namespace/module, using the import statement.

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

 

For providing Angular with extra metadata; we provide it with, using @Component decorator, which is just above the class. 

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>`
})

Our AppComponent class file has a single property named “name” with a default value of “Angular”. We are referencing this name property in the “template”, which is specified in the @Component ({}) decorator.

Ex. `<h1>Hello {{name}}</h1>`

The usage of curly braces around the name property is called “interpolation”. In Angular, it is used to display the value of the variable , which is in this case will display “Angular”. In @Component ({}) decorator, we’ve also specified the selector, which has a value of “my-app”. We’ll use this selector for loading the app component inside HTML page by injecting it as an element in HTML. For instance, if you have a look at the index.html file body content, it is already been referenced there. 

<body>
    <my-app>Loading AppComponent content here ...</my-app>
</body>

NOTE

The message “Loading AppComponent content here…” acts as a placeholder till the time app component loads.

What is bootstrapper?

In our application main.ts, file will act as a main entry/ bootstrapper of our application. In this file, we are loading the app.module (i.e. the root module of our application), which internally loads the app.component (i.e. the root component of our application). The components of main.ts file are given below. 

//Loads the platform i.e. browser
import {
    platformBrowserDynamic
} from '@angular/platform-browser-dynamic';
//loads the application module
import {
    AppModule
} from './app.module';
//bootstrap the root module
platformBrowserDynamic().bootstrapModule(AppModule);

We’ve loaded our bootstraper main.js file in the systemjs.config.js file. The snapshot is given below about the same.

Let’s try running our application now. Since, we are now aware about the overall concepts of what a module, component & bootstrapper is. To run Angular2 application, we’ll have to use npm command “npm start”, which will basically search for “start” element in the package.json file, where we list what all things do we need to start the Application. Look at the snapshot given below from package.json.

 Here, we specified that we would  need TypeScript watch to run our application (for watching any changes, which are made in the *.ts file; if anyone regenerates the *.js file) & lite-Server (it will act as a Web Server for our Application). Concurrently, package will help us to run both the things simultaneously. Thus, run the application. Open the command prompt by pressing “CTRL+SHIFT+C” & write the command “npm start”.

You’ll be able to see the output given below.

As you can see from AppComponent, the template has been loaded onto the page & it’s displaying the “name” property value i.e. Angular, addding “Hello” to it.