Angular2 with Typescript, NOTE : The content in the presentation was wrt the current version beta.14. May or may not valid when the version changes

1. 1
Angular2 with TypeScript
- Ravi Mone

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

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

4. What is TypeScript?

5. TypeScript (contd.)

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

8. Angular2 Framework Architecture

9. 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) version
https://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

10. 8 Main building blocks of an Angular2 App
1. Module
2. Component
3. Template
4. Meta Data
5. Data-Binding
6. Services
7. Directives
8. Dependency Injection

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

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

13. And in your app.js

14. 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 value
ViewEncapsulation.native,
ViewEncapsulation.Emulated,
ViewEncapsulation.None.
3. All template expressions and statements are then evaluated against the component
instance.

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

17. Sample Angular Template

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

19. So far Meta Data Classes

20. 5. {{ DATA BINDING}}

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

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

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

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

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

27. Directive Vs. Component

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

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

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

31. Routing

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