-Rohit Kumar @rbdharnia

-Manish Kapoor @kapoormanish_89

Angular2 with TypeScript

AgendaTypeScript

• What is TypeScript• Installation• Hello World!!• Features• Demos

– Types– Class– Inheritance– Interface

Angular2

• Why angular 2?

• Angular 2 quick start

application

• Angular 2 architecture

• Navigation and Routing

TypeScript

Installation:

TypeScript

The “Hello World!!”:

TypeScript

○ Implements ECMA 6 Specification.

○ Has types(number, string, boolean, any)

○ Better Support for OOP(Classes, Interfaces, Inheritance, Enum)

○ Optional typing(Duck typing)

○ Functions(Optional parameters, default parameters)

○ Module System (Exporting & Importing modules)

Features:

TypeScript

Demo: Inheritance

TypeScript

Demo: Types

TypeScript

Demo: Class

TypeScript

Demo: Interface

TypeScriptExercises!!

1. Hello World!2. Create a method with multiple parameters.3. Create a method with default parameters.4. Create a method with optional parameters.5. Create a class with name “Person” and fields ‘firstName’ and

‘lastName’.6. Add a funtion print() in the class which prints firstName and

secondName7. Create a constructor.8. Create another class Employee which extends Person9. Add another field ‘employeeCode’ and method print() . This method

should override the method of base class

Angular 2 Agenda

• Why angular 2?

• Angular 2 quick start application

• Angular 2 architecture

• Navigation and Routing

Why Angular2

• Simple, but Not Simplistic

• Web component oriented architecture

• Mobile First

• Better Foundations (DI, Router, Components)

• Speed & Performance

• Productivity

Angular 2 Quick StartStep 1: Create and configure the project

A. Create the project folder

B. Add package definition and configuration files

C. Install packages

Angular 2 Quick Start

Angular 2 Quick Start

No need to add configuration yourself, just clone and checkout to

branch ‘master’.

git@github.com:rohitbishnoi/angular2-quickstart.git

Angular 2 Quick Start

Angular 2 Quick Start

Angular 2 Quick Start

Angular 2 Quick Start

Angular 2 Quick Start

Angular 2 Quick Start

Angular 2 Quick Start

Angular 2 Quick Start

Angular 2 Quick Start

Angular 2 Quick Start

Angular 2 Quick Start

Angular 2 Quick Start

Angular 2 Quick Start

Architecture Overview

Architecture Overview

1. Modules

a. Angular apps are modular

b. Generally we assemble our application from many modules

c. Block of code dedicated to a single purpose

d. A module exports some value, typically a class.

e. Modules are optional, but it is highly recommended.

Architecture Overview

2. Componentsa. A component controls a portion of screen, we could call it a

view.b. We define components application logic inside a class.c. Class interacts with view through its API.

Components continued..

Architecture Overview

3. Templatesa. We define a component's view with its companion template.

b. A form of html that tells Angular how to render the component.

c. Most of the time it looks like regular html … and then it get a bit strange.

d. See the example on next page.

Templates continued..

Templates continued..

Let's write some code now

• Create a ToDoListComponent• It will have 2 variables, todos list and a selectedTodo• Bootstrap todo list• Create a template todo-list-component.html• Display a list of bootstrapped todos.

Hint: use directives option in AppComponent config metadata to make it aware about ToDoListComponent.

directives: [TodoListComponent]

Templates continued..

<li *ngFor="let todo of todos" (click)="selectTodo(todo)"> {{todo}}</li>

What is *ngFor and (click) in above code snippet ?

Templates continued..

Template Syntax

• Html

• Interpolations {{selectedTodo}}, {{2+2}}

• Template Expressions [property]="expression"

• Template Statements: responds to an even raised by

a binding target for ex (event)="statement"

• Binding Syntax: binding data value to and from the

data model.

Template Syntax continued..Data Direction Syntax Binding Type

One-wayfrom data sourceto view target

{{expression}}[target] = "expression"bind-target = "expression"

InterpolationPropertyAttributeClassStyle

One-wayfrom view targetto data source

(target) = "statement"on-target = "statement"

Event

Two-way [(target)] = "expression"bindon-target = "expression"

Two-way

Binding types other than interpolation have a target name to the left of the equal sign, either surrounded by punctuation ([], ()) or preceded by a prefix (bind-, on-, bindon-).

Templates syntax continued..

Template Syntax• Built-in directives

– ngClass– ngStyle– *ngIf– *ngSwitch– *ngFor example *ngFor="let hero of heroes"

Architecture Overview

4. Metadata• Metadata tell angular how to process a class.• TodoListComponent was just a class until we tell angular about

it.• We tell angular that TodoListComponent is a component by

attaching some metadata to it.• We attached metadata using a decorator @Component

Metadata continued..

Here are a few of the possible @Component configuration options:

• selector• templateUrl• directives• providers: what the hell is that now?

Architecture Overview

4. Data Binding• You already have some idea about it now.

Exercises

• Create a model class Todo with following fields– Title of string type– Priority of integer type

• Create a FormComponent– It will have a list of todos– A todo object to hold currently editing todo item– A method to which add the todo item in the list

– Add a template which renders form. See screenshot on next slide for reference.

Hint: use ngModel to bind form elements to component variables. For eg [(ngModel)] = “currentTodo.title”

Exercises

Architecture Overview

5. Services• Service is a broad category encompassing any value, function,

or feature that our application needs.• A class with a narrow, well-defined purpose. It should do

something specific and do it well. For example logging service, tax calculator.

• There is nothing specifically Angular about services. Yet services are fundamental to any Angular application.

Services continued..

Here's an example of a service class that logs to the browser console.

Architecture Overview

5. Dependency Injection• Dependency injection is a way to supply a new instance of a

class with the fully-formed dependencies it requires. Most dependencies are services.

• Angular can tell which services a component needs by looking at the types of its constructor parameters. For example

Dependency Injection continued..

How it works: An injector maintains a container of service instances that it has previously created. If a requested service instance is not in the container, the injector makes one and adds it to the container before returning the service to Angular. When all requested services have been resolved and returned, Angular can call the component's constructor with those services as arguments. This is what we mean by dependency injection.

Architecture Overview

Exercises

● Create a TodoService which maintains a list of todo items.● It will have a method to add a new Todo to the list.● Inject TodoService in TodoListComponent and

TodoFormComponent.● TodoListComponent will just render the list as a unordered

list. (ul > li)● This list should be sorted by priority (high priority task first)

. ● TodoFormComponent will be responsible for rendering the

todo form and it will use service method to add todos in the list.

Hint: use the following syntax to inject services while bootstraping. bootstrap(AppComponent, [BackendService, HeroService, Logger]);

Routing and Navigation

● The Angular Component Router enables navigation from one view to the next as users perform application tasks.

● Angular router is handling browser url change, forward and backward button clicks and link navigations.

● We can bind the router to links on a page and it will navigate to the appropriate application view when the user clicks a link.

Routing and Navigation

Steps to configure the router● Set the <base href="/"> in index.html● Import ROUTER_DIRECTIVES in app component.

● Configure application routes, bootstrap application with an array of routes using the provideRouter function.

Routing and Navigation

Routing and Navigation

● Register our router with bootstrap method, or inject it in bootstrap just like we do with services.

Routing and Navigation

● Add the Router Links and Router Outlet in applications AppComponent.

Routing and Navigation

● Add the Router Links and Router Outlet in applications AppComponent.

Resources• http://info.meteor.com/blog/comparing-performance-of-blaze-react-angular-meteor-and-angular-2-with-

meteor• http://developer.telerik.com/featured/will-angular-2-be-a-success-you-bet/• https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html• https://angular.io/docs/ts/latest/guide/architecture.html• https://angular.io/docs/ts/latest/quickstart.html• https://angular.io/docs/ts/latest/guide/template-syntax.html• https://angular.io/docs/ts/latest/guide/router.html