The document discusses Angular 2 and its integration with TypeScript, highlighting key features such as class-based object-oriented programming, static typing, and generics. It also outlines significant ECMAScript 6 enhancements that Angular supports, including improved dependency injection, template strings, and the spread operator. Additionally, it covers TypeScript's advantages over ES2015, including type annotations, interfaces, and future feature support, making it a powerful tool for JavaScript development.

1. Angular
Before you jump into

2. I am
M A Hossain Tonu
@Vantage Labs Dhaka
mahtonu@vantage.com
Authored the title “PHP Application
Development with NetBeans:
Beginner's Guide”
mahtonu.wordpress.com

3. Whats up Angular 2 ?

4. Angular recommends the use of Microsoft's
TypeScript language, which introduces the following
features:
• Class based Object Oriented Programming
• Static Typing
• Generics
• TypeScript is a superset of ECMAScript 6 or ES6,
backward compatible with EC5 i.e. JavaScript

5. Angular also includes the benefits of ES6:
• Lambdas
• Iterators
• For/Of loops
• Python-style generators
• Reflection

6. • Improved dependency injection – bindings make it
possible for dependencies to be named
• Dynamic loading
• Asynchronous template compilation

7. • Replacing controllers and $scope with
components and directives – a component is a
directive with a template
• Reactive programming support using RxJS

9. ECMAScript 6
Features (Selected)

10. Arrows
Arrows are a function shorthand using the => syntax.

11. Classes
ES6 classes are a simple sugar over the prototype-based OO pattern. Classes
support prototype-based inheritance, super calls, instance and static methods
and constructors.

12. Class Inheritance
ES6 classes are a simple sugar over the prototype-based OO pattern. Classes
support prototype-based inheritance, super calls, instance and static methods
and constructors.

13. Enhanced Object Literals
Object literals are extended to support setting the prototype at construction,
shorthand for foo: foo assignments, defining methods, making super calls, and
computing property names with expressions.

14. Template Strings
Template strings provide syntactic sugar for constructing strings. Optionally, a tag can be added to allow
the string construction to be customized, avoiding injection attacks or constructing higher level data
structures from string contents.
Template literals are enclosed by the back-tick (` `)

15. Destructuring
The destructuring assignment syntax is a JavaScript expression that makes it
possible to unpack values from arrays, or properties from objects, into distinct
variables.

16. Default Parameters
Default function parameters allow formal parameters to be
initialized with default values if no value or undefined is passed.

17. Rest Parameters
The rest parameter syntax allows us to represent an indefinite number of
arguments as an array. Rest parameters can be destructured, that means that
their data can be unpacked into distinct variables.

18. Spread Operator
Spread syntax allows an iterable such as an array expression or string to be expanded in places where
zero or more arguments (for function calls) or elements (for array literals) are expected, or an object
expression to be expanded in places where zero or more key-value pairs (for object literals) are
expected.

19. Let + Const Statement
Block-scoped binding constructs. let is the new var. const is single-
assignment. Static restrictions prevent use before assignment.

20. Modules
Language-level support for modules for component definition. Implicitly async
model – no code executes until requested modules are available and
processed.

21. Proxies
Proxies enable creation of objects with the full range of behaviors available to
host objects. Can be used for interception, object virtualization, logging/
profiling, etc.

22. Promises
A Promise is a proxy for a value not necessarily known when the promise is created. It allows you to
associate handlers with an asynchronous action's eventual success value or failure reason. This lets
asynchronous methods return values like synchronous methods: instead of immediately returning the final
value, the asynchronous method returns a promise to supply the value at some point in the future.

23. Symbol, Reflect API,
Tail Calls, and so on…

24. You can have it all with
TypeScript and
MORE…

26. TypeScript is a typed
superset of JavaScript that
compiles to plain JavaScript

28. So what does TypeScript offer over ES2015? the
three main additions:
• Types
• Interfaces
• Future ES2016+ features (such as Annotations/
Decorators and async/await)

31. Type Annotations
Type annotations in TypeScript are lightweight ways to
record the intended contract of the function or variable.

32. Note that, Static Types enable the modern Editors or
IDE to Static Analyse the codebase for invoking good
practices. It also helps the Auto Suggestion features
to suggest variable, method or return types
fruitfully.

33. Interfaces
In TypeScript, two types are compatible if their internal structure is compatible.
This allows us to implement an interface just by having the shape the interface
requires, without an explicit implements clause.

34. Classes
A Student class with a constructor and a few public fields. Notice that classes and interfaces play well
together, letting the programmer decide on the right level of abstraction.
Also of note, the use of public on arguments to the constructor is a shorthand that allows us to
automatically create properties with that name.

35. Thank you.

36. References
• https://github.com/lukehoban/es6features
• https://www.typescriptlang.org/