How to create your first Angular app Step-by-Step Guide

Angular

Angular is basically is an open-source, JavaScript-based client-side framework that helps us to develop a web-based application. It is a modern Single Page Application Framework by Google. What does it mean? In the traditional web apps, the HTML is dynamically constructed on the server and then sent to the browser. You have a full page refresh when navigating between pages.

Before You Start

To be able to follow along with this article’s demonstration you should have:

• A integrated development environment like VS Code.
• Node version 11.0 or higher installed on your machine.
• Node Package Manager version 6.7 or higher (usually ships with Node installation).
• Angular CLI version 8.0 or higher.
• Version 8 of Angular or higher.

 

Generating your first project

Create a new project using Angular CLI you need to perform the below steps

Launch VS Code, select View – Terminal

1. Type ng new myfirstproject


2.  When you see ‘Would you like to add Angular routing?’  Select ‘N’

3.  When you see ‘Which stylesheet format would you like to use?’ Select SCSS


4.  Waiting for creating the files.

5.  After created the files.  Your project in C:\Users\Windows 10\myfirstproject folder.

6. Select File – Open Folder …   , select C:\Users\Windows 10\myfirstproject folder.

7. Select Run – Run without Debugging

8. You will see the following message, select ‘N’


9. Now you will your app on browser. Do not close the browser now.


Project structure

The src folder is the main directory of your application. It contains all the source code, assets such as images or styles, environmental configuration, and more.



1.  Select app.component.ts


2.  Remark templateUrl: './app.component.html' this line



3.  Change to template :'<h1> Hello my Project</h1>'


@Component({ selector: 'app-root', // templateUrl: './app.component.html', template :'<h1> Hello my Project</h1>', styleUrls: ['./app.component.scss'] })

4. Press Ctrl + S to save the app.component.ts

5. Now switch back to browser, you will see the output changed.

Components


Components are basic building blocks of Angular applications. They are encapsulated, can be reused and nested in each other.
Now our project has App Component.
Each component has three parts, which are used when rendering that particular component.
Each component has its own HTML template and the corresponding Typescript file.

 e.g.

app.component.html - HTML template
app.component.ts - Typescript component class
app.component.scss - Stylesheet file