Download as PDF, PPTX
![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/75/Angular2-In-Action-10-2048.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/75/Angular2-In-Action-11-2048.jpg)
![TEMPLATES - CODE
<h1>Bound Textbox</h1>
<input
[value]="text"
(keyup)="typing($event)" />
{{text}}](https://image.slidesharecdn.com/angular2-wakcji-151210211940/75/Angular2-In-Action-15-2048.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/75/Angular2-In-Action-16-2048.jpg)
![PIPE - USAGE
@Pipe({
name: 'publicName'
})
class ClassPipeName implements PipeTransform {
transform(value: number, args: any[]) {
//…
}
}](https://image.slidesharecdn.com/angular2-wakcji-151210211940/75/Angular2-In-Action-19-2048.jpg)
![PIPE - USAGE
@Pipe({
name: 'publicName'
})
class ClassPipeName implements PipeTransform {
transform(value: number, args: any[]) {
//…
}
}](https://image.slidesharecdn.com/angular2-wakcji-151210211940/75/Angular2-In-Action-20-2048.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/75/Angular2-In-Action-22-2048.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/75/Angular2-In-Action-24-2048.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/75/Angular2-In-Action-38-2048.jpg)
Uploaded bySebastian Pożoga
Angular2 - In Action
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.
More Related Content
![Elefrant [ng-Poznan]](https://cdn.slidesharecdn.com/ss_thumbnails/elefrant-140912080922-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Angular2 - In Action
- 1.
- 2.
- 4.
- 5. TSD npm install tsd-g tsd install angular2/angular2 angular2/router rx es6-promise
- 6. TSC tsc app.ts --targetES5 --module system --experimentalDecorators --moduleResolution node --emitDecoratorMetadata --outFile app.js
- 7.
- 8. HTML <!doctype html> <html lang="en"> <body> <my-app></my-app> <scriptsrc="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.
- 13. TEMPLATES - IMPORT import{ APP_TEMPLATE } from './templates';
- 14. TEMPLATES - EXAMPLECOMPONENT class AppComponent { text:string = 'hello'; typing($event){ this.text = $event.target.value; } }
- 15. TEMPLATES - CODE <h1>BoundTextbox</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.
- 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.
- 22. ROUTING - @RouteConfig import{ AboutComponent } from './components/about/index'; @RouteConfig([{ path: '/About/:id', component: AboutComponent, name: 'About' }]) class AppComponent {}
- 23. ROUTING - @RouteConfig exportclass 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.
- 28. ROUTING - TEMPLATE varbrowserify = require('gulp-browserify'); gulp.src('build/ts/app/app.js') .pipe(browserify({ insertGlobals : true, debug : !gulp.env.production })) .pipe(gulp.dest('./dist/app'))
- 29.
- 30.
- 31. JSMP “jspm is apackage 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.
- 34. SYSTEM.JS - PRODUCTION npminstall -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 <scriptsrc="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 <!doctypehtml> <html lang="en"> <body> <my-app></my-app> <script src="js/bundle.js"></script> </body> </html>
- 37.
- 38. GULP - TEMPLATES varng2Template = "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.
- 40.
- 41. Metadata - HTML <!doctypehtml> <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 exportclass HeadDOM { private titleDom:HTMLElement; get title():string { return this.titleDom.innerText; } set title(title:string) { this.titleDom.innerText = title; this.ogTitle = title; } //… }
- 43.
- 44.
- 45.
- 46.
- 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.
- 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.
- 55.
- 56.
- 57.
- 58.
- 59.