Setting Up

Educative provides an innovative platform for running code in the browser. Most examples and exercises take advantage of this feature, so you don’t have to worry about setting up an environment on your machine. If you prefer your own editor/environment, that’s perfectly fine. I’ll quickly go over what you’ll need if you want to run the code on your machine.

Editor

Any editor will do. I highly recommend Visual Studio Code because it supports HTML, CSS, JavaScript, and TypeScript syntax highlighting. As long as your editor supports those languages, you’re good to go.

Angular CLI

Angular is ultimately a front end library. It isn’t required to serve files from a server. Simply opening an HTML file directly in the browser will work.

With that being said, the Angular team created a CLI utility tool for managing your Angular based projects. It can automate tasks, such as installing tools, scaffolding new projects, launching a server, etc. It will perform various tasks that will make developing Angular apps so much easier. I highly recommend installing it.

Before doing so, you’ll need to install Node and NPM. I recommend installing Node v14 and up. You can download Node here.

After installing Node, you will need to install TypeScript. To do so, you can run the following command:

npm install -g typescript

Lastly, we can install the Angular CLI package with the following command:

npm install -g @angular/cli

This command will install the CLI globally. You can verify the tool is working by running the following command:

ng --version

This command will output the version of the package. It will also output information about your environment, which can help verify that everything is up to date.

The ng command becomes available after installing the @angular/cli package. We’ll be using it frequently. If you prefer using Educative, then you can ignore this command whenever I bring it up, unless stated otherwise.

Visual Studio Code extension

Any editor will do. My recommendation is Visual Studio Code because there’s an official extension called Angular Language Service. It will add additional features to your editor to help develop Angular applications.

You can search for the extension by clicking on the extensions tab in the editor. Check out the screenshot below for more information.