Angular 2.0What to expect?

Who is Allan Baptista?

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?

//WhoisAllanBaptista?

MobileDeveloper

Hotel UrbanoPHP HTML

CSS

JS

Python

Ruby

NodeJS

MobilePlatforms

Who is Allan Baptista?Why 2.0?

ANGULAR

//Why2.0

THEWEBISAT A RIDICULOUSchanging

PACE

HASGOTTOKEEPUP

ES6 ES7

WTF is atScript?

//WTFisatScript?

ES6Type annotations

Field annotations

Metadata annotations

Type introspection

+

+

+

+

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?

Dependency Injection

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

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

Components & Databinding

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

//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.

@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

@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

@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

The Router

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

?• 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

What about structure,scaffolding, build,

testing, best practices?

Nothing yet

:(

Who is Allan Baptista?Contacts

//Contacts

@m4n3z40

@NeverFunnyGuy

fb.me/allan.baptista

linkedin.com/in/allanbaptista

allan.marques@ymail.com

Who is Allan Baptista?Sources

• 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