Angular

Understanding Angular

Angular is a platform for building web applications. It provides a way to build apps for any deployment target by reusing existing code. Using HTML as the template language, Angular 8 offers developers an application framework that is robust, efficient, and maintainable.

Setting Up the Development Environment

Angular requires a development environment with Node.js and npm (Node Package Manager) installed. Additionally, the Angular CLI (Command Line Interface) tool is used for creating projects, generating application and library code, and performing various development tasks.

// Installation of Angular CLI
npm install -g @angular/cli

// Creating a new Angular project
ng new my-app

Your First Angular App

Once the environment is set up, you can create and run a simple 'Hello, World!' Angular app.

// Navigate into the project directory
// Start the server
ng serve

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

@Component({
  selector: 'app-root',
  template: '<h1>Hello, World!</h1>',
})
export class AppComponent {}

Angular Components

Components are the building blocks of any Angular application. A component controls a patch of screen called a view. You define a component's application logic inside a class, which interacts with the view through an API of properties and methods.

@Component({
  selector: 'app-example',
  template: '<p>Example works!</p>',
})
export class ExampleComponent {}

Angular Modules

Angular Modules (or NgModules) are containers for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. Every Angular application has at least one module, the root module, conventionally named AppModule.

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

Services

In Angular, a service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well. Angular distinguishes components from services to increase modularity and reusability.

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

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor() { }

  getData() {
    // fetch or calculate data
  }
}

Dependency Injection

Dependency injection (DI), a core concept of Angular, is a design pattern in which a class requests dependencies from external sources rather than creating them. Angular's DI framework provides dependencies to a class upon instantiation.

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  data: any;

  constructor(private dataService: DataService) {
    this.data = this.dataService.getData();
  }

}

Structural Directives

Structural directives alter layout by adding, removing, and replacing elements in the DOM. The most common structural directives are *ngIf and *ngFor.

<div *ngIf='isLoading'>Loading data...</div>
<div *ngFor='let item of items'>{{ item }}</div>

Attribute Directives

Attribute directives alter the appearance or behavior of an existing element. In templates, they look like regular HTML attributes, hence the name.

<input [(ngModel)]='name'>
<p [style.color]="'blue'">Blue text</p>

Setting Up Routes

Angular Router is a powerful JavaScript Router built and maintained by the Angular core team that can be used to build Single Page Applications (SPAs). It provides capabilities to navigate to different parts of an application when a user enters a URL into a browser or clicks on the UI of an application.

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

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];

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

Navigation

To navigate from one page to another, you can use methods provided by the Router service like navigate() and navigateByUrl(). You can also use the RouterLink directive in your templates to link to other parts of your application.

<a routerLink="/home">Home</a>

Template-Driven Forms

Angular provides two types of forms: template-driven and reactive. Template-driven forms are simple to use but less flexible compared to reactive forms.

<form #f="ngForm" (ngSubmit)="onSubmit(f)">
  <input name="name" ngModel>
  <button type="submit">Submit</button>
</form>

Reactive Forms

Reactive forms are more robust: they're more scalable, reusable, and testable. If forms are a key part of your application, or you're already using reactive patterns for building your application, use reactive forms.

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-reactive-forms-example',
  templateUrl: './reactive-forms-example.component.html',
  styleUrls: ['./reactive-forms-example.component.css']
})
export class ReactiveFormsExampleComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });

  onSubmit() {
    console.log(this.profileForm.value);
  }
}