21
Getting Started with Angular
Angular is a perfect client-side framework for most web applications because it provides a very clean and structured approach. With a clean, structured front end, you will find that it is much easier to implement clean, well-structured server-side logic.
This chapter introduces you to Angular as well as the major components involved in an Angular application. It is critical that you understand these components before you try to implement an Angular application because the framework is different from more traditional JavaScript web application programming.
After you get a good grasp of the components of an Angular application, you’ll learn how to construct a basic Angular application, step by step. This should prepare you to jump into the following chapters, which provide much more detail on implementing Angular.
Why Angular?
JavaScript is a powerful programming language that allows developers to use a web browser as a full application platform. Angular provides a great framework that makes it faster and easier to create client-side JavaScript applications. Developers use Angular because it provides a lot of the structure of web applications—such as data binding, dependency injection, and HTTP communications—that teams would otherwise need to develop themselves.
Understanding Angular
Angular is a JavaScript framework, which means it provides a number of APIs and structure that helps you quickly and easily create complex client-side code. Angular does a great job at providing not only features but also a basic framework and programming model to create client applications. The following sections describe the most important aspects of the Angular framework and how they contribute to make Angular a great JavaScript framework.
Modules
In general, Angular apps use a modular design. While not required, modules are highly recommended because they allow you to separate your code into separate files. This helps you keep your code files short and manageable while still allowing you to access the functionality from each one.
Unlike how you use modules with TypeScript, with Angular you import external modules at the top of a file and export the functionality you need at the bottom. You do this by using the key terms import and export, with the following syntax:
Import {Component} from 'angular2/core';
Export class App{}
Directives
Directives are JavaScript classes with metadata that defines the structure and behavior. Directives provide the majority of UI functionality for Angular applications. There are three major types of directives:
Components: A component directive is a directive that incorporates an HTML template with JavaScript functionality to create a self-contained UI element that can be added to an Angular application as a custom HTML element. Components are likely to be the directives you use the most in Angular.
Structural: You use structural directives when you need to manipulate the DOM. Structural directives allow you to create and destroy elements and components from a view.
Attribute: An attribute directive changes the appearance and behavior of HTML elements by using HTML attributes.
Data Binding
One of the best features of Angular is the built-in data binding—the process of linking data from a component with what is displayed in a web page. Angular provides a very clean interface to link model data to elements in a web page.
When data is changed on a web page, the model is updated, and when data is changed in the model, the web page is automatically updated. This way, the model is always the only source for data represented to the user, and the view is just a projection of the model.
Dependency Injection
Dependency injection is a process in which a component defines dependencies on other components. When the code is initialized, the dependent component is made available for access within the component. Angular applications make heavy use of dependency injection.
A common use for dependency injection is consuming services. For example, if you are defining a component that requires access to a web server via HTTP requests, you can inject the HTTP services into the component, and the functionality is available in the component code. In addition, one Angular component consumes the functionality of another via dependency.
Services
Services are the major workhorses in the Angular environment. Services are singleton classes that provide functionality for a web app. For example, a common task of web applications is to perform AJAX requests to a web server. Angular provides an HTTP service that houses all the functionality to access a web server.
The service functionality is completely independent of context or state, so it can be easily consumed from the components of an application. Angular provides a lot of built-in service components for basic uses, such as HTTP requests, logging, parsing, and animation. You can also create your own services and reuse them throughout your code.
Separation of Responsibilities
An extremely important part of designing Angular applications is the separation of responsibilities. The whole reason you choose a structured framework is to ensure that code is well implemented, easy to follow, maintainable, and testable. Angular provides a very structured framework to work from, but you still need to ensure that you implement Angular in the appropriate manner.
The following are a few rules to follow when implementing Angular:
The view acts as the official presentation structure for the application. Indicate any presentation logic as directives in the HTML template of the view.
If you need to perform any DOM manipulation, do it in a built-in or custom directive JavaScript code—and nowhere else.
Implement any reusable tasks as services and add them to your modules by using dependency injection.
Ensure that the metadata reflects the current state of the model and is the single source for data consumed by the view.
Define controllers within the module namespace and not globally to ensure that your application can be packaged easily and avoid overwhelming the global namespace.
Adding Angular to Your Environment
To get started with Angular, you need to set up a few things first to get it ready to use. Here’s what you need:
Angular libraries to make Angular applications
A web server to serve the files to the browser
A transpiler to convert your TypeScript code back to JavaScript
A watcher so that the transpiler knows when there has been a file change
An editor in which to write your code
Note
We recommend that you use Visual Studio Code (https://code.visualstudio.com/); it has good TypeScript and Angular support built in, and is a lightweight editor with many available extensions.
Fortunately, the Angular team has done most of the work for you here. All you need to do is go to the Angular QuickStart website, which walks you through the process. The following Angular QuickStart website takes you through the basics of Angular: https://angular.io/docs/ts/latest/quickstart.html. This website explains the basics of Angular’s command-line interface (CLI): https://angular.io/docs/ts/latest/cli-quickstart.html.
Note
We recommend that you use the CLI while learning Angular. The CLI generates all the bootstrap and configuration files for you. It also includes a lightweight server for testing your code.
Using the Angular CLI
Angular provides a powerful CLI that makes building out Angular applications a much more streamlined process. By using the CLI, you will quickly be able to generate new Angular applications, components, directives, pipes, and services. The following sections go over some of the most important tools available through the CLI.
Generating Content with the CLI
One of the most common purposes of the CLI is to generate content for applications. It automates the process of creating and bootstrapping a new Angular application, letting you get straight to the meat of the application.
From the command line, run the command ng new [application name] to create a new Angular application. If you navigate to that newly created application, you have access to many other useful commands. Table 21.1 lists some of the most important commands that the CLI has to offer.
Table 21.1 Angular CLI Command Options
Command |
Alias |
Purpose |
|
|
Creates a new Angular application |
|
|
Builds and runs the angular application for testing |
|
|
Makes the webpack config files available to be edited |
|
|
Creates a new component |
|
|
Creates a new directive |
|
|
Creates a module |
|
|
Creates a pipe |
|
|
Creates a service |
|
|
Creates an enumeration |
|
|
Creates a guard |
|
|
Creates an interface |
While an in-depth guide of everything the CLI has to offer is beyond the scope of this book, it is worth learning how to use.
Creating a Basic Angular Application
Now that you understand the basics of the Angular CLI, you are ready to get started implementing Angular code. This section walks you through a very basic Angular application that implements an Angular component with an inline template, an inline stylesheet, and the Component class.
For this example, it is expected that you have started working through the Angular QuickStart guide and understand the basics of the CLI. The first thing to do is to create a directory where you can place your projects.
When you have your directory set up, the next step is to generate your first Angular application. Run the following command to create the application for this example:
ng new first
Next, run the following command to launch a server that will render the application:
ng serve
The following sections describe the important steps in implementing the Angular application and the code involved in each step. Each of these steps is described in much more detail in later chapters, so don't get bogged down in them here. What is important at this point is that you understand the process of implementing the HTML, component, class, and bootstrap and generally how they interact with each other.
Figure 21.1 shows the web application you are going to create. It shows a simple message that has been printed out by an Angular component.
Figure 21.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 {Component} 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 21.1 shows the html index file that loads the application. Line 12 shows where the message component gets applied.
Listing 21.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.
Note
This application doesn’t need the FormsModule or the HttpModule to run. However, they are included to help show the syntax of importing extra modules into the application.
Listing 21.3 shows the Angular component which has the selector message. This component displays the message Hello World! in the browser.
Listing 21.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 21.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 21.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 21 Example';
15 }
Listings 21.4 and 21.5 show the compiled JavaScript code from the TypeScript files in Listings 21.2 and 21.3.
This is the only time we show you the compiled JavaScript files in this book because these are generated automatically for you when the application is compiled and run—and to help keep the book more readable.
Listing 21.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 21.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 21 Example';
19 }
20 Chap3Component = __decorate([
21 core_1.Component({
22 selector: 'message',
23 template: "
<h1>Hello World!<h1>
"
24 })
25 ], Chap3Component);
26 return Chap3Component;
27 }());
28 exports.Chap3Component = Chap3Component;
Summary
The Angular framework provides a very structured method for creating websites and web applications. Angular structures a web application using a very clean, componentized approach. Angular uses data binding to ensure that there is only one source of data. It also takes advantage of templates with directives that extend HTML capabilities, enabling you to implement totally customized HTML components.
This chapter looks at the different components in an Angular application and how they interact with each other. At the end of this chapter, a detailed example of how to implement a basic Angular application, including a component, a module, and a bootstrapper is seen.
Next
In the next chapter, you will learn about Angular components. You will learn how to build a template using HTML and CSS. You will then go over how you can build your own components.