Angular Tutorial

Angular (commonly referred to as “Angular 2+” or “Angular 2”) is a TypeScript-based open-source front-end web framework led by the Angular Team at Google and by a community of individuals and corporations to address all of the parts of the developer’s workflow while building complex web applications. Angular is a complete rewrite from the same team that built AngularJS. ¹

The framework consists of several libraries, some of them core (@angular/core for example) and some optional (@angular/animations).

You write Angular applications by composing HTML templates with Angularized markup, writing component classes to manage those templates, adding application logic in services, and boxing components and services in modules.

Then you launch the app by bootstrapping the root module. Angular takes over, presenting your application content in a browser and responding to user interactions according to the instructions you’ve provided.

Arguably, the most fundamental part of developing Angular applications are the components. A component is the combination of an HTML template and a component class that controls a portion of the screen. Here is an example of a component that displays a simple string:

src/app/app.component.ts

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

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

Every component begins with a @Component decorator function that takes a metadata object. The metadata object describes how the HTML template and component class work together.

The selector property tells Angular to display the component inside a custom <my-app> tag in the index.html file.

index.html (inside the body tag)

<my-app>Loading AppComponent content here ...</my-app>

The template property defines a message inside a <h1> header. The message starts with “Hello” and ends with {{name}}, which is an Angular interpolation binding expression. At runtime, Angular replaces {{name}} with the value of the component’s name property. Interpolation binding is one of many Angular features you’ll discover in this documentation. In the example, change the component class’s name property from 'Angular' to 'World' and see what happens.

This example is written in TypeScript, a superset of JavaScript. Angular uses TypeScript because its types make it easy to support developer productivity with tooling. Additionally, almost all support is for TypeScript and so using plain JavaScript to write your application will be difficult. Writing Angular code in JavaScript is possible, however; this guide explains how.

More information on the architecture of Angular can be found here