Creating Angular Project 🎯

Welcome to our Angular Tutorial! In this comprehensive guide, we'll walk you through the process of creating an Angular project step-by-step. By the end, you'll have a solid understanding of Angular and be ready to build your own applications. 📝

What is Angular?

Angular is a powerful, open-source framework for building dynamic web applications. It was developed by Google and allows developers to create single-page applications (SPAs) efficiently.

Why Angular?

Angular offers numerous benefits, such as:

Two-Way Data Binding: Angular automatically synchronizes data between the model and view, simplifying the development process.
Components: Angular uses a component-based architecture, making it easy to manage complex applications and reuse code.
Dependency Injection: Angular's dependency injection system ensures that your code is loosely coupled and easier to test.

Prerequisites

Before diving into creating an Angular project, ensure you have Node.js and npm (Node Package Manager) installed on your system. You can download them from the official Node.js website.

Creating an Angular Project

Now that you're all set, let's get started!

Install Angular CLI: Open your terminal or command prompt and run the following command to install Angular CLI globally:

npm install -g @angular/cli

Create a new Angular project: Navigate to the directory where you want to create your project and run the following command:

ng new my-app

Replace my-app with the name of your application.

Navigate to the project directory: Use the following command to navigate to your newly created project directory:

cd my-app

Start the development server: To start the development server, run the following command:

ng serve

Now, open your browser and navigate to http://localhost:4200/. You should see your Angular application running! 🎉

Code Examples

Here are two complete, working examples to help you get started:

Example 1: Hello World

typescript

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

@Component({
  selector: 'app-root',
  template: `<h1>Hello World!</h1>`
})
export class AppComponent {
}

Example 2: Counter Component

typescript

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <button (click)="increment()">Increment</button>
    <p>Count: {{ counter }}</p>
  `
})
export class CounterComponent {
  @Input() initialCount: number;
  counter: number = this.initialCount || 0;

  @Output() countChange = new EventEmitter();

  increment() {
    this.counter++;
    this.countChange.emit(this.counter);
  }
}

Quiz

That's it for this lesson! In the next lesson, we'll dive deeper into Angular's core concepts and build a more complex application together.

Stay patient, and happy coding! 🚀