Part 1: Getting Started with Angular

Part 1 of this book provides the information you need to get ready for the rest of the book. It includes this chapter and primers/refreshers for key technologies, including HTML, CSS, and TypeScript, which is a superset of JavaScript used in Angular development. I also show you how to build your first Angular application and take you through the process of building a more realistic application, called SportsStore.

Part 2: Angular in Detail

Part 2 of this book takes you through the building blocks provided by Angular for creating applications, working through each of them in turn. Angular includes a lot of built-in functionality, which I describe in depth, and provides endless customization options, all of which I demonstrate.

Part 3: Advanced Angular Features

Part 3 of this book explains how advanced features can be used to create more complex and scalable applications. I demonstrate how to make asynchronous HTTP requests in an Angular application, how to use URL routing to navigate around an application, and how to animate HTML elements when the state of the application changes.

Installing Node.js

Many of the tools used for Angular development rely on Node.js—also known as Node—which was created in 2009 as a simple and efficient runtime for server-side applications written in JavaScript. Node.js is based on the JavaScript engine used in the Chrome browser and provides an API for executing JavaScript code outside of the browser environment.

Node.js has enjoyed success as an application server, but for this book, it is interesting because it has provided the foundation for a new generation of cross-platform development and build tools. Some smart design decisions by the Node.js team and the cross-platform support provided by the Chrome JavaScript runtime have created an opportunity that has been seized upon by enthusiastic tool writers. In short, Node.js has become essential for web application development.

It is important that you download the same version of Node.js that I use throughout this book. Although Node.js is relatively stable, there are still breaking API changes from time to time that may stop the examples I include in the chapters from working.

The version I have used is 8.11.3, which is the current Long-Term Support release at the time of writing. There may be a later version available by the time you read this, but you should stick to the 8.11.3 release for the examples in this book. A complete set of 8.11.3 releases, with installers for Windows and macOS and binary packages for other platforms, is available at https://nodejs.org/dist/v8.11.3 .

Installing the angular-cli Package

Installing Git

The Git revision control tool is required to manage some of the packages required for Angular development. If you are using Windows or macOS, then download and run the installer from https://git-scm.com/downloads . (On macOS, you may have to change your security settings to open the installer, which has not been signed by the developers.)

This command prints out the version of the Git package that has been installed. At the time of writing, the latest version of Git for Windows and Linux is 2.17, and the latest version of Git for macOS is 2.16.3.

Installing an Editor

When choosing an editor, one of the most important considerations is the ability to filter the content of the project so that you can focus on a subset of the files. There can be a lot of files in an Angular project, and many have similar names, so being able to find and edit the right file is essential. Editors make this possible in different ways, either by presenting a list of the files that are open for editing or by providing the ability to exclude files with specific extensions.

Installing a Browser

The final choice to make is the browser that you will use to check your work during development. All the current-generation browsers have good developer support and work well with Angular. I have used Google Chrome throughout this book, and this is the browser I recommend you use as well.

Creating the Project

The ng command is provided by the angular-cli package, and ng new sets up a new project. The installation process creates a folder called todo that contains all of the configuration files that are needed to start Angular development, some placeholder files to start development, and the NPM packages required for developing, running, and deploying Angular applications. (There are a large number of NPM packages, which means that project creation can take a while.)

Adding the Bootstrap CSS Package

As I explain in Chapter 11, the angular.json file is used to configure the project tools, and the statement shown in the listing incorporates the Bootstrap CSS file into the project so that it will be included in the content sent to the browser.

Starting the Development Tools

Don’t worry if you see slightly different output, just as long as you see the “compiled successfully” message once the preparations are complete.

The development tools in the project include an HTTP server. Once the build process is completed, a new browser window will open, and you will see the content shown in Figure 2-1, which shows the placeholder content added to the project when it was created.

Editing the HTML File

The Angular development tools include a feature that automatically updates the browser when there is a change in the project. As soon as you save the index.html file, the server will detect the change and update the application, reflecting the new content, as shown in Figure 2-2.

The HTML elements in the index.html file show how the simple Angular application I create in this chapter will look. The key elements are a banner with the user’s name, an input element and an Add button that add a new to-do item to the list, and a table that contains all the to-do items and indicates whether they have been completed.

This h3 element has been assigned to three classes. The bg-primary class sets the background color of the element to the primary color of the Bootstrap theme. There are other theme colors available, including bg-secondary, bg-info, and bg-danger. The p-1 class adds a fixed amount of padding to all edges of the element, ensuring that the text has some space around it. The text-white class sets the text color to white, which increases the contrast with the background color. You will see HTML elements added to these classes and others throughout this book as I apply Bootstrap, and I provide a brief overview of the classes that I use most in Chapter 4.

In the next section, I’ll remove the HTML from the file, cut it up into smaller pieces, and use it to create a simple Angular application.

Preparing the HTML File

This listing replaces the content of the body element with a todo-app element. There is no todo-app element in the HTML specification, and the browser will ignore it when parsing the HTML file, but this element will be the entry point into the world of Angular and will be replaced with my application content. When you save the index.html file, the browser will reload the file and show the placeholder message, as shown in Figure 2-3.

Creating a Data Model

The next task is to pull all the data together to create a data model. Separating the data from the way it is presented to the user is one of the key ideas in the MVC pattern, as I explain in Chapter 3.

Angular applications are typically written in TypeScript. I introduce TypeScript in Chapter 6 and explain how it works and why it is useful. TypeScript is a superscript of JavaScript, but one of its main advantages is that it lets you write code using the latest JavaScript language specification with features that are not yet supported in all of the browsers that can run Angular applications. One of the packages that angular-cli added to the project in the previous section was the TypeScript compiler, which is set up to generate browser-friendly JavaScript files automatically when a change to a TypeScript file is detected.

One of the most important features of TypeScript is that you can just write “normal” JavaScript code as though you were targeting the browser directly. In Listing 2-4, I used the JavaScript object literal syntax to assign a value to a global variable called model. The data model object has a user property, which provides the name of the application’s user, and an items property, which is set to an array of objects with action and done properties, each of which represents a task in the to-do list.

This is the most important aspect of using TypeScript: you don’t have to use the features it provides, and you can write entire Angular applications using just the JavaScript features that are supported by all browsers, like the code in Listing 2-4.

This is still standard JavaScript code, but the class keyword was introduced in a later version of the language than most web application developers are familiar with because it is not supported by older browsers. The class keyword is used to define types that can be instantiated with the new keyword to create objects that have well-defined data and behavior.

Many of the features added in recent versions of the JavaScript language are syntactic sugar to help programmers avoid some of the most common JavaScript pitfalls, such as the unusual type system. The class keyword doesn’t change the way that JavaScript handles types; it just makes it more familiar and easier to use for programmers experienced in other languages, such as C# or Java. I like the JavaScript type system, which is dynamic and expressive, but I find working with classes more predictable and less error-prone, and they simplify working with Angular, which has been designed around the latest JavaScript features.

The export keyword relates to JavaScript modules. When using modules, each TypeScript or JavaScript file is considered to be a self-contained unit of functionality, and the export keyword is used to identify data or types that you want to use elsewhere in the application. JavaScript modules are used to manage the dependencies that arise between files in a project and avoid having to manually manage a complex set of script elements in the HTML file. See Chapter 7 for details of how modules work.

Preparing the Template

I’ll add more elements to this file shortly, but a single h3 element is enough to get started. Including a data value in a template is done using double braces—{{ and }}—and Angular evaluates whatever you put between the double braces to get the value to display.

The {{ and }} characters are an example of a data binding, which means they create a relationship between the template and a data value. Data bindings are an important Angular feature, and you will see more of them in this chapter as I add features to the example application (and I describe them in detail in Part 2 of this book). In this case, the data binding tells Angular to invoke a function called getName and use the result as the contents of the h3 element. The getName function doesn’t exist anywhere in the application at the moment, but I’ll create it in the next section.

Preparing the Component

An Angular component is responsible for managing a template and providing it with the data and logic it needs. If that seems like a broad statement, it is because components are the part of an Angular application that does most of the heavy lifting. As a consequence, they can be used for all sorts of tasks.

This is still JavaScript, but it relies on features that you may not have encountered before but that underpin Angular development. The code in the listing can be broken into three main sections, as described in the following sections.

Putting the Application Together

I have the three key pieces of functionality required to build a simple Angular application: a model, a template, and a component. When you saved the change to the app.component.ts file, there was enough functionality in place to bring the three pieces together and display the output shown in Figure 2-4.

One advantage of using angular-cli to create a project is that you don’t have to worry about creating the basic files required by an Angular application. The drawback is that skipping over these files means you will miss out on some important details that are worth exploring.

Angular applications require a module. Through an unfortunate naming choice, there are two types of module used in Angular development. A JavaScript module is a file that contains JavaScript functionality that is used through the import keyword, which I describe in Chapter 6. The other type of module is an Angular module, which is used to describe an application or a group of related features. And just to complicate matters, every application has a root module, which is the Angular module that provides Angular with the information that it needs to start the application.

The purpose of the Angular module is to provide configuration information through the properties defined by the @NgModule decorator. I explain how Angular modules work in detail in Chapter 21, but for the moment, it is enough to know that the decorator’s imports property tells Angular that the application depends on features required to run an application in the browser and that the declarations and bootstrap properties tell Angular about the components in the application and which one should be used to start the application (there is only one component in this simple example application, which is why it is the only value for both properties).

Although this book focuses on applications that run in a web browser, Angular is intended to work in a range of environments. The code statements in the bootstrap file select the platform that will be used and load the root module, which is the entry point into the application.

The browser executed the code in the bootstrap file, which fired up Angular, which in turn processed the HTML document and discovered the todo-app element. The selector property used to define the component matches the todo-app element, which allowed Angular to remove the placeholder content and replace it with the component’s template, which was loaded automatically from the app.component.html file. The template was parsed; the {{ and }} data binding was discovered, and the expression it contains was evaluated, calling the getName method and displaying the result shown in the figure. It may not be that impressive, but it is a good start, and it provides a foundation on which to add more features.

Adding the To-Do Table

This expression tells Angular to treat the tr element to which it has been applied as a template that should be repeated for every object returned by the component’s getTodoItems method. The let item part of the expression specifies that each object should be assigned to a variable called item so that it can be referred to within the template.

The result is that the tr element and its contents will be duplicated and inserted into the HTML document for each object returned by the getTodoItems method; for each iteration, the current to-do object can be accessed through the variable called item, and the position of the object in the array can be accessed through the variable called i.

These bindings refer to the variables that are created by the *ngFor expression. Bindings are not just used to refer to property and method names; they can also be used to perform simple JavaScript operations. You can see an example of this in the first binding, where I sum the i variable and 1.

The [ngSwitch] expression is a conditional statement that is used to insert different sets of elements into the document based on a specified value, which is the item.done property in this case. Nested within the td element are two span elements that have been annotated with *ngSwitchCase and *ngSwitchDefault and that are equivalent to the case and default keywords of a regular JavaScript switch block. I describe ngSwitch in detail in Chapter 13 (and what the square brackets mean in Chapter 12), but the result is that the first span element is added to the document when the value of the item.done property is true, and the second span element is added to the document when item.done is false. The result is that the true/false value of the item.done property is transformed into span elements containing either Yes or No. When you save the changes to the template, the browser will reload, and the table of to-do items will be displayed, as shown in Figure 2-5.

If you use the browser’s F12 developer tools, you will be able to see the HTML content that the template has generated. (You can’t do this looking at the page source, which just shows the HTML sent by the server and not the changes made by Angular using the DOM API.)

Creating a Two-Way Data Binding

The ngModel template expression creates a two-way binding between a data value (the item.done property in this case) and a form element. When you save the changes to the template, you will see a new column that contains checkboxes appear in the table. The initial value of the checkbox is set using the item.done property, just like a regular one-way binding, but when the user toggles the checkbox, Angular responds by updating the specified model property.

To demonstrate how this works, I have left the column that contains the Yes/No display of the done property value generated using the ngSwitch expression in the template. When you toggle a checkbox, the corresponding Yes/No value changes as well, as illustrated in Figure 2-6.

This reveals an important Angular feature: the data model is live. This means that data bindings—even one-way data bindings—are updated when the data model is changed. This simplifies web application development because it means you don’t have to worry about ensuring that you display updates when the application state changes.

Filtering To-Do Items

The checkboxes allow the data model to be updated, and the next step is to remove to-do items once they have been marked as done. Listing 2-14 changes the component’s getTodoItems method so that it filters out any items that have been completed.

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

import { Model } from "./model";

@Component({

    selector: "todo-app",

    templateUrl: "app.component.html"

})

export class AppComponent {

    model = new Model();

    getName() {

        return this.model.user;

    }

    getTodoItems() {

        return this.model.items.filter(item => !item.done);

    }

}

Listing 2-14

Filtering To-Do Items in the app.component.ts File in the src/app Folder

This is an example of a lambda function, also known as a fat arrow function, which is a more concise way of expressing a standard JavaScript function. The arrow in the lambda expressions is read as “goes to” such as “item goes to not item.done.” Lambda expressions are a recent addition to the JavaScript language specification, and they provide an alternative to the conventional way of using functions as arguments like this:

...

return this.model.items.filter(function (item) { return !item.done });

...

Whichever way you choose to define the expression passed to the filter method, the result is that only incomplete to-do items are displayed. Since the data model is live and changes are reflected in data bindings immediately, checking the checkbox for an item removes it from view, as shown in Figure 2-7.

Adding To-Do Items

This is an example of an event binding, and it tells Angular to invoke a component method called addItem, using the value property of the input element as the method argument. Listing 2-16 implements the addItem method in the component.

The import keyword can be used to import multiple classes from a module, and one of the import statements in the listing has been updated so that the TodoItem class can be used in the component. Within the component class, the addItem method receives the text sent by the event binding in the template and uses it to create a new TodoItem object and add it to the data model. The result of these changes is that you can create new to-do items by entering text in the input element and clicking the Add button, as shown in Figure 2-8.

Understanding Round-Trip and Single-Page Applications

For a long time, web apps were developed to follow a round-trip model. The browser requests an initial HTML document from the server. User interactions—such as clicking a link or submitting a form—led the browser to request and receive a completely new HTML document. In this kind of application, the browser is essentially a rending engine for HTML content, and all of the application logic and data resides on the server. The browser makes a series of stateless HTTP requests that the server handles by generating HTML documents dynamically.

A lot of current web development is still for round-trip applications, not least because they require little from the browser, which ensures the widest possible client support. But there are some serious drawbacks to round-trip applications: they make the user wait while the next HTML document is requested and loaded, they require a large server-side infrastructure to process all the requests and manage all the application state, and they require a lot of bandwidth because each HTML document has to be self-contained (leading to a lot of the same content being included in each response from the server).

Single-page applications take a different approach. An initial HTML document is sent to the browser, but user interactions lead to Ajax requests for small fragments of HTML or data inserted into the existing set of elements being displayed to the user. The initial HTML document is never reloaded or replaced, and the user can continue to interact with the existing HTML while the Ajax requests are being performed asynchronously, even if that just means seeing a “data loading” message.

Most current apps fall somewhere between the extremes, tending to use the basic round-trip model enhanced with JavaScript to reduce the number of complete page changes, although the emphasis is often on reducing the number of form errors by performing client-side validation.

Angular gives the greatest return from its initial workload as an application gets closer to the single-page model. That’s not to say you can’t use Angular with round-trip applications—you can, of course—but there are other technologies that are simpler and better suit discrete HTML pages, either working directly with the Document Object Model (DOM) API or using a library to simplify its use, such as jQuery. In Figure 3-1 you can see the spectrum of web application types and where Angular delivers benefit.

Angular excels in single-page applications and especially in complex round-trip applications. For simpler projects, using the DOM API directly or a library like jQuery is generally a better choice, although nothing prevents you from using Angular in all of your projects.

The single-page application model is the sweet spot for Angular, not just because of the initialization process but because the benefits of using the MVC pattern (which I describe later in this chapter) really start to manifest themselves in larger and more complex projects, which are the ones pushing toward the single-page model.

Comparing Angular to jQuery

Angular and jQuery take different approaches to web app development. jQuery is all about explicitly manipulating the browser’s Document Object Model (DOM) to create an application. The approach that Angular takes is to co-opt the browser into being the foundation for application development.

jQuery is, without any doubt, a powerful tool—and one I love to use. jQuery is robust and reliable, and you can get results pretty much immediately. I especially like the Fluid API and the ease with which you can extend the core jQuery library. But as much as I love jQuery, it isn’t the right tool for every job any more than Angular is. It can be hard to write and manage large applications using jQuery, and thorough unit testing can be a challenge.

Angular also uses the DOM to present HTML content to users but takes an entirely different path to building applications, focusing more on the data in the application and associating it to HTML elements through dynamic data bindings.

The main drawback of Angular is that there is an up-front investment in development time before you start to see results—something that is common in any MVC-based development. This initial investment is worthwhile, however, for complex apps or those that are likely to require significant revision and maintenance.

So, in short, use jQuery (or use the DOM API directly) for low-complexity web apps where unit testing isn’t critical and you require immediate results. Use Angular for single-page web apps, when you have time for careful design and planning and when you can easily control the HTML generated by the server.

Understanding Models

Models—the M in MVC—contain the data that users work with. There are two broad types of model: view models, which represent just data passed from the component to the template, and domain models, which contain the data in a business domain, along with the operations, transformations, and rules for creating, storing, and manipulating that data, collectively referred to as the model logic.

You can’t read a definition of the MVC pattern without tripping over the word business, which is unfortunate because a lot of web development goes far beyond the line-of-business applications that led to this kind of terminology. Business applications are still a big chunk of the development world, however, and if you are writing, say, a sales accounting system, then your business domain would encompass the process related to sales accounting, and your domain model would contain the accounts data and the logic by which accounts are created, stored, and managed. If you are creating a cat video website, then you still have a business domain; it is just that it might not fit within the structure of a corporation. Your domain model would contain the cat videos and the logic that will create, store, and manipulate those videos.

The benefits of ensuring that the model is isolated from the controller and views are that you can test your logic more easily (I describe Angular unit testing in Chapter 29) and that enhancing and maintaining the overall application is simpler and easier.

The best domain models contain the logic for getting and storing data persistently and the logic for create, read, update, and delete operations (known collectively as CRUD) or separate models for querying and modifying data, known as the Command and Query Responsibility Segregation (CQRS) pattern.

This can mean the model contains the logic directly, but more often the model will contain the logic for calling RESTful web services to invoke server-side database operations (which I demonstrate in Chapter 8 when I build a realistic Angular application and which I describe in detail in Chapter 24).

Understanding Controllers/Components

Understanding Views/Templates

Templates can contain logic, but it should be simple and used sparingly. Putting anything but the simplest method calls or expressions in a template makes the overall application harder to test and maintain.

Putting the Logic in the Wrong Place

These are tricky issues because they take a while to manifest themselves as problems. The application still runs, but it will become harder to enhance and maintain over time. In the case of the third variety, the problem will become apparent only when the data store is changed (which rarely happens until a project is mature and has grown beyond its initial user projections).

If you keep these in mind as you develop, you’ll head off the most common problems.

Adopting the Data Store Data Format

The next problem arises when the development team builds an application that depends on the quirks of the server-side data store. In a well-designed Angular application that gets its data from a RESTful service, it is the job of the server to hide the data store implementation details and present the client with data in a suitable data format that favors simplicity in the client. Decide how the client needs to represent dates, for example, and then ensure you use that format within the data store—and if the data store can’t support that format natively, then it is the job of the server to perform the translation.

Just Enough Knowledge to Cause Trouble

Angular is a complex framework that can be bewildering until you get used it. There are lots of different building blocks available, and they can be combined in different ways to achieve similar results. This makes Angular development flexible and means you will develop your own style of problem-solving by creating combinations of features that suit your project and working style.

Becoming proficient in Angular takes time. The temptation is to jump into creating your own projects before understanding how the different parts of Angular fit together. You might produce something that works without really understanding why it works, and that’s a recipe for disaster when you need to make changes. My advice is to go slow and take the time to understand all the features that Angular provides. By all means, start creating projects early, but make sure you really understand how they work and be prepared to make changes as you find better ways of achieving the results you require.

Understanding Void Elements

A void element is defined in a single tag, and you add a / character before the last angle bracket (the > character). The input element is the most commonly used void element, and its purpose is to allow the user to provide input, through a text field, radio button, or checkbox. You will see lots of examples of working with this element in later chapters.

Understanding Attributes

This is a link element, and it imports content into the document. There are two attributes, which I have emphasized so they are easier to see. Attributes are always defined as part of the start tag, and these attributes have a name and a value.

The names of the two attributes in this example are href and rel. For the link element, the href attribute specifies the content to import, and the rel attribute tells the browser what kind of content it is. The attributes on this link element tell the browser to import the bootstrap.min.css file and to treat it as a style sheet, which is a file that contains CSS styles.

Applying Attributes Without Values

This element has two attributes. The first is class, which is assigned a value just like the previous example. The other attribute is just the word required. This is an example of an attribute that doesn’t need a value.

Quoting Literal Values in Attributes

The attribute value contains the string Apples, which is quoted in both single and double quotes. When Angular evaluates the attribute value, it will see the single quotes and process the value as a literal string.

Understanding Element Content

The elements in an HTML document form a hierarchy. The html element contains the body element, which contains content elements, each of which can contain other elements, and so on. In the listing, the thead element contains tr elements that, in turn, contain th elements. Arranging elements is a key concept in HTML because it imparts the significance of the outer element to those contained within.

Understanding the Document Structure

The html element denotes the region of the document that contains the HTML content. This element always contains the other two key structural elements: head and body. As I explained at the start of the chapter, I am not going to cover the individual HTML elements. There are too many of them, and describing HTML5 completely took me more than 1,000 pages in my HTML book. That said, Table 4-1 provides brief descriptions of the elements I used in the index.html file in Listing 4-2 to help you understand how elements tell the browser what kind of content they represent.

Applying Basic Bootstrap Classes

Using Contextual Classes

One of the main advantages of using a CSS framework like Bootstrap is to simplify the process of creating a consistent theme throughout an application. Bootstrap defines a set of style contexts that are used to style related elements consistently. These contexts, which are described in Table 4-3, are used in the names of the classes that apply Bootstrap styles to elements.

Table 4-3

The Bootstrap Style Contexts

Name	Description
primary	This context is used to indicate the main action or area of content.
secondary	This context is used to indicate the supporting areas of content.
success	This context is used to indicate a successful outcome.
info	This context is used to present additional information.
warning	This context is used to present warnings.
danger	This context is used to present serious warnings.
muted	This context is used to de-emphasize content.
dark	This context is used to increase contrast by using a dark color.
white	This context is used to increase contrast by using white.

Bootstrap provides classes that allow the style contexts to be applied to different types of elements. Here is the primary context applied to the h3 element, taken from the index.html file created at the start of the chapter:

...

<h3 class="bg-primary text-white p-3">Adam's To Do List</h3>

...

One of the classes that the element has been assigned to is bg-primary, which styles the background color of an element using the style context’s color. Here is the same style context applied to a button element:

...

<button class="btn btn-primary mt-1">Add</button>

...

The btn-primary class styles a button or anchor element using the style context’s colors. Using the same context to style different elements will ensure their appearance is consistent and complementary, as shown in Figure 4-3, which highlights the elements to which the style context has been applied.

Changing Element Sizes

You can change the way that some elements are styled by using a size modification class. These are specified by combining a basic class name, a hyphen, and lg or sm. In Listing 4-3, I have added button elements to the index.html file, using the size modification classes that Bootstrap provides for buttons.

<!DOCTYPE html>

<html>

<head>

    <title>ToDo</title>

    <meta charset="utf-8" />

    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css"

          rel="stylesheet" />

</head>

<body class="m-1">

    <h3 class="bg-primary text-white p-3">Adam's To Do List</h3>

    <div class="my-1">

        <input class="form-control" />

        <button class="btn btn-lg btn-primary mt-1">Add</button>

        <button class="btn btn-primary mt-1">Add</button>

        <button class="btn btn-sm btn-primary mt-1">Add</button>

    </div>

    <table class="table table-striped table-bordered">

        <thead>

            <tr>

                <th>Description</th>

                <th>Done</th>

            </tr>

        </thead>

        <tbody>

            <tr><td>Buy Flowers</td><td>No</td></tr>

            <tr><td>Get Shoes</td><td>No</td></tr>

            <tr><td>Collect Tickets</td><td>Yes</td></tr>

            <tr><td>Call Joe</td><td>No</td></tr>

        </tbody>

    </table>

</body>

</html>

Listing 4-3

Using Button Size Modification Classes in the index.html File in the HtmlCssPrimer Folder

The btn-lg class creates a large button, and the btn-sm class creates a small button. Omitting a size class uses the default size for the element. Notice that I am able to combine a context class and a size class. Bootstrap class modifications work together to give you complete control over how elements are styled, creating the effect shown in Figure 4-4.

Using Bootstrap to Style Tables

Using Bootstrap to Create Forms

The basic styling for forms is achieved by applying the form-group class to a div element that contains a label and an input element, where the input element is assigned to the form-control class. Bootstrap styles the elements so that the label is shown above the input element and the input element occupies 100 percent of the available horizontal space, as shown in Figure 4-5.

Using Bootstrap to Create Grids

The Bootstrap grid layout system is simple to use. A top-level div element is assigned to the container class (or the container-fluid class if you want it to span the available space). You specify a column by applying the row class to a div element, which has the effect of setting up the grid layout for the content that the div element contains.

Each row defines 12 columns, and you specify how many columns each child element will occupy by assigning a class whose name is col- followed by the number of columns. For example, the class col-1 specifies that an element occupies one column, col-2 specifies two columns, and so on, right through to col-12, which specifies that an element fills the entire row. In the listing, I have created a series of div elements with the row class, each of which contains further div elements to which I have applied col-* classes. You can see the effect in the browser in Figure 4-6.

Creating Responsive Grids

Responsive grids adapt their layout based on the size of the browser window. The main use for responsive grids is to allow mobile devices and desktops to display the same content, taking advantage of whatever screen space is available. To create a responsive grid, replace the col-* class on individual cells with one of the classes shown in Table 4-6.

Table 4-6

The Bootstrap CSS Classes for Responsive Grids

Bootstrap Class	Description
col-sm-*	Grid cells are displayed horizontally when the screen width is greater than 576 pixels.
col-md-*	Grid cells are displayed horizontally when the screen width is greater than 768 pixels.
col-lg-*	Grid cells are displayed horizontally when the screen width is greater than 992 pixels.
col-xl-*	Grid cells are displayed horizontally when the screen width is greater than 1200 pixels.

When the width of the screen is less than the class supports, the cells in the grid row are stacked vertically rather than horizontally. Listing 4-7 demonstrates a responsive grid in the index.html file.

<!DOCTYPE html>

<html>

<head>

    <title>ToDo</title>

    <meta charset="utf-8" />

    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css"

          rel="stylesheet" />

    <style>

        #gridContainer {padding: 20px;}

        .row > div {

                     border: 1px solid lightgrey; padding: 10px;

                     background-color: aliceblue; margin: 5px 0;

                    }

    </style>

</head>

<body class="m-1">

    <h3>Grid Layout</h3>

    <div class="container">

            <div class="row">

                <div class="col-sm-3">3</div>

                <div class="col-sm-4">4</div>

                <div class="col-sm-5">5</div>

            </div>

            <div class="row">

                <div class="col-sm-6">6</div>

                <div class="col-sm-6">6</div>

            </div>

            <div class="row">

                <div class="col-sm-11">11</div>

                <div class="col-sm-1">1</div>

            </div>

    </div>

</body>

</html>

Listing 4-7

Creating a Responsive Grid in the index.html File in the HtmlCssPrimer Folder

I removed some grid rows from the previous example and replaced the col-* classes with col-sm-*. The effect is that the cells in the row will be stacked horizontally when the browser window is greater than 576 pixels wide and stacked horizontally when it is smaller, as shown in Figure 4-7.

Creating a Simplified Grid Layout

For most of the examples in this book that rely on the Bootstrap grid, I use a simplified approach that displays content in a single row and requires only the number of columns to be specified, as shown in Listing 4-8.

<!DOCTYPE html>

<html>

<head>

    <title>ToDo</title>

    <meta charset="utf-8" />

    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css"

          rel="stylesheet" />

</head>

<body class="m-1">

    <h3 class="bg-primary text-white p-3">Adam's To Do List</h3>

    <div class="container-fluid">

        <div class="row">

            <div class="col-4">

                <form>

                    <div class="form-group">

                        <label>Task</label>

                        <input class="form-control" />

                    </div>

                    <div class="form-group">

                        <label>Location</label>

                        <input class="form-control" />

                    </div>

                    <div class="form-group">

                        <input type="checkbox" />

                        <label>Done</label>

                    </div>

                    <button class="btn btn-primary">Add</button>

                </form>

            </div>

            <div class="col-8">

                <table class="table table-striped table-bordered">

                    <thead>

                        <tr>

                            <th>Description</th>

                            <th>Done</th>

                        </tr>

                    </thead>

                    <tbody>

                        <tr><td>Buy Flowers</td><td>No</td></tr>

                        <tr><td>Get Shoes</td><td>No</td></tr>

                        <tr><td>Collect Tickets</td><td>Yes</td></tr>

                        <tr><td>Call Joe</td><td>No</td></tr>

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</body>

</html>

Listing 4-8

Using a Simplified Grid Layout in the index.html File in the HtmlCssPrimer Folder

This listing uses the col-4 and col-8 classes to display two div elements side by side, allowing the form and the table that displays the to-do items to be displayed horizontally, as illustrated in Figure 4-8.

Understanding the Basic Workflow

This may seem like a large number of steps for a simple application, but this process allows TypeScript features to be used and automatically takes care of detecting changes, running the compiler, and updating the browser.

Defining Functions with Parameters

Defining Functions That Return Results

Using Functions As Arguments to Other Functions

This example produces the same result as Listing 5-11.

Using Variable Closure

Using the Primitive Types

JavaScript defines a basic set of primitive types: string, number, and boolean. This may seem like a short list, but JavaScript manages to fit a lot of flexibility into these three types.

Using Conditional Statements

The Equality Operator vs. the Identity Operator

Explicitly Converting Types

The second result is the kind that causes confusion. What might be intended to be an addition operation is interpreted as string concatenation through a combination of operator precedence and over-eager type conversion. To avoid this, you can explicitly convert the types of values to ensure you perform the right kind of operation, as described in the following sections.

Using an Array Literal

In this example, I specified that the myArray variable should be assigned a new array by specifying the items I wanted in the array between square brackets ([ and ]). (There is no console output from this listing.)

Reading and Modifying the Contents of an Array

Enumerating the Contents of an Array

The JavaScript for loop works just the same way as loops in many other languages. You determine how many elements there are in the array by using the length property.

Using the Spread Operator

Using the Built-in Array Methods