Your First Angular Application

Creating your first Angular application is a straightforward process with the help of the Angular CLI (Command Line Interface). This tutorial will guide you through the steps to set up your first Angular project, build a basic application, and run it locally.

Step 1: Install Angular CLI

First, ensure you have Node.js and npm installed on your machine. Then, open your terminal or command prompt and install Angular CLI globally using the following command:

npm install -g @angular/cli

Step 2: Create a New Angular Project

With Angular CLI installed, you can create a new Angular project by running the following command:

ng new my-first-angular-app

Replace my-first-angular-app with your desired project name. Angular CLI will prompt you to select some configuration options. Follow the prompts and choose your preferences.

Step 3: Navigate to Your Project Directory

After creating the project, navigate to the project directory using the following command:

cd my-first-angular-app

Step 4: Serve the Application

To run your Angular application locally, use the following command:

ng serve

Angular CLI will build the application and start a development server. By default, the application will be accessible at http://localhost:4200. Open this URL in your web browser to see your running Angular application.

Step 5: Open the Project in Your Code Editor

Open your project directory in your preferred code editor. For example, if you are using Visual Studio Code, you can open the project using the following command:

code .

Step 6: Modify the App Component

Let's make a simple change to the default app component. Open the src/app/app.component.html file and modify it to display a custom message:

<h1>Welcome to My First Angular Application!</h1>

Save the file, and Angular's live-reload feature will automatically update the application in the browser to reflect the changes.

Step 7: Add a New Component

Next, let's add a new component to the application. Run the following command to generate a new component called hello-world:

ng generate component hello-world

This command creates a new component with the necessary files and updates the AppModule to include the new component.

Step 8: Use the New Component

To use the new component, open the src/app/app.component.html file and add the following line to include the HelloWorld component:

<app-hello-world></app-hello-world>

Open the src/app/hello-world/hello-world.component.html file and modify it to display a custom message:

<p>Hello, Angular!</p>

Conclusion

By following these steps, you have successfully created your first Angular application, added a new component, and displayed custom messages. Angular's powerful CLI and modular architecture make it easy to get started and build robust applications. Happy coding!