How to create a project of Angular?

To create an Angular project, you'll primarily use the Angular Command Line Interface (CLI), a powerful tool that streamlines the development process from setup to deployment. This guide will walk you through the essential steps to get your first Angular application up and running.

How to Create an Angular Project?

Creating an Angular project involves setting up your development environment, generating a new application using the Angular CLI, and then running it locally.

1. Set Up Your Development Environment

Before you can create an Angular project, you need to install a few prerequisites.

Node.js and npm: Angular requires Node.js and npm (Node.js package manager) or Yarn to build and run your applications. It's recommended to use the Long Term Support (LTS) version of Node.js.
- Download and Install Node.js: Visit the official Node.js website and download the LTS version for your operating system. npm is bundled with Node.js.
- Verify Installation: Open your terminal or command prompt and run:
```
node -v
npm -v
```
  This will display the installed versions of Node.js and npm.
Install the Angular CLI: The Angular CLI is your primary tool for creating, developing, and maintaining Angular applications. Install it globally using npm:
```
npm install -g @angular/cli
```
- Verify CLI Installation:
```
ng version
```
  This command will show you the Angular CLI version and other relevant package versions.

2. Create a New Workspace and Initial Application

Once the Angular CLI is installed, you can create a new Angular project with a single command. This command sets up a new workspace and an initial application.

Generate a New Project: Navigate to the directory where you want to create your project in your terminal and execute:
```
ng new my-angular-app
```
Replace my-angular-app with your desired project name.
- The CLI will prompt you:
  - "Would you like to add Angular routing?" Type y for yes (recommended for most applications) or n for no.
  - "Which stylesheet format would you like to use?" Choose your preferred stylesheet preprocessor (CSS, SCSS, Sass, Less, Stylus). CSS is a good starting point.
- The CLI will then create the necessary files and folders, install npm packages, and set up your project structure. This might take a few minutes.

3. Serve the Application

After the project is created, you can navigate into its directory and serve it to see it in action.

Navigate to Project Directory:
```
cd my-angular-app
```
Run the Application:
```
ng serve --open
```
- The ng serve command compiles your application and launches a development server.
- The --open (or -o) flag automatically opens your default web browser to http://localhost:4200/, where your new Angular application is running.
- The development server automatically reloads the application when you make changes to the source files.

4. Understand Angular Components

Angular applications are built as a tree of components. A component is a fundamental building block that combines an HTML template, CSS styles, and a TypeScript class to define a part of the user interface.

app.component.ts: This file defines the main application component.
app.component.html: This is the HTML template for your main component.
app.component.css (or your chosen style file): This file contains the styles specific to your main component.
app.module.ts: This file defines the root module, which ties components together and tells Angular how to assemble the application.

5. Make Changes to the Application

You can easily modify your application's content by editing the source files.

Open the Project: Use your favorite Integrated Development Environment (IDE) like VS Code to open the my-angular-app folder.
Edit app.component.html: Locate src/app/app.component.html. This file contains the default content displayed on your initial page. You can remove most of its content and add your own HTML.
- For example, replace the default content with:
```
<h1>{{ title }}</h1>
<p>Welcome to your first Angular application!</p>
<router-outlet></router-outlet>
```

Edit app.component.ts: Open src/app/app.component.ts. This file contains the TypeScript logic for your component.

You'll see a title property. You can change its value:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My Awesome Angular App'; // Change this line
}

Save your changes, and the browser will automatically refresh to show your updates.

6. Change the Application Title

Beyond the component's title, you can also change the title displayed in the browser tab.

Modify index.html: Open src/index.html. This is the main HTML file that serves as the entry point for your application.

Find the <title> tag and change its content:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Custom Angular Title</title> <!-- Change this line -->
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Save the file, and your browser tab will update with the new title.

7. Add Application Styles

Angular provides several ways to manage styles, from global styles to component-specific styling.

Global Styles: For styles that apply to your entire application, use src/styles.css (or styles.scss, etc., depending on your choice during project creation).
- Open src/styles.css and add some global styling:
```
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f4f4f4;
  color: #333;
}

h1 {
  color: #007bff;
}
```
Component-Specific Styles: For styles that are encapsulated within a particular component, use the component's dedicated style file (e.g., src/app/app.component.css). These styles are scoped to the component and won't affect other parts of your application unless explicitly intended.
- Open src/app/app.component.css and add styles specific to AppComponent:
```
h1 {
  font-size: 2.5em;
  text-align: center;
  margin-bottom: 20px;
}

p {
  text-align: center;
  font-style: italic;
}
```
- Notice that the h1 style in app.component.css will override or supplement the global h1 style for the AppComponent because component styles have higher specificity.

Key Angular CLI Commands

Here's a quick reference for essential Angular CLI commands:

Command	Description
`ng new <project-name>`	Creates a new Angular workspace and application.
`cd <project-name>`	Navigates into your project directory.
`ng serve [--open]`	Builds and serves your application, optionally opening it in a browser.
`ng generate component <name>`	Creates a new component. (`ng g c <name>`)
`ng generate service <name>`	Creates a new service. (`ng g s <name>`)
`ng build`	Compiles the application into an output directory (e.g., `dist/`).
`ng test`	Runs unit tests.
`ng lint`	Runs code quality checks.

Next Steps

With your basic Angular project created and running, you can now explore more advanced Angular concepts:

Creating More Components: Use ng generate component new-component to add more UI elements.
Routing: Define navigation paths between different views using Angular's router.
Services: Create services to share data and logic across components.
Data Binding: Learn how to connect your component's TypeScript logic with its HTML template.
HTTP Client: Fetch data from APIs to create dynamic applications.

By following these steps, you've successfully created and customized your first Angular project, setting the foundation for building robust and interactive web applications.