Angular ONE with ngMetadata

Angular 1 is dead, right? Long live Angular 2. Well, Not entirely! There are thousands of apps written in old good Angular 1. Also Angular 2 ecosystem is very small, because stable version was released 2 months ago. For sure you wanna migrate to Angular 2 or be prepared when the right time comes right? Typescript and es2015 will push you forward but not entirely, Angular 1 is still awkward to use with those "new" standards. Don't you worry, there is a solution and yes it has a name! ngMetadata

ngMetadata: https://github.com/ngParty/ng-metadata

Transcript

1. Angular ONE with ng-metadata
2. Strings I hate
3. Angular I like
4. angular .module('app', ['ui.router','ocLazyLoad']) .service('logger', ['$log', function LoggerService($log) {} ]) .filter('wat', function watFilter(){}) .directive('uhOh', function uhOhDirective(){ return { bindToController: { one: '<', two: '@', onThree: '&' } controller: class UhOhCtrl{ static $inject = ['$http']; constructor($http){ this.$http = $http } } } });
5. Strings
6. Martin Hochel @martin_hotell github.com/Hotell software engineer @embeditCZ typeof whoAmI
7. #devsUnited ngParty Prague, Czech Republic meetup.com/ngParty slack.ngparty.cz @ngPartyCZ
8. So what about those strings ?
10. @Component({ selector: 'my-uh-oh', }) class UhOhComponent { @Input() one; @Input() two; @Output() three = new EventEmitter(); } @NgModule({ declarations: [UhOhComponent] providers: [LoggerService] }) class AppModule{} Angular 2
11. Talk about Angular 1 ? What year is it ?
12. Just use Angular 2 dude!
14. There are hundreds ng 1 apps out there
15. Go Hybrid! via ngUpgrade
16. Sure
17. Introducing
18. My codebase <section id="todoapp"> <header id="header"> <h1>todos</h1> <form id="todo-form" ng-submit="addTodo()"> <input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" ng-disabled="saving" autofocus> </form> </header> <section id="main" ng-show="todos.length" ng-cloak> <input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)"> <label for="toggle-all">Mark all as complete</label> <ul id="todo-list"> <li ng-repeat="todo in todos | filter:statusFilter track by $index" ng-class="{completed: todo.completed, editing: todo == editedTodo}"> <div class="view"> <input class="toggle" type="checkbox" ng-model="todo.completed" ng-change="toggleCompleted(todo)"> <label ng-dblclick="editTodo(todo)">{{todo.title}}</label> <button class="destroy" ng-click="removeTodo(todo)"></button> </div> <form ng-submit="saveEdits(todo, 'submit')"> <input class="edit" ng-trim="false" ng-model="todo.title" todo-escape="revertEdits(todo)" ng-blur="saveEdits(todo, 'blur')" todo-focus="todo == editedTodo"> </form> </li> </ul> </section> <footer id="footer" ng-show="todos.length" ng-cloak> <span id="todo-count"><strong>{{remainingCount}}</strong> <ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize> </span> <ul id="filters"> <li> <a ng-class="{selected: status == ''} " href="#/">All</a> </li> <li> <a ng-class="{selected: status == 'active'}" href="#/active">Active</a> </li> <li>
19. Refactoring
20. component driven architecture
21. Smart / Dumb components http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html
22. ES 2015 http://ngmigrate.telerik.com
23. Refactored! export const TodoFormComponent = { bindings: { todo: '<', onAddTodo: '&' }, templateUrl, controller: class TodoFormComponent { static $inject = [‘eventEmitter’] constructor(EventEmitter) { this.EventEmitter = EventEmitter; } $onChanges(changes) { if (changes.todo) { this.todo = Object.assign({}, this.todo); } } onSubmit() { // without EventEmitter wrapper this.onAddTodo({ $event: { todo: this.todo } }); } } };
24. Strings anyone?
25. Now Go Hybrid!
26. Refactoring Refactoring
27. Hybrid app - downgraded ng2 component import { HeroDetailComponent } from './hero-detail.component'; import { downgradeComponent } from '@angular/upgrade/static'; angular.module('heroApp', []) .controller('MainController', MainController) .directive('heroDetail', downgradeComponent({ component: HeroDetailComponent, inputs: ['hero'], outputs: ['deleted'] }) as angular.IDirectiveFactory);
28. Hybrid app - upgraded ng1 service to ng2 @NgModule({ imports: [ BrowserModule, UpgradeModule ], providers: [{ provide: 'heroes', useFactory: (i: any) => i.get('heroes'), deps: ['$injector'] }], /* . . . */ }) export class AppModule { ngDoBootstrap() {} } @Component({ selector: 'hero-detail', template: ` <h2>{{hero.id}}: {{hero.name}}</h2> ` }) export class HeroDetailComponent { hero: Hero; constructor(@Inject('heroes') heroes) { this.hero = heroes.get()[0]; } }
29. but...
30. Did you notice? angular.module('heroApp', []) .controller('MainController', MainController) .directive('heroDetail', downgradeComponent({ component: HeroDetailComponent, inputs: ['hero'], outputs: ['deleted'] }) as angular.IDirectiveFactory); @NgModule({ providers: [{ provide: 'heroes', useFactory: (i: any) => i.get('heroes'), deps: ['$injector'] }], /* . . . */ }) export class AppModule { ngDoBootstrap() {} } @Component({...}) export class HeroDetailComponent { hero: Hero; constructor(@Inject('heroes') heroes) { this.hero = heroes.get()[0]; } }
31. Strings anyone?
32. So this talk is about strings or wot?
33. Angular 1 With ng-metadata
34. Angular 2 decorators and utils for Angular 1.x
35. ngMetadata Angular 1
38. Basic building blocks
39. @Component import { Component, EventEmitter, Input, Output } from 'ng-metadata/core'; import { Hero } from '../hero'; @Component({ selector: 'hero-detail', template: ` <h2>{{$ctrl.hero.name}} details!</h2> <div><label>id: </label>{{$ctrl.hero.id}}</div> <button ng-click="$ctrl.onDelete()">Delete</button> ` }) export class HeroDetailComponent { @Input() hero: Hero; @Output() deleted = new EventEmitter<Hero>(); onDelete() { this.deleted.emit(this.hero); } }
40. @Directive import { Directive, HostListener, Input, Inject, Output, EventEmitter } from 'ng-metadata/core'; @Directive({ selector: '[myHighlight]' }) export class HighlightDirective { @Input() set defaultColor(colorName: string){ this._defaultColor = colorName || this._defaultColor; } @Input('color') highlightColor: string; @Output() onColorClick = new EventEmitter<string>(); @HostListener('mouseenter') onMouseEnter() { this.highlight(this.highlightColor || this._defaultColor); } @HostListener('mouseleave') onMouseLeave() { this.highlight(null); } }
41. @Injectable import {Injectable} from 'ng-metadata/core' import { Hero } from './hero'; @Injectable() export class HeroesService { get() { return [ new Hero(1, 'Windstorm'), new Hero(2, 'Spiderman'), ]; } } import { Component,OnInit,HostBinding,Inject } from 'ng-metadata/core' @Component({ selector: 'my-heroes', template: `...` }) export class HeroesComponent implements OnInit { @HostBinding('attr.role') role = 'widget'; constructor( private heroesSvc: HeroesService, @Inject('$log') private $log: ng.ILogService ) {} ngOnInit(){ this.$log.log( this.heroesSvc.get() );
42. @Pipe import { Pipe } from 'ng-metadata/core'; @Pipe( { name:'uppercase' } ) class UppercasePipe{ transform( input: string):string{ return input.toUpperCase(); } }
43. Hierarchical/Local DI @Host @Self @SkipSelf @Optional
44. Querying for Children @ViewChild @ViewChildren @ContentChild @ContentChildren
45. Templates
46. <angular-berlin foo="user" bar="name" greet="hello()" ></angular-berlin>
47. <angular-berlin [(foo)]="user" [bar]="name" (greet)="hello()" ></angular-berlin>
48. registering to angular container
49. provide()
50. provide import {provide} from 'ng-metadata/core'; export const MyApp = angular.module( 'myApp', [] ) .directive( ...provide( MyCmp ) ) .directive( ...provide( MyAttr ) ) .filter( ...provide( UppercasePipe ) ) .service( ...provide( Greeter ) );
51. @NgModule
52. @NgModule import { NgModule } from 'ng-metadata/core'; @NgModule({ declarations: [ MyPipe, MyComponent ], providers: [ MyService ], imports: [ MyCommonModule, ThirdPartyModule, ‘ui.router’ ] }) export class MyModule {}
53. bootstrap
54. bootstrap // main.ts import { platformBrowserDynamic } from 'ng-metadata/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule( AppModule );
55. Other super powers
56. Async pipe
57. Title service
58. ChangeDetectorRef
59. ChangeDetectionStrategy.OnPush Within @Component
60. Testing Utils
61. What about Hybrid?
62. Use ngUpgrade with ngMetadata
63. ngMetadata entity Angular 2 entity Upgrade (search and replace) Downgrade (via ngUpgrade)
64. ngMetadata @Component import { Component, EventEmitter, Input, Output } from 'ng-metadata/core'; import { Hero } from '../hero'; @Component({ selector: 'hero-detail', template: ` <h2>{{$ctrl.hero.name}} details!</h2> <div><label>id: </label>{{$ctrl.hero.id}}</div> <button ng-click="$ctrl.onDelete()">Delete</button> ` }) export class HeroDetailComponent { @Input() hero: Hero; @Output() deleted = new EventEmitter<Hero>(); onDelete() { this.deleted.emit(this.hero); } }
65. Upgrade to ng2 @Component import { Component, EventEmitter, Input, Output } from '@angular/core'; import { Hero } from '../hero'; @Component({ selector: 'hero-detail', template: ` <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <button (click)="onDelete()">Delete</button> ` }) export class HeroDetailComponent { @Input() hero: Hero; @Output() deleted = new EventEmitter<Hero>(); onDelete() { this.deleted.emit(this.hero); } } ‘ng-metadata/core’ => ‘@angular/core’ ng-* => (*) or [ * ] $ctrl.* => *
66. ngMetadata @NgModule import { NgModule } from 'ng-metadata/core'; import { HeroDetailComponent } from './hero-detail.component'; @NgModule({ declarations:[ HeroDetailComponent ] }) export class AppModule {};
67. Downgrade so it works with ng1 @Component import { downgradeComponent } from '@angular/upgrade/static/'; import { provideNg2Component } from 'ng-metadata/upgrade'; import { NgModule } from 'ng-metadata/core'; import { HeroDetailComponent } from './hero-detail.component'; @NgModule({ declarations:[ provideNg2Component({ component: HeroDetailComponent, downgradeFn:downgradeComponent }) ] }) export class AppModule {};
68. Strings!
69. And much more!
70. Payload: ~22kb minified+gzip
71. Angular 2 ecosystem with ng1 (ngMetadata) Angular 2 style guides RxJs Codelyzer ngRedux
72. Play with it/use it right now! Plunker Starter Kit
73. Demo ?
74. https://github.com/ngParty/ng-metadata
75. ThankZ ! https://github.com/ngParty/ng-metadata