Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular 2.0 - What to Expect?
Search
Allan Marques Baptista
January 15, 2015
Programming
0
230
Angular 2.0 - What to Expect?
A talk from a GDG meeting at Rio de Janeiro, Brazil.
Allan Marques Baptista
January 15, 2015
Tweet
Share
More Decks by Allan Marques Baptista
See All by Allan Marques Baptista
Hybrid Apps - From web to mobile without pain
m4n3z40
0
45
Other Decks in Programming
See All in Programming
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
920
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
210
Milestoner
bkuhlmann
1
410
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
170
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Designing for tomorrow's programming workflows
honnibal
PRO
2
120
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
640
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
670
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
130
ONE WEDGE_company_guide
1wedge_one
0
430
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
The Power of CSS Pseudo Elements
geoffreycrofte
59
5k
4 Signs Your Business is Dying
shpigford
175
21k
Designing the Hi-DPI Web
ddemaree
276
33k
Statistics for Hackers
jakevdp
789
220k
Atom: Resistance is Futile
akmur
258
25k
Code Reviewing Like a Champion
maltzj
513
39k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
13
1.5k
Infographics Made Easy
chrislema
238
18k
Debugging Ruby Performance
tmm1
70
11k
Transcript
Angular 2.0 What to expect?
Who is Allan Baptista?
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?
//WhoisAllanBaptista? Mobile Developer Hotel Urbano PHP HTML CSS JS Python
Ruby NodeJS Mobile Platforms
Who is Allan Baptista? Why 2.0?
ANGULAR //Why2.0 THEWEBIS AT A RIDICULOUS changing PACE HASGOTTOKEEPUP ES6
ES7
WTF is atScript?
//WTFisatScript? ES6 Type 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; } } @TransientScope export 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
[email protected]
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