Metadata

So, if everything is a class, how does Angular know how to interact with it? The answer to that is metadata.

As Figure 1-1 shows, Angular uses metadata that is specified using a TypeScript decorator. We can take an ordinary ES6 class and by applying a decorator to the class, the Angular compiler will know how to convert that class into something the application can use. In most cases, the metadata is used to connect a component class to its template and stylesheets while telling Angular what HTML selector will be used to add it to the Document Object Model (DOM).

Figure 1-1. Angular component metadata.

In the case of an Angular service, our metadata becomes even smaller because we simply need to annotate it so that it is compiled correctly. We accomplish this by using the injectable decorator. The advantage of using metadata is that Angular is able to compile a much more verbose version of the source code behind the scenes. It is possible to do this by hand in ECMAScript 5 (ES5), but the code volume is significantly higher and tedious to work with.

Constructor Assignment

TypeScript allows us to bypass some manual wiring-up of our code through constructor assignment, as demonstrated in Example 1-1. In ES6, if we wanted a parameter to become a local member, we had to create a local variable and assign that parameter to it. Although this is trivial to write and maintain, this pattern is very common and repetitive in nature. By using an access modifier on the constructor parameter, TypeScript will automatically assign that parameter to a local member. The access modifiers supported by TypeScript are public, private, and protected. The private and protected modifiers enable developers to encapsulate data within a class that is not exposed or available for modification outside of the class. This convenience saves us from having to manually create these assignments and adds up to huge time savings over the course of a project life cycle.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { User } from '../../models/user.model';
import { UserService } from '../../services/user.service';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  /** The user to display */
  user: User;
  constructor(
    private readonly activatedRoute: ActivatedRoute,
    private readonly userService: UserService
  ) {}
  ngOnInit() {
    const PARAM_ID = 'id';
    let id: string;
    if (this.activatedRoute.snapshot.paramMap.has(PARAM_ID)) {
      / id = this.activatedRoute.snapshot.paramMap.get(PARAM_ID);
    }
    if (id) { 
      this.user = this.userService.getUserById(id);
    }
  }
}

Object-Oriented Programming

Enterprise developers who are familiar with languages such as Java, Kotlin, and C# are often put off by the lack of structure and the asynchronous nature of JavaScript. Attempts at forcing a classical paradigm onto JavaScript have historically led to code bloat, over-engineering, and, ultimately, brittle code. The latest JavaScript standards have addressed this frustration head on by providing class-based object-oriented language constructs, as illustrated in Example 1-2, that look and feel like real classes, such as Kotlin’s class syntax presented in Example 1-3.

import { Component, OnDestroy, OnInit } from '@angular/core';
import { MatSnackBar } from '@angular/material';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { Notification } from './services/notification.interface';
import { NotificationsService } from './services/notification.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy, OnInit {
  /** The application title */
  title = 'Angular REST App';
  /** Top-level navigation */
  links = [
    { path: '/home', icon: 'home', label: 'Home' },
    { path: '/items', icon: 'list', label: 'Items' },
    { path: '/widgets', icon: 'view_quilt', label: 'Widgets' },
    { path: '/profile', icon: 'face', label: 'Profile' }
  ];
  /** Unsubscribe from observable streams */
  private unsubscribe = new Subject();
  constructor(
    private snackbar: MatSnackBar,
    private notificationService: NotificationsService
  ) {}
  ngOnDestroy() {
    this.unsubscribe.next();
    this.unsubscribe.complete();
  }
  ngOnInit() {
    this.notificationService.notifications$
      .pipe(takeUntil(this.unsubscribe));
      .subscribe(notification => this.showNotification(notification))
  }
  showNotification(notification: Notification) {
    this.snackbar.open(notification.body, 'OK', {
      duration: 3000
    });
  }
}

class MyViewModel : ViewModel() {
  fun launchDataLoad() {
    viewModelScope.launch {
      sortList()
      // Modify UI
    }
  }
  suspend fun sortList() = withContext(Dispatchers.Default) {
    // Heavy work
  }
}

Addressing the topic of inheritance and its challenges is beyond the scope of this discussion, but the organizational capabilities of ES6 are compelling. We are now able to cleanly organize our code into standalone units, expose data as properties, and perform actions with methods. Taking this a step further, TypeScript expands upon what is possible by allowing us to take advantage of additional classical techniques in our applications. Finally, because TypeScript is a superset of ES6, it can be safely transpiled to ES5 and executed in all of the latest browsers.

One of the major benefits of the classic object-oriented approach in ES6 and TypeScript is the ability to hire and utilize existing experienced engineers who are familiar with these patterns but might not be familiar with the Angular framework and associated application programming interfaces (APIs). This is a big win for organizations that might be transitioning away from outdated enterprise solutions that often do not provide a highly functional user experience (UX) and are not delivered via the web.

Although the existing engineering workforce in a large organization might not be familiar with Angular, they have retained large amounts of business logic, the details, and structure of existing applications; thus, they are able to put their knowledge of the organization to work immediately. Hiring the best engineers is without a doubt a valuable business advantage when competing nationally or globally. Whether traditionally learned via a computer science degree, a trade learning program, or a coding bootcamp, software engineers are widely accustomed to object-oriented programming principles.

Interfaces

One of the strongest cases for TypeScript is its ability to communicate intent. This enables the use of interfaces to establish code contracts about how things are supposed to behave within an application. For instance, we can use an interface to establish a contract with a plain old JavaScript object (POJO) to classify it as a specific entity within our domain model. As a result, anything interacting with that object can safely make assumptions about that object because it adheres to the interface. If a component class implements an interface, we are required to honor the contract of that interface, which allows us to safely make assumptions about how it is supposed to work, as illustrated in Example 1-4.

import { Component, OnDestroy, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy, OnInit {
  constructor() {}
  ngOnDestroy() {
    // this method must be implemented
  }
  ngOnInit() {
    // this method must be implemented  
  }
}

By programming to an interface, we are now able to use classic design patterns because we no longer have the obligation of programming to concrete implementations.

Field Assignment

In ES6, local members must be defined in the constructor so that they are available when the class is created. TypeScript affords us the convenience of defining these members outside of the constructor, which is familiar to developers who are already using classic languages such as Java or C#, as shown in Example 1-5.

  ...
  constructor(
    private readonly activatedRoute: ActivatedRoute,
    private readonly userService: UserService
  ) {}
  ngOnInit() {
    const PARAM_ID = 'id';
    let id: string;
    if (this.activatedRoute.snapshot.paramMap.has(PARAM_ID)) {
      id = this.activatedRoute.snapshot.paramMap.get(PARAM_ID);
    }
    if (id) {
      this.user = this.userService.getUserById(id);
    }
  }
}

Composition

Aspect-oriented programming allows us to break a tightly coupled system by providing a class with only the dependencies it requires via dependency injection. Satisfying these dependencies is no longer the responsibility of the class itself; rather, it is delegated up to a higher abstraction. This enables the mechanism responsible for dependency injection to make critical design decisions at runtime depending on the current context of the environment. For instance, depending on the role of a user, the dependency injection system could inject a specific role-based dependency determined by the user’s access level. We can also utilize the power of dependency injection during testing in order to prevent side effects or CPU-intensive calculations.

Mocking

Expanding on this concept of composition, we can also affect how a component is initialized during testing. When we are testing a component, the goal is to test it in isolation, without having to focus on additional factors or side effects in the application. Dependency injection allows us to inject test doubles, or mocks, into our component to stand in for the real thing. This allows us to simplify standing up a component while controlling the environment and the data that it has available to it during testing.

Take note of the line in which the TestBed’s providers are declared in the code sample shown in Example 1-7 from a test written for Angular. The dependency injection framework that Angular ships with enables the developer to override the class that is provided to the constructor function of the class that is instantiated. Using this technique, we can provide a specific mock, or stub, shown in Example 1-8, in place of the real thing.

import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { UserService } from '../../services/user.service';
import { UserServiceMock } from '../../services/user.service.mock';
import { UsersComponent } from './users.component';

describe('UsersComponent', () => {
  let component: UsersComponent;
  let fixture: ComponentFixture<UsersComponent>;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [UsersComponent],
      providers: [{ provide: UserService, useClass: UserServiceMock }]
    }).compileComponents();
  }));
  beforeEach(() => {
    fixture = TestBed.createComponent(UsersComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

import { Observable, of } from 'rxjs';
import { User } from '../models/user.model';
import { UserService } from './user.service';
export class MockUserService extends UserService {
  constructor() {
    super();
  }
  getUserById(id: string): Observable<User> {
    return of({
      firstName: 'Brian',
      lastName: 'Love'
    });
  }
}

The ability to override providers during runtime by using dependency injection in the Angular framework enables developers to exclusively assert the code under test.

Angular is built with testing at the forefront. Built-in stubs and mocks exist for many of the dependencies that developers rely on, including the router and the HTTP client. Further, developers can quickly and easily create mocks, stubs, and spies by using Jasmine and the TestBed provided by Angular. This is critical for writing unit tests that ensure the stability of enterprise applications.