Getting Started with Angular

Figure 3.1 Implementing a basic Angular web application that uses a component to load an HTML template to the view

Creating Your First Angular App

Now that you’ve seen how Angular works, let’s get into a practical example. This example doesn’t change much that was generated by the CLI, but it will familiarize you with the different pieces of an Angular application.

To get started, navigate to the file src/app/app.component.ts in your application directory. It looks like this:

01 import  from '@angular/core';
02 @Component({
03   selector: 'message',
04   template: `
05     <h1>Hello World!</h1>
06   `,
07 })
08 export class Chap3Component{
09   title = 'My First Angular App';
10 }

Notice that line l imports the component module. Then the component decorator is defined and given a selector and a template. The selector is the name given to the component, and the template is the HTML that the component will generate. For this example, change the template and selector to match the ones on lines 3–6 and change the title variable as shown on line 9.

After the decorator is defined, lines 8–10 create the export class to make your component available to the rest of the application as well as define variables and functions that are made available to the component template.

Understanding and Using NgModule

Now that you’ve created your component, you need some way to tell the rest of your app about it. You do this by importing NgModule from Angular. NgModule is an Angular decorator that allows you to place all your imports, declarations, and bootstrap files for a particular module in a single location. This makes bootstrapping all the files in large applications very easy. NgModule has several metadata options that allow different things to be imported, exported, and bootstrapped:

• providers: This is an array of injectable objects that are available in the injector of the current module.

• declarations: This is an array of directives, pipes, and/or components that belong in the current module.

• imports: This is an array of directives, pipes, and/or components that will be available to other templates within the current module.

• exports: This is an array of directives, pipes, and/or modules that can be used within any component that imports the current module.

• entryComponents: This is an array of components that will be compiled and will have a component factory created when the current module is defined.

• bootstrap: This is an array of components that will be bootstrapped when the current module is bootstrapped.

• schemas: This is an array of elements and properties that aren’t directives or components.

• id: This is a simple string that acts as a unique ID to identify this module.

As is often the case, it’s easiest to learn this by doing, so let’s get started using NgModule. Navigate to the file named app.module.ts in your app folder. It looks like this:

01 import { BrowserModule } from '@angular/platform-browser';
02 import { NgModule } from '@angular/core';
03 import { FormsModule } from '@angular/forms';
04 import { HttpModule } from '@angular/http';
05
06 import { Chap3Component } from './app.component';
07
08 @NgModule({
09   declarations: [
10     Chap3Component
11   ],
12   imports: [
13     BrowserModule,
14     FormsModule,
15     HttpModule
16   ],
17   providers: [],
18   bootstrap: [Chap3Component]
19 })
20 export class AppModule { }

First, you import NgModule, BrowserModule, and any custom components, directives, services, and so on that your app has. Second, you configure the @NgModule object to bootstrap everything together. Notice that when the component is imported, the bootstrap property has the component’s export class name. Finally, you export the class named AppModule.

Creating the Angular Bootstrapper

Now that you’ve looked at your component and module, you need some way to tell the rest of your app about it. You do this by importing the bootstrapper through platformBrowserDynamic from Angular.

Navigate to the file named main.ts in your app folder, which looks like this:

01 import { enableProdMode } from '@angular/core';
02 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
03
04 import { AppModule } from './app/app.module';
05 import { environment } from './environments/environment';
06
07 if (environment.production) {
08   enableProdMode();
09 }
10
11 platformBrowserDynamic().bootstrapModule(AppModule); 

The imports are enableProdMode, platformBrowserDynamic, AppModule, and environment. enableProdMode uses Angular’s optimizations for a production application. platformBrowserDynamic is used to bootstrap the application together, using the application module AppModule, as shown in the following code:

platformBrowserDynamic().bootstrapModule(AppModule);The environment variable determines the state of the application—whether it should be deployed in development mode or production mode.

platform is then assigned the result from the function platformBrowserDynamic. platform has the method bootstrapModule(), which consumes the module. Notice that when you import and bootstrap a component, the name you use is the same as the component’s export class.

Now open the command prompt, navigate to your root directory, and run the command ng serve. This command compiles your code and opens a browser window. You may need to point your browser to the local host and port. The command lets you know the URL to navigate your browser to, as shown in the following example:

** NG Live Development Server is running on http://localhost:4200 **

Listing 3.1 shows the html index file that loads the application. Line 12 shows where the message component gets applied.

Listing 3.2 shows the Angular module that bootstraps the component. Lines 1–4 show the Angular modules BrowserModule, NgModule, FormsModule, and HttpModule each getting imported. Line 6 shows the Angular component Chap3Component getting imported. Lines 9–11 show the component being declared. Lines 12–16 show the imports array which makes the imported modules available to the application. Line 18 bootstraps the main component of the application.

Listing 3.3 shows the Angular component which has the selector message. This component displays the message Hello World! In the browser.

Listing 3.1 first.html: A Simple Angular Template That Loads the First Component

01 <!doctype html>
02 <html>
03 <head>
04   <meta charset="utf-8">
05   <title>First</title>
06   <base href="/">
07
08   <meta name="viewport" content="width=device-width, initial-scale=1">
09   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 </head>
11 <body>
12   <message>Loading...</message>
13 </body>
14 </html>

Listing 3.2 app.module.ts: An Angular Module that bootstraps the application

01 import { BrowserModule } from '@angular/platform-browser';
02 import { NgModule } from '@angular/core';
03 import { FormsModule } from '@angular/forms';
04 import { HttpModule } from '@angular/http';
05
06 import { Chap3Component } from './app.component';
07
08 @NgModule({
09   declarations: [
10     Chap3Component
11   ],
12   imports: [
13     BrowserModule,
14     FormsModule,
15     HttpModule
16   ],
17   providers: [],
18   bootstrap: [Chap3Component]
19 })
20 export class AppModule { }

Listing 3.3 first.component.ts: An Angular Component

01 import {Component} from 'angular2/core';
02 @Component({
03   selector: 'message',
04   template: `
05     <h1>Hello World!<h1>
06   `,
07   styles:[`
08     h1 {
09       font-weight: bold;
10     }
11   `]
12 })
13 export class Chap3component{
14   title = 'Chapter 3 Example';
15 }

Listings 3.4 and 3.5 show the compiled JavaScript code from the TypeScript files in Listings 3.2 and 3.3.

Listing 3.4 app.module.js: The JavaScript Version of the Angular Module that bootstraps the application

01 "use strict";
02 var __decorate = (this && this.__decorate) ||
03    function (decorators, target, key, desc) {
04     var c = arguments.length, r = c < 3 ? target :
05         desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
06     if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
07         r = Reflect.decorate(decorators, target, key, desc);
08     else for (var i = decorators.length - 1; i >= 0; i--)
09          if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r)
10              : d(target, key)) || r;
11     return c > 3 && r && Object.defineProperty(target, key, r), r;
12 };
13 exports.__esModule = true;
14 var platform_browser_1 = require("@angular/platform-browser");
15 var core_1 = require("@angular/core");
16 var forms_1 = require("@angular/forms");
17 var http_1 = require("@angular/http");
18 var app_component_1 = require("./app.component");
19 var AppModule = (function () {
20     function AppModule() {
21     }
22     AppModule = __decorate([
23         core_1.NgModule({
24             declarations: [
25                 app_component_1.Chap3Component
26             ],
27             imports: [
28                 platform_browser_1.BrowserModule,
29                 forms_1.FormsModule,
30                 http_1.HttpModule
31             ],
32             providers: [],
33             bootstrap: [app_component_1.Chap3Component]
34         })
35     ], AppModule);
36     return AppModule;
37 }());
38 exports.AppModule = AppModule;

Listing 3.5 first.component.js: The JavaScript Version of the Angular Component File

01 "use strict";
02 var __decorate = (this && this.__decorate)
03     || function (decorators, target, key, desc) {
04     var c = arguments.length, r = c < 3
05         ? target : desc === null
06         ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
07     if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
08         r = Reflect.decorate(decorators, target, key, desc);
09     else for (var i = decorators.length - 1; i >= 0; i--)
10         if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3
11             ? d(target, key, r) : d(target, key)) || r;
12     return c > 3 && r && Object.defineProperty(target, key, r), r;
13 };
14 exports.__esModule = true;
15 var core_1 = require("@angular/core");
16 var Chap3Component = (function () {
17     function Chap3Component() {
18         this.title = 'Chapter 3 Example';
19     }
20     Chap3Component = __decorate([
21         core_1.Component({
22             selector: 'message',
23             template: "\n    <h1>Hello World!<h1>\n  "
24         })
25     ], Chap3Component);
26     return Chap3Component;
27 }());
28 exports.Chap3Component = Chap3Component;