What's new in Angular 2?
Download as PPTX, PDF1 like484 views
Angular 2 introduced many changes from Angular 1 including components instead of directives, templates instead of views, and services instead of factories. It uses TypeScript for static typing and classes. Key features include components, data binding with property and event binding, lifecycle hooks, dependency injection, and routing. Components are the fundamental building block and define templates, styles, and logic. Data binding synchronizes templates and classes. Observables replaced promises for asynchronous operations.
![Modules & DI
• A container for the different parts of your Angular app
• You can package code as reusable modules
• You may inject different modules to your module
• Dependency Injection
• Instantiate a module
• ng-app=“”
• Creating a module
• angular.module(‘demoApp’, [])](https://image.slidesharecdn.com/ng1vs2-160916211728/85/What-s-new-in-Angular-2-15-320.jpg)
![Data Binding
• Coordinates communication between the component’s class and template
• Interpolation
• {{name}}
• Event Binding
• (click)=‘onClick()’
• Two-way Binding
• <input [(ngModel)]=‘name’ />
• Property Binding
• <img [src] = ‘customer.thumbnail’ />](https://image.slidesharecdn.com/ng1vs2-160916211728/85/What-s-new-in-Angular-2-30-320.jpg)
What's new in Angular 2?
- 1. What’s new in Angular 2? A COMPARISON BETWEEN NG1.X AND NG2 Alfred Jett Grandeza Founder, Leangineer @ Lean Consulting leanconsulting.ph | ajgrandeza.com
- 2. Lean Consulting • Davao based start-up • Founded: February 2016 • Lean Academy SOON! • More info: • leanconsulting.ph • fb.com/leanconsutling.ph
- 3. About Me •Graduate of Ateneo de Davao, Computer Science 2012 •Over 5 years of software engineering experience, .NET and AngularJS •Former CTO of T.H.E. Patrons •Co-founder of Lean Consulting/Lean Academy •Microsoft Technology Associate (2) •Member of Davao .NET Community (Davao .NET Users Group, Philippine .NET Users Group) •I do consulting and freelance work from clients overseas •Advocate of .NET Technologies •I LOVE TO LEARN!
- 4. Prerequisites & Tools • Required • JavaScript • HTML • CSS • Helpful • OOP concepts • Visual Studio Community • https://www.visualstudio.com/ • Visual Studio Code • https://code.visualstudio.com/
- 5. Single Page Application • SPAs are web apps that load a single HTML page and dynamically that page as the user interacts • Much of the work happen in the client side • Usually written in JavaScript
- 7. Angular is… • Open source, JavaScript based front-end framework • Used for building client-side applications • MVW Framework (Model-View-Whatever) • Mainly maintained by Google
- 8. Why use Angular? • Expressive/Customizable HTML • Powerful Data Binding • Modular • Easy back-end integration
- 9. Application Demo • NG 1.X App • NG 2 App
- 10. Key Features of Angular 1.X • Directives • Data binding • Views • Controllers • $scope • Modules • Dependency Injection • Routes • Services
- 11. What is a directive? • Extends HTML attributes, with the prefix “ng-” • Teaches HTML new tricks • There are built-in directives • ng-app • ng-view • You can also create your own custom directives
- 12. Data Binding • Interpolation • {{name}} • Event Binding • ng-click=“onClick()” • Two-way Binding • <input ng-model=“name” />
- 13. Filters & Pipes • Filters can be added to filter an array •Pipes can be used to format a data
- 14. Views, Controllers, Scope •View – UI / Display •Controllers – Controls the logic, data and flow •$scope is the “glue” between controller and view or the ViewModel
- 15. Modules & DI • A container for the different parts of your Angular app • You can package code as reusable modules • You may inject different modules to your module • Dependency Injection • Instantiate a module • ng-app=“” • Creating a module • angular.module(‘demoApp’, [])
- 16. Routes • is used for deep-linking URLs to controllers and views
- 17. Services • Are for organizing and share code across your application
- 18. Summary for NG1 Key Features • Directives • Data binding • Views • Controllers • $scope • Modules • Dependency Injection • Routes • Services
- 19. Angular 2.0 with TypeScript Live release: Sept 16, 2016 http://angularjs.blogspot.com/2016/09/angular2-final.html
- 20. Why Angular 2? • Built for speed • Modern • Simplified API • Enhanced Productivity • Develop Across All Platforms
- 21. What is TypeScript? • Open source programming language • Developed and maintained by Microsoft • A superset of JavaScript • Transpiles to plain JavaScript • Strongly typed • Class based / OOP approach • Learn more: • http://www.typescriptlang.org/Playground
- 22. Setting up • Download • https://github.com/angular/quickstart
- 23. Angular 2 Key Features • Components • Templates • Directives • Data Binding & Pipes • Life-cycle hooks • Services • Dependency Injection • Routes
- 24. Anatomy of NG 2 Image grabbed from: https://www.pluralsight.com/courses/angular-2-getting-started
- 25. Anatomy of a Component Image grabbed from: https://www.pluralsight.com/courses/angular-2-getting-started
- 26. Components Image grabbed from: https://www.pluralsight.com/courses/angular-2-getting-started
- 27. Components Import statements Metadata & Template Class
- 28. Decorator • A function that adds metadata to a class • Prefixed with an @ • @Component()
- 29. Defining a Template in a Component • Inline template •Linked Template
- 30. Data Binding • Coordinates communication between the component’s class and template • Interpolation • {{name}} • Event Binding • (click)=‘onClick()’ • Two-way Binding • <input [(ngModel)]=‘name’ /> • Property Binding • <img [src] = ‘customer.thumbnail’ />
- 31. Directive in NG2 • Built-in directives • *ngIf • *ngFor
- 32. Pipes • | lowercase • | currency • | uppercase • No more filter • You have to create your own pipe
- 33. Lifecycle Hooks • A component has a lifecycle • Angular offers component lifecycle hooks that give us ability to capture these moments • In other words, events • Samples • OnInit • OnChanges • OnDestory
- 34. Services • Services are independent from any components • To provide shared data, logic across multiple components • Encapsulate external interactions (i.e. Rest API)
- 35. Services
- 36. Dependency Injection • A design pattern to resolve dependencies
- 37. Retrieve Data using Http Returns Observables instead of Promises
- 38. What is RxJS? • RxJS is a javascript library for composing asynchronous & event-based programs by using observable sequences • Used within Angular • More info • http://reactivex.io/rxjs/
- 39. Promises vs Observable • Promise • Returns a single value • Not cancellable • Observable • Works with multiple values over time • Cancellable • “Retryable” • Supports map, filter, reduce, etc..
- 40. Routing
- 41. Summary • Huge difference between NG1 & NG2, in terms of syntax • NG2 is simpler in terms of Architecture • TypeScript makes the job easier