1. Architecture

Angular is a framework and platform for building Single Page Applications in HTML and JavaScript or Dart, TypeScript that transpiles to JavaScript. Note: Chrome Browsers, Chromium and NodeJS, running on the V8 JavaScript engine, are on ES7/8 standards.

Google is on the newest standards in all domains. Making Humanity and Open Source progress. We need more Google Software and Open Source Software in all organizations worldwide. This will come. All in the Google Cloud Platform running on Linux Servers.

The framework consists of several libraries. some of the core, some of them optional. Angular is HTML6, HTML7 standards today.

We 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.

We launch the app by bootstrapping the root module. Angular takes over, presenting our application content in a browser, like Chromium, and responding to user interactions according to the instructions we have provided.

Let s have a look at the big picture:

Modules

Angular apps are modular and Angular has its own modularity system called NgModules. NgModules are a big deal. Every Angular app has at least one NgModule class, the root module, conventionally called AppModule. While the root module may be the only module in a small application, most apps have many more feature modules, each a cohesive block of code, dedicated to an application domain, a workflow, or a closely related set of capabilities.

An NgModule, whether a root or feature , is a class with an @NgModule decorator. Decorators are functions that modify JavaScript classes. Angular has many decorators that attach metadata to classes so that it knows what those classes mean and how they should work.

Here's a simple root module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { LoggerService } from './logger.service';

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

Launch an application by bootstrapping its root module. Bootstrap root module in main.ts like this:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'

platformBrowserDynamic().bootstrapModule(AppModule);

NgModule versus JavaScript Modules:

JavaScript Module System (import && exports):

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

export class AppModule { }

Angular Libraries

Angular ships as a collection of JavaScript modules. We can think of them as library modules. Each Angular library name begins with the @angular prefix. We can install them with the npm package manager and import parts of them with JavaScript imports.

For example import Angular's Component decorator from @angular/core library like this:

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

Import NgModules from Angular libraries using JavaScript import statements:

import { BrowserModule } from '@angular/platform-browser';

To access the material within the module add it to the @NgModule metadata imports like this:

imports: [ BrowserModule ],

In this way we are using both the Angular and JavaScript Module system.

Components

A Component controls a patch of a screen called a view. We define a component's application logic inside a JavaScript class. The class interacts with the view through an API of properties and methods.

The heroes property returns an array of heroes that it acquires from a service. This component also has a select method, when the user clicks on it, the selectedHero property is set to that hero. ngOnInit is a lifecycle hook to perform initialization logic for the component.

export class HeroListComponent implements OnInit {
        heroes: Hero[];
        selectedHero: Hero;

        constructor(private heroService: HeroService) { }

        ngOnInit() {
          this.heroes = this.heroService.getHeroes();
        }

        selectHero(hero: Hero) { this.selectedHero = hero; }
}

Templates

We define a component's view with its companion template. A template is a form of HTML that tells Angular how to render the view.

  template: `
          <h2>Hero List</h2>
          <p><i>Pick a hero from the list</i></p>
          <ul>
                <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
                    {{ hero.name }}
                </li>
          </ul>
          <app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>
  `,

We can view Angulars Template Syntax in this view along with HTML elements: *ngFor (click) {{ hero.name }} 
[hero] <app-hero-detail>

<app-hero-detail> is a custom element that represents a new component: HeroDetailComponent. This Component is a child of HeroListComponent.

Metadata

Metadata tells Angular how to process a class.

To tell Angular that HeroListComponent is a Component, attach metadata to the class. Attach metadata by using a decorator. Here is some metadata for HeroListComponent:

@Component({
  selector: 'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers: [ HeroService ]
})
export class HeroListComponent implements OnInit { }

Data binding

...

Architecture