Download - Angular2 - In Action
![Page 1: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/1.jpg)
Angular 2IN ACTION
![Page 2: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/2.jpg)
NG2 INTRODUCTION
Part 2
![Page 4: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/4.jpg)
TSD
![Page 5: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/5.jpg)
TSD
npm install tsd -g
tsd install angular2/angular2 angular2/router rx es6-promise
![Page 6: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/6.jpg)
TSC
tsc app.ts --target ES5
--module system --experimentalDecorators
--moduleResolution node
--emitDecoratorMetadata
--outFile app.js
![Page 7: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/7.jpg)
Start
![Page 8: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/8.jpg)
HTML
<!doctype html><html lang="en">
<body><my-app></my-app><script src="js/bundle.js"></script>
</body></html>
![Page 9: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/9.jpg)
APP.TS - IMPORTS
/// <reference path="../../typings/tsd.d.ts" />
import {Component, View, bootstrap, CORE_DIRECTIVES, FORM_DIRECTIVES, provide
} from 'angular2/angular2';
//...
![Page 10: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/10.jpg)
APP.TS - COMPONENT
@Component({selector: 'my-app',template: APP_TEMPLATE,directives: [HeaderComponent,
ROUTER_DIRECTIVES],provides: [PostsStorage, Core]
})
class AppComponent {}
![Page 11: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/11.jpg)
APP.TS - BOOTSTRAP
bootstrap(AppComponent, [// CommonPostsStorage,Core,
// Ng2ROUTER_PROVIDERS,HTTP_PROVIDERS,provide(APP_BASE_HREF, {useValue: '/'})
]);
![Page 12: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/12.jpg)
Templates
![Page 13: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/13.jpg)
TEMPLATES - IMPORT
import {
APP_TEMPLATE
} from './templates';
![Page 14: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/14.jpg)
TEMPLATES - EXAMPLE COMPONENT
class AppComponent { text:string = 'hello';
typing($event){
this.text = $event.target.value;
}
}
![Page 15: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/15.jpg)
TEMPLATES - CODE
<h1>Bound Textbox</h1>
<input [value]="text" (keyup)="typing($event)" />
{{text}}
![Page 16: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/16.jpg)
TEMPLATES - SYNTAX
<todo-cmp [model]="my_value"></todo-cmp>
<input [ng-model]="todo.text"(ng-model-change)="todo.text=$event"
></input>
<input [(ng-model)]="todo.text"></input>
![Page 17: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/17.jpg)
TEMPLATES - SYNTAX
<video-player #player></video-player>
<button (click)="player.pause()">Pause
</button>
<input #i> {{i.value}}
![Page 18: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/18.jpg)
PIPE
![Page 19: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/19.jpg)
PIPE - USAGE
@Pipe({name: 'publicName'
})
class ClassPipeName implements PipeTransform {
transform(value: number, args: any[]) {//…
}
}
![Page 20: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/20.jpg)
PIPE - USAGE
@Pipe({name: 'publicName'
})
class ClassPipeName implements PipeTransform {
transform(value: number, args: any[]) {//…
}
}
![Page 21: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/21.jpg)
Routing
![Page 22: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/22.jpg)
ROUTING - @RouteConfig
import {AboutComponent
} from './components/about/index';
@RouteConfig([{path: '/About/:id',component: AboutComponent,name: 'About'
}])
class AppComponent {}
![Page 23: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/23.jpg)
ROUTING - @RouteConfig
export class AboutComponent { id: number;
constructor( @Inject(RouteParams) params: RouteParams) {
this.id = params.get('id');
}}
![Page 24: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/24.jpg)
ROUTING - TEMPLATE
<nav><ul>
<a [router-link]="['./About', {id: 1}]" href="#" class="list-group-item">About</a>
<a [router-link]="['./Home']" href="#" class="list-group-item">Home</a>
<a [router-link]="['./PostsList']" href="#" class="list-group-item">Posts list</a>
</ul></nav>
<route-transclusion name="main"></route-transclusion>
![Page 25: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/25.jpg)
LINKS
react / angular / angular2
ng-conf
● https://github.com/htdt/ng2-jspm● https://github.com/thelgevold/angular-2-samples● http://www.syntaxsuccess.com/angular-2-articles●
![Page 26: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/26.jpg)
BUILDING / COMPILE / TRANSCRIPTION
Part 2
![Page 27: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/27.jpg)
Browserify
![Page 28: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/28.jpg)
ROUTING - TEMPLATE
var browserify = require('gulp-browserify');
gulp.src('build/ts/app/app.js')
.pipe(browserify({insertGlobals : true,debug : !gulp.env.production
}))
.pipe(gulp.dest('./dist/app'))
![Page 29: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/29.jpg)
NO
![Page 30: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/30.jpg)
JSPM
![Page 31: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/31.jpg)
JSMP
“jspm is a package manager for the SystemJS universal module loader, built on top of the dynamic ES6 module loader”
React applications with JSPM
![Page 32: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/32.jpg)
JSMP
● ES6, AMD, CommonJS and globals) ● npm and GitHub...● load modules as separate files● optimize into a bundle● realtime transcript
![Page 33: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/33.jpg)
System.js
![Page 34: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/34.jpg)
SYSTEM.JS - PRODUCTION
npm install -g jspm
jspm init
jspm install angular2/angular2
jspm bundle-sfx --minify zone.js + whatwg-fetch + reflect-metadata + src/app/app dist/js/bundle.js
![Page 35: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/35.jpg)
SYSTEM.JS - DEVELOPMENT
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>System.import('reflect-metadata')
.then(function(){System.import('zone.js')})
// .then(function(){System.import('es5-shim')}) <- LOL
.then(function(){System.import('es6-shim')})
.then(function(){System.import('whatwg-fetch')})
.then(function(){System.import('src/app/app')});</script>
![Page 36: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/36.jpg)
SYSTEM.JS - PRODUCTION
<!doctype html><html lang="en">
<body><my-app></my-app><script src="js/bundle.js"></script>
</body></html>
![Page 37: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/37.jpg)
Gulp
![Page 38: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/38.jpg)
GULP - TEMPLATESvar ng2Template = "export const <%= template.url %> = '<%= template.escapedContent %>';\n";
function fnRename(templateUrl, templateFile) {var pathParts = templateUrl.replace('.tpl.html', '').split('/'),
folder = pathParts[pathParts.length - 2],file = pathParts[pathParts.length - 1],name = (folder ? folder + '_' : '') + file + '_TEMPLATE';return name.toUpperCase().replace(/-[\.\-]/g,
function (match) {return '_';
});}
}
/*...*/.pipe(ngHtml2Js({rename: fnRename,template: ng2Template
})
![Page 39: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/39.jpg)
PRERENDER
Part 3
![Page 40: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/40.jpg)
Metadata
![Page 41: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/41.jpg)
Metadata - HTML
<!doctype html><html lang="en">
<head><title>{{ no.work.here }}</title>
<head><body>
<my-app></my-app><script src="js/bundle.js"></script>
</body></html>
![Page 42: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/42.jpg)
METADATA - SERVICE
export class HeadDOM {private titleDom:HTMLElement;
get title():string {return this.titleDom.innerText;
}
set title(title:string) {this.titleDom.innerText = title;this.ogTitle = title;
}
//…}
![Page 43: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/43.jpg)
Prerender.io
![Page 44: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/44.jpg)
PRERENDER.IO - COST
![Page 45: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/45.jpg)
PRERENDER.IO - GITHUB
https://github.com/prerender/prerender
![Page 46: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/46.jpg)
Webrender-service
![Page 47: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/47.jpg)
Webrender-service - Overview
● (+) Render png file● (+) Render pdf file● (+) Render html file● (+) No-overwrite js functions● (+) Servers whitelist● (+) Token security● (-) Legacy code● (-) Small community● (-) No-good tested● (-) Use node-babel● (-) Alpha
![Page 48: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/48.jpg)
Webrender-service - Todo
● Remove babel (problems with debugging)● Write unit tests● Remove cache (I recommend to use solution like varnish)
![Page 49: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/49.jpg)
WEBRENDER SERVICE (ALPHA) - GITHUB
https://bitbucket.org/spozoga/webrender-service
![Page 50: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/50.jpg)
PhantomJS
![Page 51: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/51.jpg)
PhantomJS - Error #1
Map is a pretty new structure. Use npm install harmony-collections --save-dev and add "node_modules/harmony-collections/harmony-collections.min.js", to the karma config.
![Page 52: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/52.jpg)
PhantomJS - Error #2
ORIGINAL EXCEPTION: TypeError: 'undefined' is not a function (evaluating 'window.requestAnimationFrame(callback)')
![Page 53: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/53.jpg)
PhantomJS - Error #3
RangeError: Maximum call stack size exceeded.
at quote (/Users/spozoga/dev/prerender/node_modules/phantom/shim.js:1065)
………..
![Page 54: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/54.jpg)
DevOps
![Page 55: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/55.jpg)
VARNISH
![Page 56: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/56.jpg)
PRERENDER.IO - GITHUB
https://github.com/prerender/prerender
![Page 57: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/57.jpg)
PRERENDER-VARNISH - GITHUB
https://github.com/MWers/prerender-varnish
![Page 58: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/58.jpg)
The end
![Page 59: Angular2 - In Action](https://reader033.vdocuments.net/reader033/viewer/2022050613/58a450741a28ab55068b523d/html5/thumbnails/59.jpg)
Sebastian Poż[email protected]