How to Create an application in angular and adding bootstrap

Once you have Node.js, angular-CLI, an editor, and a browser, you have enough of a foundation to start the development process.

Creating the Project

To create the project, select a convenient location and use a command prompt to run the following command to create a new project called todo:

ng new todo

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

The ng new command creates a project with almost everything that is required for this post. The exception is the Bootstrap CSS package, which I use to style the HTML content throughout this book. Run the following commands to navigate to the todo folder created by the ng new command and add the Bootstrap package to the project:

cd todo
npm install bootstrap@4.1.1

To configure the Angular development tools to use the Bootstrap CSS file, add the entry shown in Listing 2-1 to the styles section of the angular.json file, which was added to the todo folder by the ng new command when the project was created.

Listing 2-1. Configuring CSS in the angular.json File in the todo Folder

...
{
 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 "version": 1,
 "newProjectRoot": "projects",
 "projects": {
 "todo": {
 "root": "",
 "sourceRoot": "src",
"projectType": "application",
 "prefix": "app",
 "schematics": {},
 "architect": {
 "build": {
 "builder": "@angular-devkit/build-angular:browser",
 "options": {
 "outputPath": "dist/todo",
 "index": "src/index.html",
 "main": "src/main.ts",
 "polyfills": "src/polyfills.ts",
 "tsConfig": "src/tsconfig.app.json",
 "assets": [
 "src/favicon.ico",
 "src/assets"
 ],
 "styles": [
 "src/styles.css",
 "node_modules/bootstrap/dist/css/bootstrap.min.css"
 ],
 "scripts": []
 },
...

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

Everything is in place, so it is time to test the Angular development tools. Run the following command from the todo folder:

ng serve --port 3000 --open

This command starts the Angular development tools, which go through an initial build process to prepare the application for the development session. This process takes a moment and will generate output similar to this:

** Angular Live Development Server is listening on localhost:3000, open your browser on
http://localhost:3000/ **
Hash: ebb64e6046efff317389
Time: 6767ms
chunk {main} main.js, main.js.map (main) 10.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.7 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.06 MB [initial] [rendered]
[wdm]: Compiled successfully

Don’t worry if you see the 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 is shown in the following image, which shows the placeholder content added to the project when it was created.

Editing the HTML File

I am going to start by removing the placeholder content added to the project when it was created so that I can start with an HTML file that contains static content that I will later enhance using Angular. Edit the index.html file in the todo/src folder to replace the contents with those shown in Listing 2-2.

Listing 2-2. The Contents of the index.html File in the src folder

<!DOCTYPE html>
<html>
<head>
 <title>ToDo</title>
 <meta charset="utf-8" />
</head>
<body class="m-1 p-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-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>

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 the picture.

The HTML elements in the index.html file show how the simple Angular application I create in this post 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.

I used the excellent Bootstrap CSS framework to style HTML content. Bootstrap is applied by assigning elements to classes, like this:

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

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 website as I apply Bootstrap, and I provide a brief overview of the classes. 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.