Angular 2 Introduction

ANGULAR 2

Angular 2 is not the upgrade of angular 1.It is completely different.

What went wrong ?Originally, targeted more at designers who needed to quickly bind

expressions to HTML

Implementsitsownmodulepatternsandwebcomponentswhichdonotlineupwithcurrentwebstandards

Itwasnotdesignedwithmobileinmind

Speed & PerformanceSimple and powerful template syntax

IDE & TestingPowerful CLIDebugging

Progressivewebapps

Native App Development

Progressive web apps

Angular 2 Features

Angular is based on:

TypeScript does something similar to JavaScript what LESS or SASS

does to CSS

TypeScript

• ES6 is the upcoming version of JavaScript

• TypeScript is a superset of ES6, but not all TypeScript features are part of ES6

• Class based object oriented programming

• TypeScript must be transpiled into ES5 to run in most browsers

• TypeScript can understand exisiting JavaScript with .d.ts files

• Syntax similar to Backend langauges (Java, C#)

var name = “Rebbica Bunch”;var id = 2;

var name: boolean = “Rebbica Bunch”;var id: number = 67;var status: boolean = false;var topic: any var foo: string[] = [”first”,”second”]

In JavaScript

In TypeScript

class Planet {var moon: number = 50;

constructor(numMoons: number){

this.moons = numMoons;

}}

var pluto: Planet = new planet(2);

TypeScript Classes

class Planet {var moon: number = 50;

constructor(numMoons: number){

this.moons = numMoons;

}}

var pluto: Planet = new planet(2);

TypeScript Classes

interface Vehicle {color: string;make: string;}class Car implements Vehicle {color: string;make: string;constructor(color: string, make:string) {

this.color = color;this.make = make;

}}

TypeScript Interface

class Planet {var moon: number = 50;

constructor(numMoons: number){

this.moons = numMoons;

}}

var pluto: Planet = new planet(2);

TypeScript Classes

Angular Architecture

Demo 1