Lesson: Understanding Angular

Introduction to Angular Framework

Angular is a robust platform and framework for building single-page client applications using HTML and TypeScript. Developed and maintained by Google, it was first released in 2010 as AngularJS, with Angular 2+ being a complete rewrite released in 2016. Angular integrates a range of tools and best practices to solve development challenges, allowing developers to build efficient and scalable web applications.

Key Components and Techniques in Angular

Angular is known for its comprehensive approach to application development, offering a rich set of features. Here’s a quick overview of the basic components and techniques used in Angular:

1. Modules: Angular organizes code into modules, which help manage pieces of the application in a cohesive way. The root module, typically called AppModule, bootstraps the application.
2. Components: These are fundamental building blocks in any Angular application. A component controls a patch of screen called a view and is defined by a TypeScript class with HTML templates and optional styles.
3. Templates: Written in HTML, templates form the view for Angular components. They use Angular directives to enrich the application’s HTML.
4. Directives: These are instructions for the Angular rendering engine. They can change the appearance or behavior of DOM elements. Common examples include ngModel, ngFor, and ngIf.
5. Services and Dependency Injection: Angular uses dependency injection (DI) to provide new components with the services they require. Services are classes that are defined with a clear purpose and functionality, separate from views.
6. Routing: Angular’s Router enables navigation from one view to the next as users perform application tasks. It is based on browser URL changes.
7. Data Binding: This allows for automatic synchronization of data between the model and the view components. Angular supports two-way binding, event binding, and property binding.
8. Pipes: These are simple functions used in template expressions to accept an input value and return a transformed value. Common pipes include date and currency.
9. Observables and RxJS: Angular makes use of observables as an interface to handle a variety of common asynchronous operations. RxJS provides utilities for working with observables.
10. Forms: Angular provides two approaches for managing forms: template-driven and reactive forms, each with their own advantages.

Examples with Source Code

Let’s look at some basic examples to understand these concepts better.

Example 1: Angular Component

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

@Component({
  selector: 'app-welcome',
  template: `<h1>Hello, {{name}}</h1>`
})
export class WelcomeComponent {
  name: string = 'Angular';
}

Example 2: Angular Service and Dependency Injection

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

@Injectable({
  providedIn: 'root',
})
export class ExampleService {
  getData() {
    return 'Angular Service Data';
  }
}

Example 3: Angular Routing

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { WelcomeComponent } from './welcome.component';

const routes: Routes = [
  { path: 'welcome', component: WelcomeComponent }
];

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

Learning

https://angular.io/guide/example-apps-list

https://busypeoples.github.io/post/thinking-in-components-angular-js