Angular 4 - The 'Hello, World!' app


The back bone of the Angular 4 application is a copmonent, which is typically made up of two pieces of code.

  • A JavaScript class
  • A HTML template

A regular JavaScript class with member variables and functoins can be made as a component by declaring with @Component decorator.

@Component({
    selector: "hello",
    template: `<h1>{{message}}</h1>`
})
class HelloComponent{
    private message: string = "Hello, World!";
}

In the above code segment, the @Component decorator has two properties:

  • selector - the tag-name being used in the HTML code. Eg,
  • template - this is a multiline HTML template code that may include Angular syntaxes (such as double curly braces)

A component must be part of a module. You can think of a module as a container of components, directives, services, pipes etc. One or more of these components can be used in a HTML, only if they are bootstraped.

@NgModule({
    imports: [BrowserModule],
    declarations: [HelloComponent],
    bootstrap: [HelloComponent]
})
class MainModule{
}

In the above code, the declarations property refers to an array of all the components that belong to this module. One or more of these coponents can be used in a HTML file. For this, we have to specify in the list of bootstrap property.

One last step is to bootstrap your module itself.

platformBrowserDynamic().bootstrapModule(MainModule);

When the browser loads the HTML file, the above line of code looks for the bootstrapped components and injects the template into the component's tags.

Here is the generated DOM tree:

Angular4 generated DOM

Here is the complete code for main.ts

import { Component, NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { platformBrowserDynamic} from "@angular/platform-browser-dynamic";

@Component({
    selector: "hello",
    template: `<h1>{{message}}</h1>`
})
class HelloComponent{
    private message: string = "Hello, World!";
}

@NgModule({
    imports: [BrowserModule],
    declarations: [HelloComponent],
    bootstrap: [HelloComponent]
})
class MainModule{
}

platformBrowserDynamic().bootstrapModule(MainModule);

And the index.html file

<html>
    <head>
        <title>Angular 4 Application</title>
    </head>
    <body>
        <div class="container">
            <hello></hello>
        </div>
        <script src="./libs.js"></script>
        <script src="./client.js"></script>
    </body>
</html>

Here is the folder structure and it's content:

Angular4 generated DOM

Following files are part of the application:

  • polyfills.ts - Used for supporting the app in IE. Also loads zone.js required by Angular itself.
  • package.json - Defines the package dependencies and the start command
  • tsconfig.json - Defines the TypeScript configuration options
  • webpack.config.js - Defines the module loaders, entry and output files.

You can download the complete application from here - Download ng4app.zip

Unzip the file, open a command prompt (terminal) and run the npm install command to install all the package dependencies. Once you are done with it, just run the command npm start.

The application will be available in http://localhost:3000


Courses

Blog posts