Angular 15 First App

 Here's how you can set up a new Angular project:

Install Node.js and Angular CLI

First, you need to install Node.js and Angular CLI on your machine. If you haven't installed them yet, follow these steps:

• Go to the Node.js website and download the latest version of Node.js.
• After installing Node.js, open a command prompt or terminal window and run the following command to install Angular CLI:

npm install -g @angular/cli

Create a new Angular project

Once you have Angular CLI installed, you can use it to create a new Angular project. Open a command prompt or terminal window, navigate to the directory where you want to create your project, and run the following command:

ng new my-angular-app

When you will run the above command after that it will ask "Would you like to add Angular Routing?" You can choose according to your need but at this time just enter N.

After that just select Style then press Enter

After that it will setup the project and download all required packages and file automatically. It will take few minutes depends on the speed of your Internet and System.

This will create a new Angular project in a directory called "my-angular-app". You will be prompted to answer a few questions about the project, such as whether you want to use routing or CSS preprocessor, and so on.

Run the Project

After creating the project, navigate to the project directory by running the following command:

cd my-angular-app

To run the project, run the following command:

ng serve

This will start a development server and open your project in a web browser. You should see the default Angular app running.

Understanding the Project Structure

Let's take a look at the structure of an Angular project. When you create a new project, Angular CLI generates the following files and directories:

my-angular-app/ ├── e2e/ ├── node_modules/ ├── src/ │ ├── app/ │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ └── app.module.ts │ ├── assets/ │ ├── environments/ │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── styles.css │ ├── test.ts │ └── tsconfig.app.json ├── .angular.json ├── .editorconfig ├── .gitignore ├── angular.json ├── package-lock.json ├── package.json ├── README.md ├── tsconfig.json └── tslint.json

Here is a short overview of the important files and directories:

• e2e/: This directory contains end-to-end tests for your application.
• node_modules/: This directory contains all the dependencies of your application.
• src/: This directory contains the source code of your application.
• src/app/: This directory contains the main application module and component.
• src/assets/: This directory contains static assets such as images, fonts, and so on.
• src/environments/: This directory contains environment-specific configuration files.
• src/index.html: This is the main HTML file for your application.
• src/main.ts: This is the main entry point for your application.
• src/styles.css: This file contains the global styles for your application.
• tsconfig.json: This file contains TypeScript configuration options for your application.
• tslint.json: This file contains rules for the TypeScript linter.

Update the App Component

Let's update the main app component to display some text on the screen. 

• Open the file src/app/app.component.html.
• Replace the existing code with the following:

<div> <h1>Welcome to my Angular app!</h1> <p>This is my first Angular app.</p> </div>

• Save the file.

This will display a welcome message on the screen when you run the app. Now let's make sure it is displayed correctly.

Verify the App

• Go to your terminal or command prompt.
• Navigate to your project directory if you are not already in it.
• Run the following command:

ng serve

• Open your web browser and go to http://localhost:4200.
• You should see the welcome message displayed on the screen.

Congratulations, you have just created and run your first Angular app! You can now start exploring the framework and building more complex applications.