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
- 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.
- 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.
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 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
- Strongly typed
- TypeScript type definition file (*.d.ts)
- Class-based object-orientation
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
- Angular IDE
- ALM IDE
- Vim Editor
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?
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.xor greater and npm version
5.xor greater by running
npm -vin 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:
- Create an application folder
- Add package definition and configuration files
- Install the packages
- Create the app’s Angular Module
- Create the main.ts file
- 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.
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.