Angular2 - In Action
5 likes3,535 views
The document provides an extensive overview of using Angular 2, including setting up applications, routes, templates, and handling modules with tools like JSPM and Browserify. It details code snippets, component configuration, and application bootstrap procedures, alongside metadata and rendering techniques. Additionally, it discusses debugging issues related to PhantomJS and performance optimization with tools like Varnish.
![APP.TS - COMPONENT
@Component({
selector: 'my-app',
template: APP_TEMPLATE,
directives: [HeaderComponent,
ROUTER_DIRECTIVES],
provides: [PostsStorage, Core]
})
class AppComponent {}](https://image.slidesharecdn.com/angular2-wakcji-151210211940/85/Angular2-In-Action-10-320.jpg)
![APP.TS - BOOTSTRAP
bootstrap(AppComponent, [
// Common
PostsStorage,
Core,
// Ng2
ROUTER_PROVIDERS,
HTTP_PROVIDERS,
provide(APP_BASE_HREF, {useValue: '/'})
]);](https://image.slidesharecdn.com/angular2-wakcji-151210211940/85/Angular2-In-Action-11-320.jpg)
![TEMPLATES - CODE
<h1>Bound Textbox</h1>
<input
[value]="text"
(keyup)="typing($event)" />
{{text}}](https://image.slidesharecdn.com/angular2-wakcji-151210211940/85/Angular2-In-Action-15-320.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>](https://image.slidesharecdn.com/angular2-wakcji-151210211940/85/Angular2-In-Action-16-320.jpg)
![PIPE - USAGE
@Pipe({
name: 'publicName'
})
class ClassPipeName implements PipeTransform {
transform(value: number, args: any[]) {
//…
}
}](https://image.slidesharecdn.com/angular2-wakcji-151210211940/85/Angular2-In-Action-19-320.jpg)
![PIPE - USAGE
@Pipe({
name: 'publicName'
})
class ClassPipeName implements PipeTransform {
transform(value: number, args: any[]) {
//…
}
}](https://image.slidesharecdn.com/angular2-wakcji-151210211940/85/Angular2-In-Action-20-320.jpg)
![ROUTING - @RouteConfig
import {
AboutComponent
} from './components/about/index';
@RouteConfig([{
path: '/About/:id',
component: AboutComponent,
name: 'About'
}])
class AppComponent {}](https://image.slidesharecdn.com/angular2-wakcji-151210211940/85/Angular2-In-Action-22-320.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>](https://image.slidesharecdn.com/angular2-wakcji-151210211940/85/Angular2-In-Action-24-320.jpg)
![GULP - TEMPLATES
var 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
})](https://image.slidesharecdn.com/angular2-wakcji-151210211940/85/Angular2-In-Action-38-320.jpg)
Angular2 - In Action
- 4. TSD
- 5. TSD npm install tsd -g tsd install angular2/angular2 angular2/router rx es6-promise
- 6. TSC tsc app.ts --target ES5 --module system --experimentalDecorators --moduleResolution node --emitDecoratorMetadata --outFile app.js
- 7. Start
- 8. HTML <!doctype html> <html lang="en"> <body> <my-app></my-app> <script src="js/bundle.js"></script> </body> </html>
- 9. APP.TS - IMPORTS /// <reference path="../../typings/tsd.d.ts" /> import { Component, View, bootstrap, CORE_DIRECTIVES, FORM_DIRECTIVES, provide } from 'angular2/angular2'; //...
- 10. APP.TS - COMPONENT @Component({ selector: 'my-app', template: APP_TEMPLATE, directives: [HeaderComponent, ROUTER_DIRECTIVES], provides: [PostsStorage, Core] }) class AppComponent {}
- 11. APP.TS - BOOTSTRAP bootstrap(AppComponent, [ // Common PostsStorage, Core, // Ng2 ROUTER_PROVIDERS, HTTP_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'}) ]);
- 12. Templates
- 13. TEMPLATES - IMPORT import { APP_TEMPLATE } from './templates';
- 14. TEMPLATES - EXAMPLE COMPONENT class AppComponent { text:string = 'hello'; typing($event){ this.text = $event.target.value; } }
- 15. TEMPLATES - CODE <h1>Bound Textbox</h1> <input [value]="text" (keyup)="typing($event)" /> {{text}}
- 16. 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>
- 17. TEMPLATES - SYNTAX <video-player #player></video-player> <button (click)="player.pause()"> Pause </button> <input #i> {{i.value}}
- 18. PIPE
- 19. PIPE - USAGE @Pipe({ name: 'publicName' }) class ClassPipeName implements PipeTransform { transform(value: number, args: any[]) { //… } }
- 20. PIPE - USAGE @Pipe({ name: 'publicName' }) class ClassPipeName implements PipeTransform { transform(value: number, args: any[]) { //… } }
- 21. Routing
- 22. ROUTING - @RouteConfig import { AboutComponent } from './components/about/index'; @RouteConfig([{ path: '/About/:id', component: AboutComponent, name: 'About' }]) class AppComponent {}
- 23. ROUTING - @RouteConfig export class AboutComponent { id: number; constructor( @Inject(RouteParams) params: RouteParams) { this.id = params.get('id'); } }
- 24. 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>
- 25. 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 ●
- 26. BUILDING / COMPILE / TRANSCRIPTION Part 2
- 27. Browserify
- 28. 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'))
- 29. NO
- 30. JSPM
- 31. 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
- 32. JSMP ● ES6, AMD, CommonJS and globals) ● npm and GitHub... ● load modules as separate files ● optimize into a bundle ● realtime transcript
- 33. System.js
- 34. 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
- 35. 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>
- 36. SYSTEM.JS - PRODUCTION <!doctype html> <html lang="en"> <body> <my-app></my-app> <script src="js/bundle.js"></script> </body> </html>
- 37. Gulp
- 38. GULP - TEMPLATES var 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 })
- 39. PRERENDER Part 3
- 40. Metadata
- 41. 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>
- 42. 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; } //… }
- 43. Prerender.io
- 47. 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
- 48. Webrender-service - Todo ● Remove babel (problems with debugging) ● Write unit tests ● Remove cache (I recommend to use solution like varnish)
- 49. WEBRENDER SERVICE (ALPHA) - GITHUB https://bitbucket.org/spozoga/webrender-service
- 50. PhantomJS
- 51. 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.
- 52. PhantomJS - Error #2 ORIGINAL EXCEPTION: TypeError: 'undefined' is not a function (evaluating 'window.requestAnimationFrame(callback)')
- 53. PhantomJS - Error #3 RangeError: Maximum call stack size exceeded. at quote (/Users/spozoga/dev/prerender/node_modules/phantom/shim.js: 1065) ………..
- 54. DevOps
- 55. VARNISH
- 58. The end