Creating Your First Angular Application: A Step-by-Step Guide

Now that your Angular development environment is set up, it’s time to create your first Angular application. In this guide, we’ll walk you through the process of building a simple Angular app from scratch. By the end of this tutorial, you’ll have a working Angular application and a solid understanding of the basic concepts.

Step 1: Create a New Angular Project

To create a new Angular project, use the Angular CLI. Open your terminal or command prompt and run the following command:

ng new my-first-app

The CLI will prompt you to configure the project. You can choose options like:

• Routing: Whether to add Angular routing (select Yes for this example).
• Stylesheet Format: Choose between CSS, SCSS, SASS, etc. (default is CSS).

Once the setup is complete, navigate to the project directory:

cd my-first-app

Step 2: Serve the Application

To view your application in the browser, serve it using the Angular CLI:

ng serve --open

The --open flag automatically opens the application in your default browser. By default, the application will be available at http://localhost:4200.

Step 3: Understand the Project Structure

Before making changes, let’s understand the basic structure of an Angular project:

• src/: Contains the application code.
• src/app/: Contains the main application components, modules, and services.
• src/assets/: Stores static assets like images and fonts.
• src/environments/: Contains environment-specific configuration files.
• angular.json: Configuration file for Angular CLI.
• package.json: Lists project dependencies and scripts.

Step 4: Modify the App Component

The default Angular application comes with a basic AppComponent. Let’s modify it to display a custom message.

1. Open src/app/app.component.ts and update the title property:

export class AppComponent {
  title = 'Welcome to My First Angular App!';
}

2. Open src/app/app.component.html and replace the content with:

<h1>{{ title }}</h1>
<p>This is my first Angular application.</p>

Save the changes, and the browser will automatically reload to display the updated content.

Step 5: Add a New Component

Components are the building blocks of Angular applications. Let’s create a new component called greeting.

1. Run the following command in the terminal:

ng generate component greeting

This creates a new folder src/app/greeting/ with four files: greeting.component.ts, greeting.component.html, greeting.component.css, and greeting.component.spec.ts.

2. Open src/app/greeting/greeting.component.ts and add a property:

export class GreetingComponent {
  message = 'Hello from the Greeting Component!';
}

3. Open src/app/greeting/greeting.component.html and add:

<p>{{ message }}</p>

4. Include the GreetingComponent in the AppComponent template. Open src/app/app.component.html and add:

<app-greeting></app-greeting>

Save the changes, and the browser will display the greeting message.

Step 6: Add Styling

You can add custom styles to your components using CSS or SCSS. For example, open src/app/greeting/greeting.component.css and add:

p {
  color: blue;
  font-size: 1.2em;
}

This will style the greeting message with blue text and a larger font size.

Step 7: Run the Application

If the application is not already running, use the following command to serve it:

ng serve --open

Your first Angular application is now live!

Secrets and Hidden Facts

• Angular CLI Shortcuts: Use ng g c instead of ng generate component for faster component creation.
• Live Reload: Angular automatically reloads the application when you save changes, thanks to its built-in development server.
• Production Build: Use ng build --prod to create an optimized production build.

Conclusion

Congratulations! You’ve successfully created your first Angular application. You’ve learned how to set up a project, modify components, add new components, and apply styles. This is just the beginning—Angular offers a wide range of features to explore as you continue your journey. Keep experimenting and building to master this powerful framework.