angular-intro.md

AngularJS

Introduction

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

• Cross Platform
  • Progressive web apps
  • Native
  • Desktop
• Speed and Performance
  • Code generation
  • Universal
  • Code splitting

Differences between v1 and v2

• Completely rewritten
• Typescript
• Mobile first
• $scope vs zone.js
• No more controllers -- replaced with components
• Syntax changes
• Hierarchical Dependency Injection system

Source

Quick Look

Components

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

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

Every component begins with an @Component decorator function that takes a metadata object

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

Architecture

Eight main building blocks of an Angular application:

• Modules
• Components
• Templates
• Metadata
• Data binding
• Directives
• Services
• Dependency injection

Modules

• Angular apps are modular and Angular has its own modularity system called Angular modules or NgModules.
• Every Angular app has at least one Angular module class, the root module, conventionally named AppModule.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

• Bootstrap its the root module to launch the application, mainly done in main.ts

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

platformBrowserDynamic().bootstrapModule(AppModule);

Components

A component controls a patch of screen called a view.

• You define a component's application logic—what it does to support the view—inside a class.

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

  constructor(private service: HeroService) { }

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

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

• Angular creates, updates, and destroys components as the user moves through the application

Templates

A template is a form of HTML that tells Angular how to render the component.

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

<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

Metadata

Metadata tells Angular how to process a class

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

Data binding

Angular supports data binding, a mechanism for coordinating parts of a template with parts of a component

<li>{{hero.name}}</li>
<hero-detail [hero]="selectedHero"></hero-detail>
<li (click)="selectHero(hero)"></li>

• Two-way data binding is an important fourth form that combines property and event binding in a single notation, using the ngModel directive

<input [(ngModel)]="hero.name">

Directives

A directive is a class with a @Directive decorator

• Structural

<li *ngFor="let hero of heroes"></li>
<hero-detail *ngIf="selectedHero"></hero-detail>

• Attribute

<input [(ngModel)]="hero.name">

Services

Service is a broad category encompassing any value, function, or feature that your application needs

export class Logger {
  log(msg: any)   { console.log(msg); }
  error(msg: any) { console.error(msg); }
  warn(msg: any)  { console.warn(msg); }
}

export class HeroService {
  private heroes: Hero[] = [];

  constructor(
    private backend: BackendService,
    private logger: Logger) { }

  getHeroes() {
    this.backend.getAll(Hero).then( (heroes: Hero[]) => {
      this.logger.log(`Fetched ${heroes.length} heroes.`);
      this.heroes.push(...heroes); // fill cache
    });
    return this.heroes;
  }
}

• Component classes should be lean
• They don't fetch data from the server, validate user input, or log directly to the console
• They delegate such tasks to services.

Dependency injection

Dependency injection is a way to supply a new instance of a class with the fully-formed dependencies it requires

constructor(private service: HeroService) { }

Providers from module

providers: [
  BackendService,
  HeroService,
  Logger
],

Register at a component level in the providers property of the @Component metadata

@Component({
  selector:    'hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})

• The injector is the main mechanism.
  • An injector maintains a container of service instances that it created.
  • An injector can create a new service instance from a provider.

source

Angular CLI

npm install -g @angular/cli

https://github.com/angular/angular-cli