Angular 2 - Hello World

Introduction

In this tutorial, we will learn how to create a basic "Hello World" application using Angular 2. Angular 2 is a powerful JavaScript framework developed by Google for building web applications. It allows you to build dynamic and interactive applications with ease.

Prerequisites

Before we begin, make sure you have the following software installed on your machine:

• Node.js and npm (Node Package Manager)
• Angular CLI

Setup

Let's start by setting up our Angular 2 project. Follow the steps below:

1. Open your terminal/command prompt and navigate to the desired directory where you want to create the project.

2. Run the following command to create a new Angular project using the Angular CLI:

ng new angular2-hello-world

3. Once the project is created, navigate to the project directory:

cd angular2-hello-world

4. Start the development server by running the following command:

ng serve

5. Open your favorite web browser and navigate to http://localhost:4200. You should see the default Angular application running.

Creating the Hello World Component

To create the "Hello World" component, follow these steps:

1. In your project directory, navigate to the src/app directory:

cd src/app

2. Create a new file called hello-world.component.ts and open it in your favorite code editor.

3. In the hello-world.component.ts file, add the following code:

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

@Component({
  selector: 'app-hello-world',
  template: `
    <h1>Hello World</h1>
    <p>Welcome to Angular 2!</p>
  `
})
export class HelloWorldComponent {}

4. Save the file.

Using the Hello World Component

Now, let's update our main app component to use the newly created "Hello World" component:

1. Open the app.component.ts file in the src/app directory.

2. Update the code as follows:

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

@Component({
  selector: 'app-root',
  template: `
    <h1>Welcome to Angular 2 - Hello World</h1>
    <app-hello-world></app-hello-world>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

3. Save the file.

Final Steps

1. Open the app.module.ts file in the src/app directory.

2. Import the HelloWorldComponent and add it to the declarations array:

import { HelloWorldComponent } from './hello-world.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloWorldComponent
  ],
  // ...
})
export class AppModule {}

3. Save the file.

4. Go back to your terminal/command prompt and make sure your Angular development server is still running. If not, start it again using ng serve from the project directory.

5. Refresh your web browser, and you should now see the "Hello World" message displayed on the page.

Congratulations! You have successfully created a basic "Hello World" application using Angular 2.

Now you can explore Angular 2's features and start building more complex applications. Happy coding!

Note: This tutorial assumes you have a basic understanding of JavaScript and web development concepts. If not, it is recommended to learn those concepts before diving into Angular 2.