Angular Tutorial

Welcome to the Angular Tutorial section! This guide will help you get started with Angular, a popular JavaScript framework for building dynamic web applications.

Overview

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It is maintained by Google and is widely used in the industry due to its robustness and scalability.

Features

• Declarative UI: Build UIs with a component-based architecture.
• Two-Way Data Binding: Simplify DOM manipulation.
• Dependency Injection: Manage dependencies efficiently.
• Modular Architecture: Build applications in a structured and maintainable way.

Getting Started

Before you start, make sure you have Node.js and npm installed on your machine. You can download and install Node.js from here.

Creating a New Angular Project

To create a new Angular project, open your terminal and run the following command:

ng new my-angular-app

This will create a new directory with all the necessary files for a basic Angular application. Navigate into the directory:

cd my-angular-app

Running the Application

To start the development server, run the following command:

ng serve

This will start the server and open a default browser window with your Angular application. The development server listens on port 4200.

Components

Angular applications are composed of components. A component is a reusable and self-contained unit of code that represents a part of the UI.

Creating a Component

To create a new component, use the following command:

ng generate component my-component

This will generate a new component file with the necessary files in the src/app directory.

Using a Component

To use a component in your application, import it in the module and add it to the app.component.html file.

<!-- app.component.html -->
<my-component></my-component>

Directives

Directives are a way to extend HTML with new attributes. They can be used to add behavior to elements or to modify their appearance.

Creating a Directive

To create a new directive, use the following command:

ng generate directive my-directive

This will generate a new directive file with the necessary files in the src/app directory.

Using a Directive

To use a directive in your HTML, add it as an attribute to an element.

<!-- Example usage of my-directive -->
<div my-directive></div>

Routing

Angular provides a powerful routing system to navigate between different components.

Setting Up Routing

To set up routing, define routes in your application module and use the <router-outlet> directive to render the appropriate component.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { MyComponent } from './my-component/my-component.component';

const routes: Routes = [
  { path: '', component: AppComponent },
  { path: 'my-component', component: MyComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    MyComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Using Routing

To navigate to a specific route, use the <a> tag with the routerLink attribute.

<!-- Example usage of routerLink -->
<a routerLink="/my-component">My Component</a>

Conclusion

This tutorial provided a basic overview of Angular. For more in-depth learning, check out our Angular Documentation or the official Angular website.