Angular: Create a workspace (Serie 1)

Prerequisites

1.1 Node.js

According to the documentation, you need Node.js (>10.9.0) installed on your computer. You can check the Node version with the following command:

 node -v.

1.2 npm

We use the npm client command line shipped with Node.js to download and install npm packages.

1.3 Angular CLI

Use the following command to install the Angular CLI globally:

 npm install -g @angular/cli

You can find the available command reference here.

Create a workspace and initial app

In order to create a skeleton for an application named my-app, you only need to run the new command as:

ng new my-app

The new command prompts you to select the routing mode, the style mode (css, scss...).

Create a workspace under an existing folder

For creating a workspace under an existing folder, do the following:

  1. open a terminal on your current folder (e.g. my-app)
  2. Run the following command : ng new my-app --directory=./

Run your app

In order to build and serve your app locally, Angular CLI is shipped with a development server.

Run the following command to open your app:

cd my-app
ng serve --open

The --open option indicates to open the app in your default browser.

Comments

Post a Comment

Popular posts from this blog

Spring JPA : Using Specification with Projection

You may probably know that using Specification with Projection is not possible at this moment. I'll show you how you can easily bypass this problem using the JPA Criteria. 1. Create an extended repository We begin by creating an extending global repository as follow : You can find more information here . 2. Add our custom method In order to limit the fields returned for each item, the consumer of my API must provide the required fields this way: /orders?fields=productId,name,quantity . ( Best Practices ) Basically, I'm defining the SELECT clause with the returned fields (cf. getSelections() ): 😎Happy coding...
Read more

Chip input using Reactive Form

The Chips component documentation from the angular material website, describes how to use the MatChipInput directive with a chip-list for adding or removing chips. I'll show you how you can implement the same component using Reactive Form. The HTML template: The TS component file:   As you can see, we use the FormBuilder class to simplify the form creation. We define our requirements as a  FormArray within our FormGroup. The requirements will be accessed in our template with this expression inside the *ngFor of <mat-chip></mat-chip> : *ngFor="let requirement of form.get('requirements').controls; let i = index;" In the ChipComponent class, the requirements array is accessed by using this expression: this.form.get('requirements') as FormArray; Thanks
Read more