Angular 2.0 - What to Expect?

A talk from a GDG meeting at Rio de Janeiro, Brazil.

Transcript

1. Angular 2.0 What to expect?
2. Who is Allan Baptista?
3. Mobile Developer 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?
4. //WhoisAllanBaptista? Mobile Developer Hotel Urbano PHP HTML CSS JS Python Ruby NodeJS Mobile Platforms
5. Who is Allan Baptista? Why 2.0?
6. ANGULAR //Why2.0 THEWEBIS AT A RIDICULOUS changing PACE HASGOTTOKEEPUP ES6 ES7
7. WTF is atScript?
8. //WTFisatScript? ES6 Type annotations Field annotations Metadata annotations Type introspection + + + +
9. 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?
10. Dependency Injection
11. 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
12. 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; } } @TransientScope export class MyClass { ... } //DependencyInjection FUTURE ANDMORE
13. Components & Databinding
14. 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
15. //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.
16. @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
17. @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
18. @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
19. The Router
20. 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
21. ? • 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
22. What about structure, scaffolding, build, testing, best practices?
23. Nothing yet :(
24. Who is Allan Baptista? Contacts
25. //Contacts @m4n3z40 @NeverFunnyGuy fb.me/allan.baptista linkedin.com/in/allanbaptista allan.marques@ymail.com
26. Who is Allan Baptista? Sources
27. • 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