First Example with the right Tools

Let's jump straight in!

We will start building an example application in Angular 5 to demonstrate MVVM, SASS and TypeScript. For this we need to prepare our development environment though, so let's do this first.

Development Environment

Tools Overview

Let's start by saying we need to install NodeJS. NodeJS is a JavaScript runtime that was developed to run across all platforms and, perhaps most importantly, to run on the server-side. While we traditionally used JavaScript purely to execute in a client browser, it can now also be used to host web servers. There are many companies globally who make use of JavaScript as a server technology. One module that runs on Node as a server-side script and web-server is called "ExpressJS". Express is used by companies like IBM, Accenture and even Uber!

When you install NodeJS, you will also notice that "NPM" is installed. NPM is the Package Manager for Node. (Node Package Manager) It will allow you to install packages to your project using a simple command line instruction or a JSON file stored in your project!

Head over to NodeJS' web page (nodejs.org) and download and install NodeJS and NPM and then we'll continue with the next steps.

Intermission...

Once Node is installed, you can verify the Node version and NPM version by using your terminal (for Linux users) or PowerShell or command line (for Windows users) by typing:

node --version
npm --version

If you are able to verify the versions, it means that you have successfully installed the main tool that we are going to be using!

IDE

If you would like to keep using a text-editor, you can skip over this section. I highly recommend that you use an IDE when developing Angular applications. An IDE provides you with so many benefits:

• Code completion
• Syntax highlighting
• Project navigation and structure
• And so much more!

My pick of the litter is "VSCode". VSCode is based on Atom, an open-source hackable text-editor. As they share a common code base, they can likely be used interchangeably, though I'm sticking with VSCode for now as I feel it's just a little more responsive than Atom.

If you would like to download VSCode, it's 100% free and provided my Microsoft. Simply search for the download link on Google.

Angular CLI

The next tool we want to install is Angular CLI. While you definitely can build Angular 5 applications without the CLI, it is incredibly involved. You need to configure TypeScript, install packages, configure SystemJS or Webpack...

Or just install the CLI, which is what we're going to be doing.

Open your terminal application of choice and simply type:

npm install -g @angular/cli

This instructs NPM to install the latest Angular CLI package to your machine. The "-g" flag indicates that this package needs to be installed globally.

Note that this will likely take a while to complete depending on your connection speed. The CLI uses approximately 126MB of disk space...

Global vs Local

When packages are installed globally you can think of them as "utilities". The CLI is a perfect example: You don't want to navigate to a specific path on your machine to be able to use it. You want to use it anywhere!

When packages are installed locally it means that those are project-specific packages. While you can install any package globally, there really isn't any point to it. For example: Installing jQuery to the global package cache will only use disk space on your machine. jQuery is a project-specific package and must thus be installed inside a project.

Create a new Project

Once the CLI has been installed successfully, we need to setup a new project. Using your terminal of choice, navigate to your favourite location on your machine where you want to create your project.

PS D:\> cd D:\Development\
PS D:\Development>

And then simply type:

ng new hello-world

When you execute this command, the CLI will scaffold the entire project for you and start installation of the required project packages through NPM.

During the installation you may notice some warnings, though for the most part these are nothing to worry about. When you see Errors there might be an issue. If you experience errors, simply navigate into the directory (cd /hello-world) and type "npm install" to retry the installation of the required packages.

Now that we're done, let's open up the project and see what it looks like! As noted, I'm using VSCode here, but you can open the project in any desired text-editor.

As you can see, the CLI has generated a number of files and directories in our project and has also triggered an "npm install" that created the "node_modules" directory.

The project structure is fairly simple to understand:

Name	Explanation
e2e	This directory includes your end-to-end test scripts for your application
node_modules	Created by NPM to contain all your project-specific packages
src	This is where your actual code will go!
.angular-cli.json	This file directs the Angular CLI on how your application is to be built
package.json	This is the package descriptor of your application. It contains information such as the project name, author and dependencies this project has
tsconfig.json	This file contains the configuration we need to instruct the CLI on how to interpret our TypeScript files (ECMA compliance level, etc...)

Without changing any file anywhere, simply go back to your terminal window and type "ng serve". After a short while, you will see a readout saying "webpack: Compiled Successfully". Keep this terminal window open! If you close it, the web server will shut down and you will not be able to open the site in your browser. If you now open a browser window and point it to "http://localhost:4200", you will see the generic scaffolded CLI Angular 5 project.

Congratulations! You have successfully configured your development environment for developing applications in Angular 5!

Up Next

In the next article I'll be covering changing of files and going into styling with SASS.

In the meanwhile, feel free to read up on the documentation of Node, NPM, AngularCLI and Angular 5 to gain an understanding of why these tools are used and why we decided to use them.