Angular Tutorial: Core Module 🎯

Welcome to the Core Module lesson of our Angular Tutorial! In this comprehensive guide, we'll dive deep into the core concepts of Angular, a powerful open-source framework for building dynamic web applications. By the end of this lesson, you'll have a solid understanding of the core module and be ready to create your own Angular applications. 💡 Pro Tip: This lesson is designed for both beginners and intermediate learners, so don't worry if some concepts are already familiar.

What is the Core Module in Angular? 📝

The Core Module, also known as @angular/core, is the foundation of Angular applications. It provides essential services, directives, and components needed to create a functional web application. In this lesson, we'll explore the key components of the Core Module and how to use them effectively.

Important Types and Classes in the Core Module 📝

To understand the Core Module, it's important to be familiar with several key types and classes:

Component: A class that represents a part of the UI (User Interface) and manages its state.
Directive: A class that extends the functionality of an HTML element.
Service: A class that encapsulates and manages shared business logic.
Injector: A service that manages the lifecycle of services and components in the application.
Dependency Injection: The mechanism used by Angular to provide services to components and other classes.

Let's dive into an example to see these concepts in action! 💡 Pro Tip: We'll create a simple to-do list application to demonstrate the Core Module's functionality.

Creating a To-Do List Application 📝

Here's a step-by-step guide to creating a simple to-do list application using Angular's Core Module:

Step 1: Install Angular CLI 📝

First, you'll need to install the Angular CLI, which simplifies the process of creating and managing Angular applications.

bash

npm install -g @angular/cli

Step 2: Create a new Angular application 📝

Create a new Angular application using the CLI:

bash

ng new todo-app

Step 3: Navigate to the project directory 📝

Change to the project directory:

bash

cd todo-app

Step 4: Generate a new Component 📝

Generate a new component for the to-do list:

bash

ng generate component todo

Step 5: Implement the Todo Component 📝

Open the src/app/todo/todo.component.ts file and replace its content with the following code:

typescript

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

@Component({
  selector: 'app-todo',
  template: `
    <h2>My To-Do List</h2>
    <ul>
      <li *ngFor="let todo of todos">{{ todo }}</li>
    </ul>
    <form (ngSubmit)="addTodo(todo)">
      <input [(ngModel)]="todo" placeholder="Add a new todo" required />
      <button type="submit">Add</button>
    </form>
  `,
})
export class TodoComponent {
  todos: string[] = [];
  todo: string = '';

  addTodo(todo: string) {
    this.todos.push(todo);
    this.todo = '';
  }
}

In this code, we've created a simple TodoComponent that represents the UI for our to-do list. The @Component decorator is used to define the component's metadata, including its selector and template. We've also implemented a method called addTodo that adds new items to the todos array and resets the input field.

Step 6: Update the AppModule 📝

Open the src/app/app.module.ts file and add the TodoComponent to the declarations array:

typescript

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TodoComponent } from './todo/todo.component';

@NgModule({
  declarations: [
    AppComponent,
    TodoComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 7: Run the application 📝

Finally, run the application using the following command:

bash

ng serve

Now, open your browser and navigate to http://localhost:4200 to see the to-do list application in action! ✅ Great Job! You've just created a simple Angular application using the Core Module.

Quiz 🎯

In the next lesson, we'll dive deeper into Angular by exploring directives and services. Until then, keep coding and happy learning! 💡 Pro Tip: Don't forget to practice and experiment with the concepts covered in this lesson to reinforce your understanding.