Angular Tutorial

Welcome to the Angular Tutorial! Angular is a popular JavaScript framework for building dynamic web applications. In this guide, you'll learn the basics of Angular, from setting up your development environment to creating a full-fledged application.

Getting Started

Before you begin, make sure you have Node.js and npm installed. You can download and install Node.js from here.

Once you have Node.js installed, you can install Angular CLI globally using npm:

npm install -g @angular/cli

Creating a New Angular Project

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

ng new my-angular-project

This will create a new directory called my-angular-project with all the necessary files and folders.

Understanding Angular Components

Angular applications are built using components. A component is a self-contained, reusable part of an application. Each component has its own template, styles, and logic.

To create a new component, navigate to your project directory and run:

ng generate component my-component

This will generate a new component called my-component with a template, styles, and a TypeScript file.

Working with Templates

Angular templates are written in HTML and are used to define the structure and content of your components. You can use Angular directives, such as ngFor, ngIf, and ngModel, to add interactivity to your templates.

Here's an example of a simple Angular component template:

<div>
  <h1>Welcome to Angular!</h1>
  <input [(ngModel)]="name" placeholder="Enter your name">
  <p>Hello, {{ name }}!</p>
</div>

Styling Your Components

Angular components can be styled using CSS. You can create a separate CSS file for each component and import it into your component file.

For example, create a file called my-component.component.css in the src/app/my-component directory and add the following styles:

h1 {
  color: #333;
}

p {
  color: #666;
}

Then, import the CSS file in your component file:

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  name = '';
}

Routing

Angular provides a powerful routing system that allows you to navigate between different components. To set up routing, you need to create a routing module and define your routes.

Create a new file called app-routing.module.ts in the src/app directory and add the following code:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Then, import and use the AppRoutingModule in your app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

Now, you can navigate between the home and about components using the following URLs:

• Home: http://localhost:4200/
• About: http://localhost:4200/about

Conclusion

Congratulations! You've just learned the basics of Angular. In this tutorial, you've set up your development environment, created a new Angular project, and learned how to work with components, templates, and styling. You've also set up routing to navigate between different components.

For more information and advanced topics, please visit our Angular documentation.