Introduction

Welcome to the world of Angular! Angular is a platform for building mobile and desktop web applications using TypeScript/JavaScript and other languages. It provides a holistic framework for you to develop single-page applications that are dynamic, scalable, and maintainable.

This tutorial is geared towards beginners who wish to step into the realm of developing a basic Angular application. By the end of this guide, you will know how to initiate an Angular project, understand its basic components, and create your first Angular application.

Prerequisites

To follow along, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you should have Node.js and npm (Node Package Manager) installed on your machine. You can verify this by running node -v and npm -v in your command line interface. If you haven’t installed them yet, head over to Node.js official website and download the latest stable version.

Setting Up Your Development Environment

Before diving into application development, you need to set up your workspace. Below are steps to get started:

Installing Angular CLI

The Angular Command Line Interface (CLI) is a powerful tool that allows you to streamline your development workflow. To install Angular CLI, open your terminal or command line interface and type the following command:

npm install -g @angular/cli

The above command will globally install Angular CLI on your machine.

Creating a New Angular Project

Once the CLI is installed, you can set up a new Angular project. Navigate to the directory where you want your project to reside and type the following command:

ng new my-first-angular-app

This initiates the creation of a new Angular project named my-first-angular-app. You’ll be prompted to choose options about routing and style sheets, make your selections, and let the CLI configure the project.

Serving Your Application

After creating your project, the CLI will set up a basic Angular application structure for you. Navigate into your project directory:

cd my-first-angular-app

You can serve the application using:

ng serve

This command will build the application and start a local server at http://localhost:4200. Open your web browser and go to this URL. You should see the default Angular welcome page.

Understanding Angular Project Structure

Let’s take a look at the project structure generated by Angular CLI:

• e2e/: Contains end-to-end tests.
• node_modules/: Contains the npm packages we’re using.
• src/: Contains the application code.
• angular.json: Configuration for Angular CLI.
• package.json: Handles npm package dependencies.

The src/ directory is where you will find the core files for your application:

• app/: The application root directory.
• assets/: Stores images and other assets.
• environments/: Environment-specific settings.
• index.html: The main HTML file.
• main.ts: The entry point of the application.
• styles.css: Global styles.

Building Your First Component

Angular applications are composed of components. A component consists of three main elements: an HTML template, a CSS style, and a TypeScript class.

Generating a Component

Using Angular CLI, you can generate a new component easily. In the terminal, run the following command:

ng generate component hello-world

This command will create a new directory hello-world/ in src/app/, containing the following files:

• hello-world.component.ts – The TypeScript file defining the component class.
• hello-world.component.html – The template file.
• hello-world.component.css – The CSS styles specific to the component.
• hello-world.component.spec.ts – The test file.

Editing the Hello World Component

Open the hello-world.component.html file and add a simple message:

<h1>Hello World!</h1>

Next, modify app.component.html to include the hello-world component:

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

Save your changes and check your application in the browser. You should see the “Hello World!” heading displayed.

Adding Interactivity

Components can hold data and respond to user actions. Let’s add some interactivity by creating a button that changes a message when clicked.

Updating Component Class

Edit the hello-world.component.ts file to include a message and a method to change it:

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

  selector: 'app-hello-world',

  templateUrl: './hello-world.component.html',

  styleUrls: ['./hello-world.component.css']

})

export class HelloWorldComponent {

  message: string = 'Hello World!';
changeMessage() {

    this.message = 'You clicked the button!';

  }

}

        

Updating Template

Modify the hello-world.component.html to include a button and display the message:

<h1>{{ message }}</h1>

<button (click)="changeMessage()">Click me</button>

        

With these changes, when you click the button, the message will update!

Styling Your Application

Styling in Angular can be handled through component-specific styles or global styles. Let’s add some basic styling.

Adding Component Styles

Edit the hello-world.component.css to style the button and heading:

h1 {

  color: #1976d2;

}
button {

  background-color: #1976d2;

  color: white;

  border: none;

  padding: 0.5em 1em;

  cursor: pointer;

  margin-top: 10px;

}
button:hover {

  background-color: #155a9e;

}

        

Conclusion

Congratulations! You’ve successfully created your first Angular application, built a component, and added interactivity and styling to it. Angular is a vast framework with many capabilities, and this tutorial is just the beginning of your journey. As you advance, you’ll discover Angular’s powerful features such as routing, services, and state management through RxJS.

Continue exploring and practicing by adding new components, creating services for shared data, and experimenting with Angular’s extensive CLI commands. Happy coding!