How to create your first Angular app Step-by-Step
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
Before You Start
To be able to follow along with this article’s demonstration you should have:
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
You will see the following message, select ‘N’
9. Now you will your app on browser. Do not close the browser now.
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>'
4. Press Ctrl + S to save the app.component.ts
5. Now switch back to browser, you will see the output changed.
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.
app.component.html - HTML template
app.component.ts - Typescript component class
app.component.scss - Stylesheet file