Angular: Getting Started – First Things First (P1)

Introduction

First things first. Before we can start coding with Angular, there are some preparatory steps. Welcome to Angular: Getting Started.

• Selecting a Language
• Selecting an Editor
• Setting up Our Environment
• Setting up an Angular Application
• About Modules

In this section, we’ll evaluate several languages we could use to build an Angular application and select one. Once we’ve picked a language, we select an editor that full supports development in that language. Then we set up the boilerplate code for an Angular application, and we’ll talk about modules and what they mean in Angular. Let’s get started.

Selecting a Language

When building Angular applications we have many language choices available for us. First, some background, the JavaScript language specification standard is officially called ECMAScript or ES. Up until recently the ES versions were defined by a  sequential number.

• ECMAScript (ES)
• ES 3 is supported by older browsers.
• ES 5 is the version currently supported by most modern browsers.
• ES 2015 (formerly known as ES 6) Most browsers don’t yet support ES 2015.
  • Must be transpiled to ES 5 – What does that mean? Code developed with ES 2015 must be compiled by a tool that converts that ES 2015 syntax to comparable ES 5 syntax before the browser executes it. That way we as developers get the benefits of the new ES 2015 productivity features and the browsers still get code they understand.

Since Angular is a JavaScript library we could use any of the many compile to JavaScript languages to build our Angular application.

• But the most common language choices or Angular include the ES 5 version of JavaScript. ES 5 code runs in the browsers today without transpilation so no compile step is required.
• If we want to take advantage of some of the new ES 2015 features to improve productivity such as classes, the let statement and arrow syntax, we can write our Angular code using ES 2015. We then transpile our code to ES 5 before running it.
•  Another language option is TypeScript. TypeScript is a superset of JavaScript and must be transpiled. One of the key benefits of TypeScript is its strong typing, meaning that everything as data type. Because of this strong typing, TypeScript has great tooling including inline documentation, syntax checking, code navigation, and advanced refactoring so TypeScript helps us better reason about our code. The Angular team itself takes advantage of these benefits and uses  TypeScript to build Angular 2. Most of the demo code in the Angular documentation at present  also uses TypeScript. For these reason, TypeScript is the language of choice for many  Angular developers.
•  Dart is another option. It is non-JavaScript-based language for building Angular application.

Because we’ll use TypeScript throughout this article, let’s take a moment to look at what TypeScript is all about.

What is TypeScript?

TypeScript is an open source language that is a superset of JavaScript and compiles to plain JavaScript through transpilation. It is a strongly typed so every variable, every function, and every function parameter can have a data type.

How does TypeScript determine the appropriate types when using JavaScript libraries that are not strongly typed? By using TypeScript type definition files. These files contain the definition of each type in a library. These files are named with the library name .d.ts

TypeScript implements the ES 2015 class-based object orientation plus more. It implements classes, interfaces, and inheritance so if you have experience with an object-oriented programming language such as C#, C++ or Java, using TypeScript may feel very natural to you.

• Open source language
• Superset of JavaScript
• Transpiles to plain JavaScript
• Strongly typed
  • TypeScript type definition file (*.d.ts)
• Class-based object-orientation

Learning More:

https://www.typescriptlang.org/

Selecting an Editor

There are many editors that fully support TypeScript either out of the box or with a plugin including all of these.

• Visual Studio Code
• Sublime Text
• Atom Editor
• WebStorm
• Angular IDE
• ALM IDE
• Brackets
• Vim Editor
• Others

Select one of these or whichever editor suits you best, but keep in mind that your experience with TypeScript will be much more pleasurable if you select an editor that understands TypeScript. For this series, I am using Visual Studio Code.

Visual Studio Code runs in Linux, Windows, and OSX. It has great features that support TypeScript such as auto completion, IntelliSense, syntax checking, and refactoring. If you want to use VS Code as your editor, you can download and install from this URL https://code.visualstudio.com/

Setting up Our Environment

Setting up our development environment requires two basic steps.

• Install npm or Node Package Manager
• Set up the Angular application

There is no need to manually install Angular or TypeScript or any other libraries; however this step 2 is really quite a process, but first things first. What is npm?

npm or Node Package Manager is a command line utility that interacts with a repository of open source projects. Npm has become the package manager for JavaScript. Using npm, we can install libraries, packages, and applications along with their dependencies. We’ll need npm to install all of the libraries for Angular and to execute scripts to transpile our code and launch our Angular application.

If you don’t already have npm, you can download from this link https://nodejs.org/en/download/ . Let’s take a look.

Following that link take us to the download page for Node, which installs npm.

Verify that you are running at least Node.js version 8.x or greater and npm version 5.x or greater by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.

Setting up an Angular application

Depending on the tools that you select, setting up an Angular application could be somewhat laborious. Before we begin, let’s list the required steps. Then we’ll look at ways to set up Angular without actually performing these steps. To manually set up an Angular application, we’d need to:

1. Create an application folder
2. Add package definition and configuration files
3. Install the packages
4. Create the app’s Angular Module
5. Create the  main.ts file
6. Create the host Web page (index.html)

Luckily, we have some options. We could manually perform each of these steps, though it would be time consuming and prone to error so this option is not recommended.

Alternatively we could use tooling such as the Angular CLI. Angular CLI is the command line tool for generating the setup files and boilerplate code for Angular application. The CLI also generates your components, modules, services, and other files. It scaffolds and executes your unit and end-to-end tests and provides options to minimize, package, and prepare the files you need for deployment. The Angular CLI an be found here https://github.com/angular/angular-cli/wiki. The CLI is the recommended tool for building, testing, and deploying Angular applications.

About Modules

Problems:

• With JavaScript there is always the problem of namespaces. If we are not careful we can easily end up with variables or functions in the global namespace.
• In addition, JavaScript didn’t provide features to help with code organization.

Modules help resolve these issues:

• AngularJS has modules to help us organize our code and resolve some namespacing issues.
• TypeScript also has modules that help keep things out of the global namespace.
• ES 2015 set a standard for defining a module. In ES 2015, a module is a file and a file is a module so when coding in ES 2015, we don’t need to define or name modules. Just create a file, write some code, export or import something, and bang! The file becomes a module. Angular leverages ES 2015 modules so as we create code files and import or export something, we create the modules for our application.
• Angular also has Angular modules. Angular modules are separated and different from Angular’s implementation of ES 2015 modules. Let’s clarify the difference between ES 2015 modules and Angular modules.