This document discusses Angular 2 with TypeScript. It introduces TypeScript as a superset of JavaScript that adds optional static typing and classes. TypeScript uses a transpiler to convert code to older JavaScript for browser compatibility. Angular 2 is a front-end web application framework maintained by Google that addresses challenges of single-page apps. It uses components, data binding, services, dependency injection, and directives. Components are basic UI building blocks and services refactor data access to keep components lean. Directives change DOM layout or element appearance and behavior.

1. Angular 2 with TypeScript
Tayseer Emam
temam357@gmail.com

2. What is TypeScript
• TypeScript is described as a strict super-set of JavaScript, which adds
optional static typing and class-based object-oriented programming
aligned with ECMAScript 6 standard proposal.
• Typescript has also a transpiler that converts our Typescript code (i.e.
ES6 + types) to ES5 or ES3 javascript code so we can use it in today
browsers, because ES6 will take years to be fully implemented in all
major browsers.

4. Why TypeScript
• Static type checking.
• ES6 features support.
• Early Error Detection.
• Class-based OOP.
• More structured and reusable code.

5. TypeScript Features
• Type annotations
• Classes
• Interfaces
• Modules
• Arrow functions
• Generic types
• Inheritance
• And much more…

7. Angular 2
• Angular is a development platform for building mobile and desktop
web applications.
• is a complete JavaScript-based open-source front-end web application
framework mainly maintained by Google and by a community of
individuals and corporations to address many of the challenges
encountered in developing single-page applications(SPA).

9. • Component
• Data Binding
• Service
• Dependency Injection
• Directives

10. Components
• Component decorator allows you to mark a class as an Angular
component and provide additional metadata that determines how
the component should be processed
• Components are the most basic building block of an UI in an Angular
application. An Angular application is a tree of Angular components.

11. Components

12. Component

13. Data Binding
• Interpolation {{...}}
• Property binding [property]
• Event binding (event)
• Two-way data binding [(...)]

14. Data Binding

15. Services
• Services are JavaScript functions that are responsible for doing a
specific task only. Angular services are injected using Dependency
Injection mechanism and include the value, function or feature which
is required by the application.
• Refactoring data access to a separate service keeps the component
lean and focused on supporting the view. It also makes it easier to
unit test the component with a mock service.
• You can use service inside another.

16. HTTP (Built in Service)
• Get
• Post
• Put
• Delete

17. Create Service

18. Dependency Injection

19. Directives
• Components — directives with a template.
• Structural directives — change the DOM layout by adding and
removing DOM elements.
• Attribute directives — change the appearance or behavior of an
element, component, or another directive.

20. Structural directives
• Structural directives are responsible for HTML layout. They shape or
reshape the DOM's structure, typically by adding, removing, or
manipulating elements.
• *ngIf
• *ngFor
• [ngSwitch]
• *ngSwitchCase

21. Attribute directives
• An Attribute directive changes the appearance or behavior of a DOM
element.
• [ngClass]
• [ngStyle]

22. Create Directive

23. appModule.ts

24. Useful links
• http://es6-features.org
• https://www.typescriptlang.org/docs/tutorial.html
• https://angular.io/
• https://github.com/jmcunningham/AngularJS2-Learning

25. Thank You
Tayseer Emam
temam357@gmail.com