# Part 0: Overview

## Overview <a href="#before-you-start" id="before-you-start"></a>

For the best experience with this tutorial, review these requirements to make sure you have what you need to be successful.

### Experience <a href="#your-experience" id="your-experience"></a>

This tutorial assumes that you have experience with the following:

* Creating Web pages by editing the HTML directly.
* Programming Web site content in JavaScript.
* Reading Cascading Style Sheet (CSS) content and understanding how selectors are used.
* Using command-line instructions to perform tasks on your computer.
* (optional, nice to have) Some familiarity with [Angular](https://docs.angular.lat/docs).

### Equipment <a href="#your-equipment" id="your-equipment"></a>

The tutorial can be completed by using a local installation of the Angular tools or by using [StackBlitz](https://stackblitz.com/edit/angular-x7pqdn?file=src%2Fmain.ts) in a Web browser. Local Angular development can be completed on Windows, MacOS or Linux based systems.

### Concept Preview <a href="#conceptual-preview-of-your-first-angular-app" id="conceptual-preview-of-your-first-angular-app"></a>

This tutorial will create an Angular app that displays an inbox with the list of Requests assigned to the logged on user in ProcessMaker and renders the form as defined in the ProcessMaker form builder, complete with JavaScript and CSS.

<figure><img src="https://1243566085-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPyTHGwZ0VereJkRNmGxE%2Fuploads%2F7izviSjKUCd7CrFQMIcD%2Fimage.png?alt=media&#x26;token=de8c645e-493f-4bfb-8f2f-7dac6b21a53a" alt=""><figcaption></figcaption></figure>

## Local Development Environment <a href="#local-development-environment" id="local-development-environment"></a>

Perform these steps in a command-line tool on the computer you want to use for this tutorial.

### Step 1: Identify the Version of `node.js` that Angular Requires <a href="#step-1---identify-the-version-of-nodejs-that-angular-requires" id="step-1---identify-the-version-of-nodejs-that-angular-requires"></a>

Angular requires an active LTS or maintenance LTS version of Node. Let's confirm your version of `node.js`. For information about specific version requirements, see the `engines` property in the [package.json file](https://unpkg.com/browse/@angular/core@15.1.5/package.json).

From a **Terminal** window:

1. Run the following command: `node --version`.
2. Confirm that the version number displayed meets the requirements.

### Step 2: Install the Correct Version of `node.js` for Angular <a href="#step-2---install-the-correct-version-of-nodejs-for-angular" id="step-2---install-the-correct-version-of-nodejs-for-angular"></a>

If you do not have a version of `node.js` installed, please follow the [directions for installation on nodejs.org](https://nodejs.org/en/download/).

### Step 3: Install the Latest Version of Angular <a href="#step-3---install-the-latest-version-of-angular" id="step-3---install-the-latest-version-of-angular"></a>

After `node.js` and `npm` are installed, install the [Angular CLI](https://angular.io/cli) which provides tooling for effective Angular development.

From a **Terminal** window run the following command:

`npm install -g @angular/cli`.

### Step 4: Install Integrated Development Environment (IDE) <a href="#step-4---install-integrated-development-environment-ide" id="step-4---install-integrated-development-environment-ide"></a>

Use any tool you prefer to build apps with Angular. We recommend the following:

1. [Visual Studio Code](https://code.visualstudio.com/).
2. As an optional, but recommended step, you can further improve your developer experience by installing the [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template).

## Review <a href="#lesson-review" id="lesson-review"></a>

In this part, you learned about the app that you build in this tutorial and prepared your local computer to develop Angular apps.

## Next Steps <a href="#next-steps" id="next-steps"></a>

{% content-ref url="part-1-hello-world" %}
[part-1-hello-world](part-1-hello-world)
{% endcontent-ref %}
