Top Banner
ANGULAR 2
15

Angular 2 Introduction

Jan 24, 2017

Download

Technology

Suraj kc
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Angular 2 Introduction

ANGULAR 2

Page 2: Angular 2 Introduction

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

Page 3: Angular 2 Introduction

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

expressions to HTML

Implementsitsownmodulepatternsandwebcomponentswhichdonotlineupwithcurrentwebstandards

Itwasnotdesignedwithmobileinmind

Page 4: Angular 2 Introduction

Speed & PerformanceSimple and powerful template syntax

IDE & TestingPowerful CLIDebugging

Progressivewebapps

Native App Development

Progressive web apps

Angular 2 Features

Page 5: Angular 2 Introduction

Angular is based on:

Page 6: Angular 2 Introduction

TypeScript does something similar to JavaScript what LESS or SASS

does to CSS

Page 7: Angular 2 Introduction
Page 8: Angular 2 Introduction

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

Page 9: Angular 2 Introduction

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

Page 10: Angular 2 Introduction

class Planet {var moon: number = 50;

constructor(numMoons: number){

this.moons = numMoons;

}}

var pluto: Planet = new planet(2);

TypeScript Classes

Page 11: Angular 2 Introduction

class Planet {var moon: number = 50;

constructor(numMoons: number){

this.moons = numMoons;

}}

var pluto: Planet = new planet(2);

TypeScript Classes

Page 12: Angular 2 Introduction

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

Page 13: Angular 2 Introduction

class Planet {var moon: number = 50;

constructor(numMoons: number){

this.moons = numMoons;

}}

var pluto: Planet = new planet(2);

TypeScript Classes

Page 14: Angular 2 Introduction

Angular Architecture

Page 15: Angular 2 Introduction

Demo 1