What's new in Angular 2?
-
Upload
alfred-jett-grandeza -
Category
Technology
-
view
190 -
download
0
Transcript of What's new in Angular 2?
![Page 1: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/1.jpg)
What’s new in Angular 2?A COMPARISON BETWEEN NG1.X AND NG2
Alfred Jett GrandezaFounder, Leangineer @ Lean Consulting
leanconsulting.ph | ajgrandeza.com
![Page 2: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/2.jpg)
Lean Consulting• Davao based start-up• Founded: February 2016• Lean Academy SOON!• More info:
• leanconsulting.ph• fb.com/leanconsutling.ph
![Page 3: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/3.jpg)
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!
![Page 4: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/4.jpg)
Prerequisites & Tools• Required• JavaScript• HTML• CSS
• Helpful• OOP concepts
• Visual Studio Community• https://www.visualstudio.com/
• Visual Studio Code• https://code.visualstudio.com/
![Page 5: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/5.jpg)
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
![Page 6: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/6.jpg)
SPA Lifecycle
![Page 7: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/7.jpg)
Angular is…• Open source, JavaScript based front-end framework
• Used for building client-side applications
• MVW Framework (Model-View-Whatever)
• Mainly maintained by Google
![Page 8: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/8.jpg)
Why use Angular?• Expressive/Customizable HTML
• Powerful Data Binding
• Modular
• Easy back-end integration
![Page 9: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/9.jpg)
Application Demo• NG 1.X App
• NG 2 App
![Page 10: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/10.jpg)
Key Features of Angular 1.X• Directives
• Data binding
• Views
• Controllers
• $scope
• Modules
• Dependency Injection
• Routes
• Services
![Page 11: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/11.jpg)
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
![Page 12: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/12.jpg)
Data Binding• Interpolation• {{name}}
• Event Binding• ng-click=“onClick()”
• Two-way Binding• <input ng-model=“name” />
![Page 13: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/13.jpg)
Filters & Pipes• Filters can be added to filter an array
•Pipes can be used to format a data
![Page 14: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/14.jpg)
Views, Controllers, Scope•View – UI / Display
•Controllers – Controls the logic, data and flow
•$scope is the “glue” between controller and view or the ViewModel
![Page 15: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/15.jpg)
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’, [])
![Page 16: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/16.jpg)
Routes• is used for deep-linking URLs to controllers and views
![Page 17: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/17.jpg)
Services• Are for organizing and share code across your application
![Page 18: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/18.jpg)
Summary for NG1 Key Features• Directives• Data binding• Views• Controllers• $scope• Modules• Dependency Injection• Routes• Services
![Page 19: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/19.jpg)
Angular 2.0 with TypeScript
Live release: Sept 16, 2016
http://angularjs.blogspot.com/2016/09/angular2-final.html
![Page 20: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/20.jpg)
Why Angular 2?• Built for speed
• Modern
• Simplified API
• Enhanced Productivity
• Develop Across All Platforms
![Page 21: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/21.jpg)
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
![Page 22: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/22.jpg)
Setting up• Download• https://github.com/angular/quickstart
![Page 23: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/23.jpg)
Angular 2 Key Features• Components
• Templates
• Directives
• Data Binding & Pipes
• Life-cycle hooks
• Services
• Dependency Injection
• Routes
![Page 24: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/24.jpg)
Anatomy of NG 2
Image grabbed from: https://www.pluralsight.com/courses/angular-2-getting-started
![Page 25: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/25.jpg)
Anatomy of a Component
Image grabbed from: https://www.pluralsight.com/courses/angular-2-getting-started
![Page 26: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/26.jpg)
Components
Image grabbed from: https://www.pluralsight.com/courses/angular-2-getting-started
![Page 27: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/27.jpg)
ComponentsImport statements
Metadata & Template
Class
![Page 28: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/28.jpg)
Decorator• A function that adds metadata to a class
• Prefixed with an @
• @Component()
![Page 29: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/29.jpg)
Defining a Template in a Component• Inline template
•Linked Template
![Page 30: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/30.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’ />
![Page 31: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/31.jpg)
Directive in NG2• Built-in directives• *ngIf• *ngFor
![Page 32: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/32.jpg)
Pipes• | lowercase
• | currency
• | uppercase
• No more filter • You have to create your own pipe
![Page 33: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/33.jpg)
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
![Page 34: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/34.jpg)
Services• Services are independent from any components
• To provide shared data, logic across multiple components
• Encapsulate external interactions (i.e. Rest API)
![Page 35: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/35.jpg)
Services
![Page 36: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/36.jpg)
Dependency Injection• A design pattern to resolve dependencies
![Page 37: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/37.jpg)
Retrieve Data using HttpReturns Observables instead of Promises
![Page 38: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/38.jpg)
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/
![Page 39: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/39.jpg)
Promises vs Observable• Promise• Returns a single value• Not cancellable
• Observable• Works with multiple values over time• Cancellable• “Retryable”• Supports map, filter, reduce, etc..
![Page 40: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/40.jpg)
Routing
![Page 41: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/41.jpg)
Summary• Huge difference between NG1 & NG2, in terms of syntax
• NG2 is simpler in terms of Architecture
• TypeScript makes the job easier
![Page 42: What's new in Angular 2?](https://reader035.fdocuments.in/reader035/viewer/2022070602/5873f4961a28abb1528b5ded/html5/thumbnails/42.jpg)
References•https://angular.io/docs/ts/latest/quickstart.html
•https://www.pluralsight.com/courses/angular-2-getting-started
•https://auth0.com/blog/angular-2-series-part-2-domain-models-and-dependency-injection/
•https://auth0.com/blog/angular-2-series-part-3-using-http/