Basics of TypeScript Angular2 quick start guide Angular2 Services, Components, Modules, Navigation & Routing

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

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

4. TypeScript
Installation:

5. TypeScript
The “Hello World!!”:

6. 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:

7. TypeScript
Demo: Inheritance

8. TypeScript
Demo: Types

9. TypeScript
Demo: Class

10. TypeScript
Demo: Interface

11. 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

13. Angular 2 Agenda
• Why angular 2?
• Angular 2 quick start application
• Angular 2 architecture
• Navigation and Routing

14. Why Angular2
• Simple, but Not Simplistic
• Web component oriented architecture
• Mobile First
• Better Foundations (DI, Router, Components)
• Speed & Performance
• Productivity

15. 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

16. Angular 2 Quick Start

17. Angular 2 Quick Start

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

19. Angular 2 Quick Start

20. Angular 2 Quick Start

21. Angular 2 Quick Start

22. Angular 2 Quick Start

23. Angular 2 Quick Start

24. Angular 2 Quick Start

25. Angular 2 Quick Start

26. Angular 2 Quick Start

27. Angular 2 Quick Start

28. Angular 2 Quick Start

29. Angular 2 Quick Start

30. Angular 2 Quick Start

31. Angular 2 Quick Start

32. Architecture Overview

33. 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.

34. Architecture Overview
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.

35. Components continued..

36. Architecture Overview
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.

37. Templates continued..

38. 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]

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

40. 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.

41. 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-).

42. Templates syntax continued..
Template Syntax
• Built-in directives
– ngClass
– ngStyle
– *ngIf
– *ngSwitch
– *ngFor example *ngFor="let hero of heroes"

43. 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

44. Metadata continued..
Here are a few of the possible @Component configuration options:
• selector
• templateUrl
• directives
• providers: what the hell is that now?

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

46. 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”

47. Exercises

48. 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.

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

50. 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

51. 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.

52. Architecture Overview

53. 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]);

54. 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.

55. 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.

56. Routing and Navigation

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

58. Routing and Navigation
● Add the Router Links and Router Outlet in applications
AppComponent.

59. Routing and Navigation
● Add the Router Links and Router Outlet in applications
AppComponent.

60. 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