Primeros pasos con Angular 18 [2024]

Introduction

This tutorial will guide you through the initial steps of getting started with Angular 18, one of the most popular frameworks for web frontend development. By following these steps, you will set up your development environment and create a basic Angular application.

Step 1: Install Node.js and Angular CLI

To start working with Angular, you need to have Node.js and the Angular Command Line Interface (CLI) installed.

1. Download Node.js

   • Visit the Node.js official website.
   • Download the LTS version for your operating system.
   • Follow the installation instructions.

2. Install Angular CLI

   • Open your terminal or command prompt.
   • Run the following command to install Angular CLI globally:

     npm install -g @angular/cli
     

Step 2: Create a New Angular Project

Now that you have Angular CLI installed, you can create a new project.

1. Open your terminal.

2. Run the following command:

   ng new my-angular-app
   

   • Replace my-angular-app with your desired project name.
   • You will be prompted to choose whether to add routing. Select "Yes" or "No" based on your project needs.
   • Choose a stylesheet format (CSS, SCSS, etc.) when prompted.

3. Navigate to your project folder:

   cd my-angular-app
   

Step 3: Serve the Application

To see your new Angular application in action, you need to serve it locally.

1. Run the following command in your project directory:

   ng serve
   

   • This command compiles your application and starts a local web server.

2. Open a web browser and navigate to:

   http://localhost:4200
   

   • You should see your Angular application running.

Step 4: Understand Angular Structure

Familiarize yourself with the basic structure of an Angular application.

• src/app: This folder contains your application components, services, and modules.
• app.module.ts: The root module that bootstraps your application.
• app.component.ts: The main component that controls the application interface.
• styles.css: Global styles for your application.

Step 5: Create Your First Component

Creating components is essential for building Angular applications.

1. Generate a new component using Angular CLI:

   ng generate component my-component
   

   • Replace my-component with your preferred component name.

2. Modify the newly created component:

   • Open src/app/my-component/my-component.component.ts.
   • Update the title property in the component class.
   • Open the corresponding HTML file src/app/my-component/my-component.component.html and add some content.

3. Include your component in the main application:

   • Open src/app/app.component.html and add the selector of your new component:

     <app-my-component></app-my-component>
     

Conclusion

You have successfully set up Angular 18 and created your first component. Key takeaways include installing Node.js and Angular CLI, generating a new Angular project, serving the application, and understanding the basic structure of Angular.

Next steps may include exploring more Angular features, such as services, routing, and state management, or diving deeper into component development. Consider visiting the Angular documentation for further learning and resources. Happy coding!