Angular From Scratch Tutorial – Step 1

Posted on By Andre Dias
angular, javascript

Angular From Scratch Tutorial – Index

NEXT: Angular From Scratch Tutorial – Step 2: Components

Note

The purpose of this page in this tutorial series is to provide a very fast approach that is useful for revisions when you have already dealt with Angular, but after an absense of using it, it turns necessary to do a “disk swap” bringing from “disk” to your “memory” again. 🙂

If it is your first Angular approach, or you are a newbie, it is recommended to go first to the Angular’s documentation. After, this page will serve you as a summary for fast referencing and revision.

Target

This step creates the empty application — the starting point to begin a project.
Avoid using the source code for this initial step.
Try by your own.

Source Code/Download

For more details, the source code may be found on GitHub, “step3” tag (includes step1 up to step3).

Pre-requisites

  1. Install Node.js

  2. Install npm

Install Angular

Open a console.

Install CLI globally: npm install -g @angular/cli

If desired to make sure that will be installed the lastest version, do instead: npm install -g @angular/cli@latest

If @angular/cli already installed globally, then go straight to the next procedure.

*** IMPORTANT NOTE

This tutorial, created in 2021, used the current version at that time.
Within a certain time, new versions are created, and the versions bring some differences, like aggregating the Server-Side Rendering (SSR) option when creating a new project, and so on.

Create the application.

Create a folder to work with the tutorial. The following commands assumes that you are working under this folder.

1. generate a new project and skeleton application

ng new afsTutorial

Answer the questions (example below).
Be prepared, may take some time.

ng new afsTutorial
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE afsTutorial/angular.json (3606 bytes)
CREATE afsTutorial/package.json (1255 bytes)
...
CREATE afsTutorial/e2e/tsconfig.json (294 bytes)
CREATE afsTutorial/e2e/src/app.e2e-spec.ts (644 bytes)
CREATE afsTutorial/e2e/src/app.po.ts (301 bytes)
√ Packages installed successfully.
    Directory is already under version control. Skipping initialization of git.

2. Install the libraries

Go to the new folder created.

cd afsTutorial

Then run:

npm install

or

ng serve

or

ng serve –port 4300

 

3. Start the App To Test

Run:
npm start

Point to:
localhost:4200

 

Explore the interface. Click on the buttons.

 

 

Also, check the links to the documentation.
This tutorial is based on it.
The details not referred here, you’ll get there.

 

Below, it is shown the code created by the procedure that provides the default structure and configuration.

 

 

The target of this tutorial is to lead to some core concepts that support the main tasks, to help keeping them by heart or to revise them when you have worked with another tech for some time long enough to make you feel uncomfortable when returning to Angular.

The next post, will move this content to another component, preserving it and being accessible by a link.

NEXT

Angular From Scratch Tutorial – Index

Angular From Scratch Tutorial – Step 2: Components