Angular 2+

v1 vs v2

youtube

Igor Minar

#ItsJustAngular

Prerequirements

ES6+

TypeScript

RxJs

webpack

ES6 / Classes

class Hamburger {
  constructor() {
    // This is the constructor.
  }

  listToppings() {
    // This is a method.
  }
}

let burger = new Hamburger();
burger.listToppings();

ES6 / Arrow FUNC

items.forEach(function(x) {
    console.log(x);
    incrementedItems.push(x+1);
});

items.forEach((x) => {
    console.log(x);
    incrementedItems.push(x+1);
});

incrementedItems = items.map(function (x) {
    return x+1;
});

incrementedItems = items.map((x) => x+1);

ES6 / Strings

const name = 'Sam';
const age = 42;

console.log('hello my name is ' + name + ' I am ' + age + ' years old');

const name = 'Sam';
const age = 42;

console.log(`hello my name is ${name}, and I am ${age} years old`);

TS / Class

class Person {
    name: string;
    age: number;
    nickName?: string;
}

class Car {
    name: string;
    manufacturer: string;
    automatic: boolean;
}

class Driver { 
  constructor(person: Person, car: Car) { }
}

let driver = new Driver(new Person(), new Car()); // valid
driver = new Driver(new Car(), new Person());     // tsc errors

rxJS / OBSERVABLES

Demo

Documentation

GitHub

webpack

webpack is a module bundler for modern JavaScript applications

entry

output

loaders

plugins

BASICS

Bootstraping

Module

Component

Service

Inputs & Outputs

DEMO