Before you jump into Angular
1 like2,947 views
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.
Before you jump into Angular
- 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
- 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.