Skip to content

Angular

!angular logo

What is Angular?

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.

Angular is version 2+ of the framework, where-as AngularJs is version 1 of the framework. They have similar ideas (modules, directives, services) but the underlying code and tooling is totally different. AngularJS has been a legacy framework for a while now.

Angular's goal isn't necessarily to build SPA apps, but applications using web technologies.

Facts

  • The successor to AngularJS
  • Developer(s): Google
  • Full-featured and opinionated framework that provides defaults for data fetching, state management, development language, and build toolchain
  • TypeScript as the development language

Features

  • Angular provides top of the line tooling, to the point you can use its tooling to build React and Nodejs applications using the same commands as you would to develop an Angular app. By default it uses webpack under the hood, but is flexible enough to use other build systems such as bazel (Google's builder for most projects). The tooling also supports mono-repo development and library sharing out of the box.
  • Angular is built for scale of apps. Almost every major standout feature was added to support building large complex apps.
  • TypeScript scales better than normal JS
  • Dependency Injection system to better facilitate sharing code and testing
  • Reactive code (rxjs) provides more power to handle more complex use-cases.
  • The module system provides more context to the build system, thus providing stuff like lazy-loading support out of the box
  • Built in or 1st party support for web-workers, service workers, and server-side rendering
  • The entire framework was re-written (from AngularJs) due to AngularJs' issues with scaling, a newer render engine has been written (ivy) and should help improve performance of apps.

Disadvantages of Angular

  • Reactive Programming/rxjs is complex.
  • The framework has a huge API surface.
  • It's more verbose than necessary for most simple use-cases, and is simply overkill most of the time.
  • Angular doesn't provide any out of the box opinionated state management solution. Its easy to build your own, but its not structured like the rest of the approaches that are already picked in the framework.
  • Learning curve can be steep.
  • TypeScript may be a barrier to adoption.
  • Poor start up metrics in benchmarks.

Hello World

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

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: string;
}

Test it out

Try out the online example

You might also be interested in the live example on StackBlitz: https://stackblitz.com/fork/angular-ivy