Angular2 with TypeScript

-Rohit Kumar @rbdharnia
-Manish Kapoor @kapoormanish_89
Angular2 with TypeScript

Agenda
TypeScript
• 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
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
Exercises!!
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
secondName
7. Create a constructor.
8. Create another class Employee which extends Person
9. 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 Start
Step 1: Create and configure the project
A. Create the project folder
B. Add package definition and configuration files
C. Install packages

No need to add configuration
yourself, just clone and checkout to
branch ‘master’.
git@github.com:rohitbishnoi/angular2-
quickstart.git

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.

2. Components
a. 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.

3. Templates
a. 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..
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]

<li *ngFor="let todo of todos" (click)="selectTodo(todo)">
{{todo}}
</li>
What is *ngFor and (click) in above code snippet ?

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-way
from data source
to view target
{{expression}}
[target] = "expression"
bind-target = "expression"
Interpolation
Property
Attribute
Class
Style
One-way
from view target
to 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"

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?

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”

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.

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.

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.

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.

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

● 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

Angular2 with TypeScript

Recommended

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to Angular2 with TypeScript (20)

Recently uploaded (20)

Angular2 with TypeScript