Building a Hello World app with Angular

Before we start building our first Angular application, let's set up the development environment to get started with Angular apps.

Setting up the development environment

The first thing to do before writing any code is to set up the local development environment. We need an editor to write the code, a local server to run the application, package managers to manage the external libraries, compilers to compile the code, and so on.

Installing Visual Studio Code

Visual Studio Code is one of the greatest editors used to write Angular applications. So, we start with installing Visual Studio Code. Navigate to https://code.visualstudio.com/ and click on Download Code for Windows. Visual Studio Code supports platforms such as Windows, Linux, and OS X. So, you can also download it for other platforms depending on your need.

The home page of Visual Studio Code

Visual Studio Code is an open source and cross-platform editor that supports Windows, Linux, and OS X. It is one of the powerful text editors that includes features such as navigation, keyboard support with customizable bindings, syntax highlighting, bracket matching, auto indentation, and snippets, with support for many programming languages. It has built-in support to IntelliSense code completion, richer semantic code understanding and navigation, and code refactoring. It provides a streamlined, integrated debugging experience, with support for Node.js debugging. It is a lighter version of Visual Studio. It doesn't contain any built-in development server, such as IIS Express. However, it is very important to test a web application in a local web server as part of the development process. There are several ways available in the market to set up a local web server.

However, I chose lite-server as it is a lightweight, development-only node server that serves the static content, detects changes, refreshes the browser, and offers many customizations. Lite-server is available as an NPM package for Node.js. First, we will see how to install Node.js in the next section.

Installing Node.js

Node.js is used to develop server-side web applications. It is an open source and cross-platform runtime environment. The built-in libraries in Node.js allow applications to act as a standalone web server. Node.js can be used in scenarios where lightweight, real-time response is needed, such as communication apps and web-based gaming.

Node.js is available for various platforms, such as Windows, Linux, Mac OS X, Sun OS, and ARM. You can also download the source code of Node.js and customize it according to your needs.

In order to install Node.js, navigate to https://nodejs.org/en/ and download the mature and dependable LTS (long-term support) version for Windows.

The home page of Node.js

Node.js comes with NPM, a package manager that is used to acquire and manage JavaScript libraries for your development. To verify that the installation of Node.js and NPM is successful, follow these steps:

1. Open Windows Command Prompt, type the node -v command, and run it. You will get the version of Node.js that we installed.
2. Now, check whether NPM is installed along with Node.js. Run the NPM -v command, and you will get the version number of NPM that is installed.

Command Prompt with commands verifying the Node.js and NPM installations

Now, we have all that we need to write our first Angular application. Let's get started.

Creating an Angular application

I assume that you have installed Node.js, NPM, and Visual Studio Code and are ready to use them for development. Now, let's create an Angular application by cloning the git repository with the following steps:

1. Open Node.Js Command Prompt and execute the following command:

      git clone https://github.com/angular/quickstart my-
      angular

This command will clone the Angular quickstart repository and create an Angular application named my-angular for you with all the boilerplate codes required.

2. Open the my-angular cloned application using Visual Studio Code:

Folder structure of the my-angular application

The folder structure and the boilerplate code are organized according to the official style guide at https://angular.io/docs/ts/latest/guide/style-guide.html. The src folder has the code files related to application logic, and the e2e folder has the files related to end-to-end testing. Don't worry about other files in the application now. Let's only focus on package.json for now.

3. Click on the package.json file; it will have the details about the configurations of the metadata and project dependencies. The following is the content of the package.json file:

      {
      "name":"angular-quickstart",
      "version":"1.0.0",
      "description":"QuickStart package.json from the 
      documentation,             
      supplemented with testing support",
      "scripts":{
      "build":"tsc -p src/",
      "build:watch":"tsc -p src/ -w",
      "build:e2e":"tsc -p e2e/",
      "serve":"lite-server -c=bs-config.json",
      "serve:e2e":"lite-server -c=bs-config.e2e.json",
      "prestart":"npm run build",
      "start":"concurrently \"npm run build:watch\" \"npm 
      run serve\"",
      "pree2e":"npm run build:e2e",
      "e2e":"concurrently \"npm run serve:e2e\" \"npm run 
      protractor\"             
      --kill-others --success first",
      "preprotractor":"webdriver-manager update",
      "protractor":"protractor protractor.config.js",
      "pretest":"npm run build",
      "test":"concurrently \"npm run build:watch\" \"karma 
      start             
      karma.conf.js\"",
      "pretest:once":"npm run build",
      "test:once":"karma start karma.conf.js --single-
      run",
      "lint":"tslint ./src/**/*.ts -t verbose"
      },
      "keywords":[
      ],
      "author":"",
      "license":"MIT",
      "dependencies":{
      "@angular/common":"~4.0.0",
      "@angular/compiler":"~4.0.0",
      "@angular/core":"~4.0.0",
      "@angular/forms":"~4.0.0",
      "@angular/http":"~4.0.0",
      "@angular/platform-browser":"~4.0.0",
      "@angular/platform-browser-dynamic":"~4.0.0",
      "@angular/router":"~4.0.0",
      "angular-in-memory-web-api":"~0.3.0",
      "systemjs":"0.19.40",
      "core-js":"^2.4.1",
      "rxjs":"5.0.1",
      "zone.js":"^0.8.4"
      },
      "devDependencies":{
      "concurrently":"^3.2.0",
      "lite-server":"^2.2.2",
      "typescript":"~2.1.0",
      "canonical-path":"0.0.2",
      "tslint":"^3.15.1",
      "lodash":"^4.16.4",
      "jasmine-core":"~2.4.1",
      "karma":"^1.3.0",
      "karma-chrome-launcher":"^2.0.0",
      "karma-cli":"^1.0.1",
      "karma-jasmine":"^1.0.2",
      "karma-jasmine-html-reporter":"^0.2.2",
      "protractor":"~4.0.14",
      "rimraf":"^2.5.4",
      "@types/node":"^6.0.46",
      "@types/jasmine":"2.5.36"
      },
      "repository":{
      }
      }

4. Now, we need to run the NPM install command in the command window by navigating to the application folder to install the required dependencies specified in package.json:

Execute the NPM command to install the dependencies specified in package.json

5. Now, you will have all the dependencies added to the project under the node_modules folder, as shown in this screenshot:

Dependencies under the node_modules folder

6. Now, let's run this application. To run it, execute the following command in the command window:

      npm start

7. Open any browser and navigate to http://localhost:3000/; you will find the following page, which is rendered through our Angular application, displayed. Running this command builds the application, starts the lite-server, and hosts the application on it.

Activating the debug window in VS Code

Let's now walk through the content of index.html. The following is the content of index.html:

<!DOCTYPE html>
<html>
<head>
<title>Hello Angular </title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>My first Angular app for Packt Publishing...</my-app>
</body>
</html>

So far, we have seen how to create an Angular application by cloning the official QuickStart repository from GitHub. We will cover the steps to create Angular applications in detail in the upcoming chapters. Note that the scripts are loaded using System.js. System.js is the module loader that loads the modules during runtime.