ANGULAR 2 - Pluralsight course Angular 2 Getting started, my notes

Angualr 2 Getting Started by Deborah Kurata

Why Angular
Makes HTML more expressive:
it powers up with features like if conditions, for loop, local variables.
Powerful Data Binding
Promotes Modularity by Design: making it easier to create and reuse content.
Built-in support for communication with Back-end

Why Angular 2
Is built for speed:
faster initial loads, faster change detection, improved rendering times
Is modern: has advantage and features of latest JavaScript standards e.g. classes, modules, decorators
Support of IE, back to IE9 (!!!)
Simplified API
Enhances productivity



Why TypeScript
Transpiles to plain JavaScript, Strong Typing (TypeScript type defenition files *.d.ts), Class-based object orientation (classes, interfaces, inheritance), Great Tooling: inline documentation, syntax checking, code navigation, advanced refactoring.
http://www.typescriptlang.org/play/index.html

Modules in EcmaScript 6 (ES 2015):
Module is a File, and File is a Module. We don't need to declare explicitly.
Any module in TypeScript is imported from its transpiled *js version:

COMPONENT

A Class becomes an Angular Component when you give it Component Metadata.

DECORATOR

Decorator is a Function that adds Metadata to a Class, its members, or its method arguments.

Is a JavaScript feature implemented in TypeScript and proposed for ES2016

 Parenthesis b/c it is a function, curly braces - defining the object inside.

@Component({

    selector: "pm-app", //is a Directive name used in HTML - it is a custom HTML TAG

 }).

BOOTSTRAPPING
Saying: "Pulling yourself up by your own bootstraps". Means improve your situation by your own endeavor.Bootstrapping in IT is a self-starting process that loads and goes.

MODULE LOADER
We define a Module Loader in index,html by: System.import('app/main')
In project we have: main.ts
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(AppComponent);

COMPONENT as a DIRECTIVE

BINDING
Coordinates communication between the component's class and its template oand often involves passing the data.

ONE-WAY BINDING: INTERPOLATION
Interpolation is the one-way binding from Component Class property to the Element property of the HTML template.

{{ pageTitle }} - is a Template Expression

TWO-WAY BINDING: use BANANA IN A BOX [()]
[] - property binding from the class property to the input element
() - event binding to send a notification of the user entered data back to the class property 
<input [(ngModel)] = 'listFilter'>

export class ListComponent {
    listFilter: string = 'cart';
}

PROPERTY BINDING

<img [src] = 'product.imageUrl'> //DEFAULT by Convention,
           [bindingTarget], 'bindingSource or TemplateExpression'
<img src = {{ product.imageUrl }}> //DO NOT USE Interpolation
<img src = 'http://somesource.com/{{ product.imageUrl }}'> //Case for interpolation use

EVENT BINDING

<button (click)='toggleImage()'>
https://developer.mozilla.org/en-US/docs/web/events

DIRECTIVE
Directive is a Custom HTML Element or Attribute used to power up and extend our HTML.

STRUCTURAL DIRECTIVES (Angular built-in):
*ngIf   -  if logic
*ngFor - for loops
Manipulation with elements and its children.

FOR OF vs FOR IN
Remember: FOR IN like iterate over an array INdex (like a property of an array element). Angular use FOR OF iterating over iterable objects e.g. ARRAY.

@INPUT Passing Data to a Nested Component
It is done by Property Binding of nested component to which the data is passed from container component:

@OUTPUT Raising an Event
It is done by Event Binding through @Output decorator.

SERVICE is a class with a focused purpose.
Used for features that:

1. Are independent from any particular component.
2. Provide shared data or logic across components
3. Encapsulate external interactions

Service become a singleton when we register it to Angular by Injection using the @providers decorator in the root component (it is a proper level for a service's injection).

DEPENDENCY INJECTION is a coding pattern.
It is a coding pattern in which a class receive an instances of objects it needs (called Dependencies) from an external source rather than creating them itself. This external source is Angular Injector.

Dependency Injection in Angular is done by Component constructor explicitly declared and defined.

We need to assign the injected service to the local variable and then we can use it anywhere in our class.

OBSERVABLE
Observable supports operations from RxJS library Reactive Extension:
 http://rxmarbles.com/

Difference Promises vs Observable:

How to subscribe to an Observable in a class:

ROUTING

How Routing works <router-outlet>
In order to show content of each Component on routing we need to use <router-outlet> in container div:
<div class="container">
     <router-outlet></router-outlet>
</div>

ROUTE PARAMETERS