Angular First App
Now that your Angular environment is ready, lets create your very first Angular app
Follow these simple steps to get started.
Step 1: Open Command Prompt & Choose a Folder
For example, if you want to create the app in C:\Users\YourName\Documents, you can type
- Open Command Prompt (Windows) or Terminal (macOS/Linux).
- Navigate to the folder where you’d like to create your new Angular app.
For example, if you want to create the app in C:\Users\YourName\Documents, you can type
cd C:\Users\YourName\DocumentsStep 2: Create a New Angular App
Use the ng new command followed by your app name.
Syntax:
Use the ng new command followed by your app name.
Syntax:
ng new app_nameExample:
ng new myFirstApp
This command will create a new folder called myFirstApp containing all the necessary files for your Angular app.
Step 3: Understand Your App Folder Structure
Go to the newly created myFirstApp folder. Inside, you will find
This folder contains your apps main files
This is the root of your Angular app.
Go to the newly created myFirstApp folder. Inside, you will find
- src folder: the main folder containing all the source code.
- Inside src, you will see an app folder
This folder contains your apps main files
- HTML files (structure of the page)
- CSS files (styling)
- TypeScript (.ts) files (logic and behavior)
This is the root of your Angular app.
Running Your First Angular App
Now, lets see your app live in action
Step 1: Open Command Prompt in Project Folder
2. Or open Command Prompt and use cd to move to the folder:
Now, lets see your app live in action
Step 1: Open Command Prompt in Project Folder
- Navigate to your project folder (myFirstApp).
- You can either
2. Or open Command Prompt and use cd to move to the folder:
cd C:\Users\YourName\Documents\myFirstAppStep 2: Compile & Run the App
In Command Prompt, type
ng serve
Angular CLI will compile your app.
Once it finishes, it will show a message that the app is running at
http://localhost:4200
Step 3: View Your App
Open your web browser and go to
http://localhost:4200
You should see your brand new Angular app running