angular 2.0 - what to expect
TRANSCRIPT
![Page 1: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/1.jpg)
Angular 2.0What to expect?
![Page 2: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/2.jpg)
Who is Allan Baptista?
![Page 3: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/3.jpg)
MobileDeveloper
Hotel Urbano
Participated on the latest desktop’s home
re-design
Currently working on the 2.0 App for WP.
M. Site’s Creator
//WhoisAllanBaptista?
![Page 4: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/4.jpg)
//WhoisAllanBaptista?
MobileDeveloper
Hotel UrbanoPHP HTML
CSS
JS
Python
Ruby
NodeJS
MobilePlatforms
![Page 5: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/5.jpg)
Who is Allan Baptista?Why 2.0?
![Page 6: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/6.jpg)
ANGULAR
//Why2.0
THEWEBISAT A RIDICULOUSchanging
PACE
HASGOTTOKEEPUP
ES6 ES7
![Page 7: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/7.jpg)
WTF is atScript?
![Page 8: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/8.jpg)
//WTFisatScript?
ES6Type annotations
Field annotations
Metadata annotations
Type introspection
+
+
+
+
![Page 9: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/9.jpg)
import {Component} from 'angular'; import {Server} from './server';
@Component({selector: 'foo'})export class MyComponent { constructor(server:Server) { this.server = server; }}
import * as rtts from 'rtts'; import {Component} from 'angular'; import {Server} from './server';
export class MyComponent { constructor(server) { rtts.types(server, Server); this.server = server; }}
MyComponent.parameters = [{is:Server}]; MyComponent.annotate = [ new Component({selector: 'foo'})];
ATSCRIPT AFTERCOMPILED
//WTFisatScript?
![Page 10: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/10.jpg)
Dependency Injection
![Page 11: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/11.jpg)
scope management (all instances are singleton)
someModule.controller('MyController', function($scope, greeter) { // ...});
// or...
angular.module('myModule', []).factory('serviceId', ['depService', function(depService) { // ...}]).directive('directiveName', ['depService', function(depService) { // ...}]).filter('filterName', ['depService', function(depService) { // ...}]);
// or...
var MyController = function($scope, greeter) { // ...}MyController.$inject = ['$scope', 'greeter'];someModule.controller('MyController', MyController);
//DependencyInjection
PRESENT KNOWNPROBLEM
![Page 12: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/12.jpg)
Enables a unique instance for every injection
Providers, Lazy Injection, Async Injections
import {Component} from 'angular'; import {Server} from './server';
@Component({selector: 'foo'})export class MyComponent { constructor(server:Server) { this.server = server; }}
@TransientScopeexport class MyClass { ... }
//DependencyInjection
FUTURE ANDMORE
![Page 13: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/13.jpg)
Components & Databinding
![Page 14: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/14.jpg)
The Directive Definition Object (DDO) is awfully confusing and hard to learn.
angular.module('docsTabsExample', []).directive('myPane', function() { return { require: ['^myTabs', '^ngModel'], restrict: 'E', transclude: true, scope: { title: '@' }, link: function(scope, element, attrs, controllers) { var tabsCtrl = controllers[0], modelCtrl = controllers[1];
tabsCtrl.addPane(scope); }, templateUrl: 'my-pane.html' };});
<my-pane></my-pane>
//Components&Databinding
PRESENT KNOWNPROBLEM
![Page 15: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/15.jpg)
//Components&Databinding
FUTURE
@ComponentDirective
Creates a custom component composed of a
view and a controller.
@DecoratorDirective
Decorates an existing HTML element with additional
behavior.
@TemplateDirective
Transforms HTML into a reusable template.
![Page 16: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/16.jpg)
@ComponentDirective({ selector:'tab-container', directives:[NgRepeat]})export class TabContainer { constructor(panes:Query<Pane>) { this.panes = panes; }
select(selectedPane:Pane) { //... }}
<template> <div class="border"> <div class="tabs"> <div [ng-repeat|pane]="panes"
class="tab" (^click)="select(pane)">
<img [src]=“pane.icon"> <span>${pane.name}</span>
</div> </div> <content></content> </div></template>
//Components&Databinding
@ComponentDirective
![Page 17: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/17.jpg)
@DecoratorDirective({ selector:'[ng-show]', bind: { 'ngShow': 'ngShow' }, observe: {'ngShow': 'ngShowChanged'}})export class NgShow { constructor(element:Element) { this.element = element; }
ngShowChanged(newValue){ if(newValue){ this.element.style.display = 'block'; }else{ this.element.style.display = 'none'; } }}
//Components&Databinding
@DecoratorDirective
![Page 18: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/18.jpg)
@TemplateDirective({ selector: '[ng-if]', bind: {'ngIf': 'ngIf'}, observe: {'ngIf': 'ngIfChanged'}})export class NgIf { constructor(viewFactory:BoundViewFactory, viewPort:ViewPort) { this.viewFactory = viewFactory; this.viewPort = viewPort; this.view = null; }
ngIfChanged(value) { if (!value && this.view) { this.view.remove(); this.view = null; }
if (value) { this.view = this.viewFactory.createView(); this.view.appendTo(this.viewPort); } }}
//Components&Databinding
@TemplateDirective
![Page 19: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/19.jpg)
The Router
![Page 20: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/20.jpg)
No flexibility.phonecatApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/phones', { templateUrl: 'partials/phone-list.html', controller: 'PhoneListCtrl' }). when('/phones/:phoneId', { templateUrl: 'partials/phone-detail.html', controller: 'PhoneDetailCtrl' }). otherwise({ redirectTo: '/phones' }); }]);
//TheRouter
PRESENT KNOWNPROBLEM
![Page 21: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/21.jpg)
?• Configuration/Conventions • 404 Handling • History Manipulation • Navigation Model • Document Title Updates • hashChange/pushState • Dynamic Loading • Child Apps • Screen Activation ◦TO: canActivate => activate ◦FROM: canDeactivate => deactivate
//TheRouter
PRESENT IMPLEMENTEDFEATURES
![Page 22: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/22.jpg)
What about structure,scaffolding, build,
testing, best practices?
![Page 23: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/23.jpg)
Nothing yet
:(
![Page 24: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/24.jpg)
Who is Allan Baptista?Contacts
![Page 25: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/25.jpg)
//Contacts
@m4n3z40
@NeverFunnyGuy
fb.me/allan.baptista
linkedin.com/in/allanbaptista
![Page 26: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/26.jpg)
Who is Allan Baptista?Sources
![Page 27: Angular 2.0 - What to expect](https://reader034.vdocuments.site/reader034/viewer/2022042907/58e79ce41a28ab847a8b4689/html5/thumbnails/27.jpg)
• http://eisenbergeffect.bluespire.com/all-about-angular-2-0/
• https://docs.google.com/document/d/1kpuR512G1b0D8egl9245OHaG0cFh0ST0ekhD_g8sxtI/edit?usp=sharing
• https://github.com/angular/angular/issues/133
• https://www.youtube.com/watch?v=h1P_Vh4gSQY
• https://www.youtube.com/watch?v=gNmWybAyBHI&list=UUEGUP3TJJfMsEM_1y8iviSQ
• https://www.youtube.com/watch?v=g-x1QKriY90&list=UUEGUP3TJJfMsEM_1y8iviSQ
//Sources