1

Angular2 with TypeScript

- Ravi Mone

About me

● I AM Ravi Mone● Have ample year of experience in back-end and Front-end. ● Working on technologies like Symfony2, AngularJS, ReactJS.● Currently serving in Techjini Solution as Team Leader.● You can connect me via

○ https://in.linkedin.com/in/ravi-mone-49b26519

Agenda

• What is TypeScript?• Why use TypeScript?• Angular2 Framework Architecture• What’s happening in Angular2?• Building Blocks of Angular2• Life Cycle Hooks• Bootstrap the application• Routing• Demo

What is TypeScript?

TypeScript (contd.)

Why use TypeScript? (Contd.)

• TypeScript follows a less radical/progressive approach.• It’s a typed superset of JavaScript and existing JavaScript projects can be

converted to TypeScript simply by renaming the source files from*.js to *.ts

Angular2 Framework Architecture

What’s happening in Angular2?

• Angular2 is not yet stable. The features and guidelines are subject to change from time to time.

• Current RC (Release Candidate) versionhttps://github.com/angular/angular/milestones

• To be aware of the weekly updates/modifications, visit: https://github.com/angular/angular/blob/master/CHANGELOG.md

• To know about the Angular2 Style Guide (Alpha-Version), visit: https://github.com/mgechev/angular2-style-guide

8 Main building blocks of an Angular2 App

1. Module2. Component3. Template4. Meta Data5. Data-Binding6. Services7. Directives8. Dependency Injection

Module (Export/Import)

• In ES6 each module is defined in its own file. • The functions or variables defined in a module are not visible outside

unless you explicitly export them. This means that you can write code in your module and only export those values which should be accessed by other parts of your app.

• ES6 modules are declarative in nature. To export certain variables from a module you just use the keyword export.

• Similarly, to consume the exported variables in a different module you use import.

Let’s create a simple module with two utility functions:

generateRandom() : Generates a random number.sum() : Adds two numbers.Next, let’s create a file named utility.js for the module:

And in your app.js

2. Component (@Component({ … }) )

• In Angular 2, Components are the main way we build and specify elements and logic on the page.

• Create reusable UI building blocks for an application.1. Each Angular component requires a single @Component. The @Component annotation

specifies when a component is instantiated, and which properties and hostListeners it binds to.

2. When a component is instantiated, it acts according to the encapsulation valueViewEncapsulation.native,

ViewEncapsulation.Emulated,

ViewEncapsulation.None.

3. All template expressions and statements are then evaluated against the component instance.

3. Template

• We define a Component's view with its companion template. • A template is a form of HTML that tells Angular how to render the

Component.• A template looks like regular HTML, with data/event binding properties

Sample Angular Template

4. @ Meta Data

• Metadata is data that describes other data. • Meta is a prefix that in most information technology usages means "an

underlying definition or description." • Metadata summarizes basic information about data, which can make

finding and working with particular instances of data easier.

So far Meta Data Classes

5. {{ DATA BINDING}}

Data Binding (contd.)

1. The "interpolation" displays the component's hero.name property value within the <div> tags.

2. The [hero] property binding passes the selectedHero from the parent HeroListComponent to the hero property of the childHeroDetailComponent.

Data Binding (contd.)

3. The (click) event binding calls the Component's selectHero method when the user clicks on a hero's name.

4. Two-way data binding is an important fourth form that combines property and event binding in a single notation using the ngModeldirective

6. Service

• If a piece of code is needed by many components in our application then create a single reusable service.

• When a component needs this service we can simply inject it (the service) using DI (@Injectable).

• A service is the mechanism used to share functionalities over Components (or with one Component if our app contains only one Component).

• Service is the best place from where we can bring our external Data to our app. Or do some repetitive task or calculations.

• Service can be shared between as many as Components we want.

7. @Directive

● A directive is simply a class with a specific Metadata (@Directive decorator)

● We have three kinds of directives:○ Components: yes a component is a directive. (@Component)○ Structural directives: conditionally add or remove content from the

DOM.○ Attribute directives: Alters the Element by changing its behavior or the

appearance

Three Kinds of Directives

1. Component<angular-2-hello-world>loading…</angular-2-hello-world>

2. Structural Directive (ngIf, ngFor )<div*myAngular2Directive=”ShowMeIfFalse”> <b>I’m visible => showMeIfFalse=false </b></div>

3. Attribute Directive<p [zoomIn]=”blue”> Some thing goes here </p>

Directive Vs. Component

8. Dependency Injection (Provider, BootStrap(‘’, []))

• In software engineering, dependency injection is a software design pattern that implements inversion of control for resolving dependencies.

• The idea behind dependency injection is very simple. If you have a component that depends on a service. You do not create that service yourself. Instead, you request one in the constructor, and the framework will provide you one. By doing so you can depend on interfaces rather than concrete types. This leads to more decoupled code, which enables testability, and other great things

Demo: http://plnkr.co/edit/CG9HuLzI6KqncxiVeACM?p=preview

Life Cycle Hooks

• When the component class implements some lifecycle_hooks the callbacks are called by the change detection at defined points in time during the life of the component.

Demo: http://plnkr.co/edit/IVn4bb4Fp2eDDPrLODay?p=preview

Bootstrap the App

● You instantiate an Angular application by explicitly specifying a component to use as the root component for your application via:○ bootstrap(‘<root component>’) in case there is a single component ○ bootstrap(‘<root component>’, [<DI>]) in case the component has

dependencies.

Routing

Demo Links• Kick Start: Demo a small component (meet-up folder)

• Forms: http://plnkr.co/edit/aN3LhpwnH2qyRYNfJn8q?p=preview

• Inputs: http://plnkr.co/edit/rV5s4CKZWLfhW63gGnKp?p=preview

• Outputs: http://plnkr.co/edit/7ByGLXviLy4SbrXgdlx7?p=preview

• ViewChild: http://plnkr.co/edit/vhdL7e0SccIbMk0eZKfh?p=preview

• Encapsulation : https://plnkr.co/edit/inF7VaYJvj8uJfuLKV4Z?p=preview

• Directives : http://plnkr.co/edit/P0G8cWYCP8sC7Yrvlo8L?p=preview

• CRUD application : https://github.com/ravi-mone/angular2-crud

• Routes : https://github.com/ravi-mone/angular2-lab