In this article I will explain step by step, how to develop first
Angular application (Hello World App) in Visual Studio.
What is Angular?
Angular is a web development platform developed and maintained by Google.
TypeScript is a strongly typed programming language that builds on
JavaScript, giving you better tooling at any scale.
Angular is a component-based framework for building scalable web applications.
Components are the fundamental building block for creating applications in
Angular.
Angular is a collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication and more.
Requirements
This article requires following to be installed on your computer for developing the
Angular project.
1. Visual Studio 2022
2. Basic understanding of HTML, CSS, and JavaScript
3. Node.js, npm (Node Package Manager) and Angular CLI.
Installing Node.js, npm and Angular CLI
Creating a new Angular Project
Let’s get started with creating your first
Angular project.
1. Open Visual Studio and from Get started section, click on Create a new project.
![Create Angular Hello World App in Visual Studio]()
2. From the Create a new project dialog window, select Standalone TypeScript Angular Project option and then click on Next.
![Create Angular Hello World App in Visual Studio]()
3. Then, you can set a suitable Name for your project and also set its Location where you want to create the Project and then click on Create.
![Create Angular Hello World App in Visual Studio]()
4. Your first Hello World Angular Web Application Project is now ready and you should see the following folders and files in your Solution Explorer window.
![Create Angular Hello World App in Visual Studio]()
5. The Project Structure have the following predefined directory structure.
![Create Angular Hello World App in Visual Studio]()
src – Contains the application source code.
app – The main application folder where most of code will reside.
angular.json – Configuration file for
Angular project.
package.json – Lists the project dependencies and scripts.
Launching the Development Server
To open the development server, right click on the Solution Explorer and click on Open in Terminal.
![Create Angular Hello World App in Visual Studio]()
After, opening the terminal run the following command to launch the development server.
ng serve
![Create Angular Hello World App in Visual Studio]()
![Create Angular Hello World App in Visual Studio]()
After server started successfully, open web browser and navigate to the url i.e. http://localhost:4200/.
You should see the
Angular app is running now.
![Create Angular Hello World App in Visual Studio]()
Component
Now we will have to edit the following component files.
app.component.html
In App.Component.html, you will need to replace the predefined html with the following code (as shown below).
![Create Angular Hello World App in Visual Studio]()
app.component.css
In App.Component.css, you will need to define the cascading style sheet (CSS).
![Create Angular Hello World App in Visual Studio]()
h1 { font-family: Arial; font-size: 10pt; }
app.component.ts
In App.Component.ts, you will need to update the Title (as shown below).
![Create Angular Hello World App in Visual Studio]()
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
stitle = 'This is my First Angular App.';
}
Finally, after saving all the changes, the app will automatically update the browser with updated content.
![Create Angular Hello World App in Visual Studio]()
Downloads
