Creating an Angular Application
Step 1: Install Angular CLI: Angular CLI (Command Line Interface) is a powerful tool for scaffolding and managing Angular applications. Install it globally using npm:
npm install -g @angular/cli
Step 2: Create a New Angular Project: Use Angular CLI to create a new Angular project. Navigate to the desired directory and run:
ng new my-angular-app
Step 3: Navigate to the Project Directory: Move into the newly created project directory:
cd my-angular-app
Step 4: Serve the Application: Launch the development server to see your app in action:
ng serve
Folder Structure:
Dependencies:
"dependencies": {
"@angular/animations": "^17.3.0",
"@angular/common": "^17.3.0",
"@angular/compiler": "^17.3.0",
"@angular/core": "^17.3.0",
"@angular/forms": "^17.3.0",
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/router": "^17.3.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
}
Example:
<!-- app.component.html -->
<h1>Hello Angular</h1>
//app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'my-angular-app';
}
Output:
Upon running `ng serve`, the Angular CLI will compile the application and launch a development server. Open a web browser and navigate to `http://localhost:4200` to view the application running locally.
What is Angular ?
Angular is an open-source web application framework maintained by Google and a community of developers. It is designed to build dynamic and interactive single-page applications (SPAs) efficiently. With Angular, developers can create robust, scalable, and maintainable web applications.
Table of Content
- History
- Why Angular?
- Here are some of the features of Angular
- Creating an Angular Application
- Features of Angular
- Advantages of Angular
- Disadvantages of Angular
- Conclusion
Contact Us