Create Angular 13 example

Step 2 — Initializing a New Angular 13 Example Project

In this step, we'll proceed to create our example project. Head back to your command-line interface and run the following commands:

$ cd ~
$ ng new angular-httpclient-example

The CLI will ask you a couple of questions — If Would you like to add Angular routing? Type y for Yes and Which stylesheet format would you like to use? Choose CSS.

This will instruct the CLI to automatically set up routing in our project so we'll only need to add the routes for our components to implement navigation in our application.

If you run the ng version command inside your project's folder, you should get a similar output:

Angular CLI: 13.0.0
Node: 14.17.0
Package Manager: npm 6.14.13
OS: linux x64

Angular: 13.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.0
@angular-devkit/build-angular   13.0.0
@angular-devkit/core            13.0.0
@angular-devkit/schematics      13.0.0
@schematics/angular             13.0.0
rxjs                            6.6.7
typescript                      4.2.4

Next, navigate to you project’s folder and run the local development server using the following commands:

$ cd angular-httpclient-example
$ ng serve

A local development server will start listening on the

http://localhost:4200/

address.

Open your web browser and navigate to the http://localhost:4200/ address to see your app up and running. This is a screenshot at this point:

You should now leave the development server running and start a new command-line interface for running the CLI commands of the next steps.

In the next step, we'll learn how to create a fake JSON REST API that we'll be consuming in our Angular example application.