The Project | About Us | Contribute | Donations | License

HOME

Introduction to Angular

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript and provides a set of tools and libraries to help you build scalable web applications.

Key Features of Angular

Component-Based Architecture: Angular applications are built using components, which are the building blocks of the UI.
Two-Way Data Binding: Synchronizes the data between the model and the view.
Dependency Injection: A design pattern used to implement IoC (Inversion of Control), making the code more modular and easier to test.
Directives: Special markers in the DOM that tell Angular to do something to a DOM element (e.g., ngIf, ngFor).
Services and Dependency Injection: Services are used to share data and functionality across components.

Setting Up Angular Environment

Prerequisites

Node.js: Ensure you have Node.js installed on your machine.
npm: Node Package Manager, which comes with Node.js.

Installing Angular CLI

Angular CLI (Command Line Interface) is a tool to initialize, develop, scaffold, and maintain Angular applications.

npm install -g @angular/cli

Creating a New Angular Project

Use Angular CLI to create a new project.

ng new my-angular-app
cd my-angular-app
ng serve

Navigate to http://localhost:4200/ in your browser to see your new Angular application running.

Angular Project Structure

Here's a brief overview of the Angular project structure:

src/app: Contains the main application code.
src/assets: Contains static assets like images, styles, etc.
src/environments: Contains environment-specific configurations.
angular.json: Configuration file for Angular CLI.
package.json: Lists the project's dependencies and scripts.

Angular Components

Creating a Component

You can create a new component using Angular CLI:

ng generate component my-component

Component Structure

A component in Angular consists of:

TypeScript File (.ts): Contains the component logic.
HTML File (.html): Contains the template/view.
CSS File (.css): Contains the styles for the component.
Spec File (.spec.ts): Contains unit tests for the component.

Example Component

Let's create a simple component:

// src/app/my-component/my-component.component.ts
import { Component } from '@angular/core';

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

<!-- src/app/my-component/my-component.component.html -->
<h1>{{ title }}</h1>

Using the Component

To use the component, you need to add its selector in the template of another component, typically app.component.html:

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

Data Binding

Interpolation

Interpolation allows you to embed expressions in the template:

<p>{{ title }}</p>

Property Binding

Property binding allows you to bind the value of a property to an expression:

<input [value]="title">

Event Binding

Event binding allows you to listen to events and execute methods:

<button (click)="onClick()">Click me</button>

Two-Way Data Binding

Two-way data binding combines property and event binding using ngModel:

<input [(ngModel)]="title">

Directives

Structural Directives

ngIf: Conditionally includes a template based on the value of an expression.

<p *ngIf="isVisible">This is visible</p>

ngFor: Repeats a template for each item in a list.

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

Attribute Directives

ngClass: Adds or removes CSS classes.

<p [ngClass]="{'active': isActive}">This is a paragraph.</p>

ngStyle: Adds or removes inline styles.

<p [ngStyle]="{'color': color}">This is a paragraph.</p>

Services and Dependency Injection

Creating a Service

You can create a new service using Angular CLI:

ng generate service my-service

Using a Service

Inject the service into a component:

// src/app/my-component/my-component.component.ts
import { Component, OnInit } from '@angular/core';
import { MyService } from '../my-service.service';

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

  constructor(private myService: MyService) {}

  ngOnInit(): void {
    this.data = this.myService.getData();
  }
}

Practical Exercise

Exercise: Create a Simple Angular Application

Create a new Angular project using Angular CLI.
Generate a new component called greeting.
Add a property called message in the greeting component and set its value to "Welcome to Angular!".
Display the message in the greeting component template using interpolation.
Use the greeting component in the app.component.html.

Solution

Create a new Angular project:

ng new my-angular-app
cd my-angular-app
ng serve

Generate a new component:

ng generate component greeting

Add a property in the greeting component:

// src/app/greeting/greeting.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  templateUrl: './greeting.component.html',
  styleUrls: ['./greeting.component.css']
})
export class GreetingComponent {
  message = 'Welcome to Angular!';
}

Display the message in the template:

<!-- src/app/greeting/greeting.component.html -->
<p>{{ message }}</p>

Use the greeting component in app.component.html:

<!-- src/app/app.component.html -->
<app-greeting></app-greeting>

Conclusion

In this section, we covered the basics of Angular, including setting up the environment, creating components, data binding, using directives, and services. These fundamentals will help you build more complex and scalable Angular applications. In the next module, we will dive deeper into state management with Redux, which is crucial for managing the state of large applications.

Angular Basics

Introduction to Angular

Key Features of Angular

Setting Up Angular Environment

Prerequisites

Installing Angular CLI

Creating a New Angular Project

Angular Project Structure

Angular Components

Creating a Component

Component Structure

Example Component

Using the Component

Data Binding

Interpolation

Property Binding

Event Binding

Two-Way Data Binding

Directives

Structural Directives

Attribute Directives

Services and Dependency Injection

Creating a Service

Using a Service

Practical Exercise

Exercise: Create a Simple Angular Application

Solution

Conclusion

JavaScript: From Beginner to Advanced

Module 1: Introduction to JavaScript

Module 2: Control Structures

Module 3: Functions

Module 4: Objects and Arrays

Module 5: Advanced Objects and Functions

Module 6: The Document Object Model (DOM)

Module 7: Browser APIs and Advanced Topics

Module 8: Testing and Debugging

Module 9: Performance and Optimization

Module 10: JavaScript Frameworks and Libraries

Module 11: Final Project