Squashed commit of the following:
commit17c7e15467Author: Filipe Silva <filipematossilva@gmail.com> Date: Mon Nov 14 23:11:37 2016 +0000 chore: update to 2.2.0 (#2797) commit1e5facfb98Merge:5c4cc9adb0fac9Author: Ward Bell <wardbell@hotmail.com> Date: Mon Nov 14 12:44:51 2016 -0800 Merge pull request #2799 from IdeaBlade/docs-changelog-2.2.0 chore(changelog): update docs changelog for Ng v.2.2.0 commit5c4cc9a3c8Merge:43457e91afe5dcAuthor: Ward Bell <wardbell@hotmail.com> Date: Mon Nov 14 12:43:09 2016 -0800 docs(router): Updated usage of observables in router tutorial and developer guide (#2696) Moved route configuration into separate variable for consistency Added async pipe to handle subscriptions for list items commit43457e9765Merge:a423a5a2649647Author: Jesús Rodríguez <Foxandxss@gmail.com> Date: Mon Nov 14 21:38:49 2016 +0100 chore: add upgrade/static to API reference (#2755) commit1afe5dc97dAuthor: Brandon Roberts <robertsbt@gmail.com> Date: Sat Oct 29 16:08:54 2016 -0500 docs(router): Updated usage of observables in router tutorial and developer guide Moved route configuration into separate variable for consistency Added async pipe to handle subscriptions for list items commitdb0fac94c9Author: Ward Bell <wardbell@hotmail.com> Date: Mon Nov 14 10:48:09 2016 -0800 chore(changelog): update docs changelog for Ng v.2.2.0 commita423a5abc7Author: ikilled <ikilled@users.noreply.github.com> Date: Mon Nov 14 18:39:46 2016 +0000 clicking on Books & Training sends user to Education (#2701) When user clicks in Books & Training item in footer the website should take them to Education section (anchor) in the middle of the page, not to the top where Development section is. commitd63b1ccea3Merge:f6277068508140Author: Ward Bell <wardbell@hotmail.com> Date: Mon Nov 14 10:35:48 2016 -0800 docs(router): fixed verbiage about router-outlet (#2746) commitf627706779Author: Ward Bell <wardbell@hotmail.com> Date: Mon Nov 14 10:26:13 2016 -0800 docs(cookbook-aot-compiler): improve Ahead-of-Time compilation cookbook (#2798) closes #2790 commit75464d585cMerge:78e258402f5559Author: Ward Bell <wardbell@hotmail.com> Date: Mon Nov 14 09:34:36 2016 -0800 Merge pull request #2794 from IdeaBlade/chalin-guide-misc-fix-1113 docs: guide/index misc Jade fixes commit78e25840b2Merge:182493f85062c4Author: Ward Bell <wardbell@hotmail.com> Date: Mon Nov 14 09:33:55 2016 -0800 Merge pull request #2795 from IdeaBlade/chalin-util-js-getExampleName-1114 chore(util.js): getExampleName - support optional .html suffix commit182493f877Merge:9e9666b53f5538Author: Ward Bell <wardbell@hotmail.com> Date: Mon Nov 14 09:28:40 2016 -0800 feat(cb-ts-to-js): add es6 examples (#2606) * feat(cb-ts-to-js): add es6 examples update docshredder to shred .es6 optimized focus gulp task convert imports and metadate sections add DI section add host and query metadata section add intro fix capitalization and grammar * docs(ts-to-js): ward's edits (incomplete) * docs(ts-to-js): add separate template files for some components * docs(cb-ts-to-js): refactor sample code commit53f5538859Author: Ward Bell <wardbell@hotmail.com> Date: Sun Nov 13 14:09:28 2016 -0800 docs(cb-ts-to-js): refactor sample code commit9e9666b2ccAuthor: Patrice Chalin <chalin@users.noreply.github.com> Date: Mon Nov 14 08:34:10 2016 -0800 docs(template-syntax/dart): updates to match TS (#2751) * docs(template-syntax): refresh _cache * docs(template-syntax/dart): updates to match TS - Propagates TS-side changes: - update #2639 - new two-way binding section, and - fix #2687 - invalid attr syntax - Fixes - #1898 - currency symbols - #2748 - Dart template-syntax e2e is failing - #2749 - deprecated `[className]` * updated _cache file following Kathy's post-review edits * Post Ward's review w/ cache updated - Keep `my-` and `my` prefixes on selectors (for components and directives, respectively). - Drop `my-` from file names. - Drop `My` as component class prefix. commit5dcffd69dcAuthor: Patrice Chalin <pchalin@gmail.com> Date: Sun Nov 13 19:37:13 2016 -0800 docs: dart glossary - fix misnamed Jade block commit6680acc513Merge:14db8383b03573Author: Kathy Walrath <kathyw@google.com> Date: Mon Nov 14 08:31:11 2016 -0800 docs(toh): avoid dup header title (#2796) * remove redundant headings * update _cache * misc: make block comment a Jade comment (This prevents the text from appearing in the generated HTML as an HTML comment.) commit3b03573f34Author: Patrice Chalin <pchalin@gmail.com> Date: Mon Nov 14 05:30:05 2016 -0800 misc: make block comment a Jade comment (This prevents the text from appearing in the generated HTML as an HTML comment.) commit470426d5e0Author: Patrice Chalin <pchalin@gmail.com> Date: Mon Nov 14 05:25:36 2016 -0800 update _cache commitc12d75a477Author: Patrice Chalin <pchalin@gmail.com> Date: Mon Nov 14 05:23:35 2016 -0800 remove redundant headings commit85062c47caAuthor: Patrice Chalin <pchalin@gmail.com> Date: Mon Nov 14 04:56:12 2016 -0800 chore(util.js): getExampleName - support optional .html suffix commit02f55592b2Author: Patrice Chalin <pchalin@gmail.com> Date: Mon Nov 14 04:29:17 2016 -0800 docs: guide/index misc Jade fixes - Eliminate use of deprecated `clear=“all”` in `<br>`. - No need for local `langName`; use global `_Lang` var instead. - Remove duplicate id `learning-path`. commit14db838f8bAuthor: Naomi Black <naomitraveller@gmail.com> Date: Sun Nov 13 21:48:52 2016 -0500 news(nov): Some news and a blog post update commiteff32ecbddAuthor: Naomi Black <naomitraveller@gmail.com> Date: Sun Nov 13 21:48:37 2016 -0500 chore(bios): update some bios for leads commit3ee36fbba2Author: koyner <markburrett@gmail.com> Date: Sun Nov 13 22:59:59 2016 +0100 docs(forms): grammar fix (#2764) commitb11438f211Author: Ward Bell <wardbell@hotmail.com> Date: Fri Nov 11 19:44:00 2016 -0800 docs(ts-to-js): add separate template files for some components commit33b61977b2Author: Ward Bell <wardbell@hotmail.com> Date: Thu Nov 3 01:37:55 2016 -0700 docs(ts-to-js): ward's edits (incomplete) commit12eb19fa3cAuthor: Filipe Silva <filipematossilva@gmail.com> Date: Thu Oct 13 17:59:00 2016 +0100 feat(cb-ts-to-js): add es6 examples update docshredder to shred .es6 optimized focus gulp task convert imports and metadate sections add DI section add host and query metadata section add intro fix capitalization and grammar commit64a8754386Author: Patrice Chalin <chalin@users.noreply.github.com> Date: Thu Nov 10 20:01:36 2016 -0800 example(template-syntax): follow style-guide and other updates (#2750) commit7619cdf4a4Author: Jesús Rodríguez <Foxandxss@gmail.com> Date: Thu Nov 10 23:47:30 2016 +0100 chore: ability to open a plunker on a specific file (#2778) commit0161d9db39Author: Filipe Silva <filipematossilva@gmail.com> Date: Thu Nov 10 22:45:22 2016 +0000 chore: ignore debug.log file (#2785) This file is generated when running `gulp e2e` and often enough committed by mistake. /cc @foxandxss commitf92983cc6fAuthor: Jesús Rodríguez <Foxandxss@gmail.com> Date: Thu Nov 10 23:44:51 2016 +0100 docs(ngmodule): fix plunkers (#2786) commit03db4bbc48Author: Martin Eckardt <m.eckardt@outlook.com> Date: Wed Nov 9 17:43:40 2016 +0100 docs(a1-a2): fix link to Filter/Pipes (#2770) commit60565a5cf1Author: Pavol Pitonak <pavol@pitonak.com> Date: Wed Nov 9 17:42:57 2016 +0100 docs(testing): configureTestModule -> configureTestingModule (#2767) commitec471974a7Author: Catalin Zalog <xxxxxcata@yahoo.com> Date: Wed Nov 9 18:41:56 2016 +0200 docs(style-guide): fix missing *.ts (#2763) commit234e468d5dAuthor: Patrice Chalin <pchalin@gmail.com> Date: Tue Nov 8 08:21:02 2016 -0800 docs: intra-site links should be relative Contributes to #2772. commit6b37da78e4Author: Patrice Chalin <pchalin@gmail.com> Date: Tue Nov 8 09:27:10 2016 -0800 docs(forms/dart): remove mention of FORM_DIRECTIVES Fixes #2752 commitc24dd074a6Author: Patrice Chalin <chalin@users.noreply.github.com> Date: Tue Nov 8 14:48:03 2016 -0800 docs(toh-5/dart): use routerLink in dashboard (#2744) * docs(toh-5/dart): use routerLink in dashboard * minor edits to TS jade * remove dart/toh-pt5 from bad-code-excerpt-skip-patterns commit2808878c36Author: Patrice Chalin <pchalin@gmail.com> Date: Tue Nov 8 07:41:27 2016 -0800 chore(deploy): don't name project in firebase deploy Naming the project would sometimes cause gulp to report `An unexpected error has occurred` with exit code 2. commit2649647ecbAuthor: Jesus Rodriguez <Foxandxss@gmail.com> Date: Sat Nov 5 00:37:47 2016 +0100 chore: add upgrade/static to API reference commit850814097fMerge:37f93bcb1c2c27Author: Adrian Irwin <mr.irwin@gmail.com> Date: Thu Nov 3 17:27:43 2016 -0700 Merge branch 'router' of https://github.com/adrianirwin/angular.io into router commit37f93bc0cbAuthor: Adrian Irwin <mr.irwin@gmail.com> Date: Thu Nov 3 17:25:55 2016 -0700 docs(router): fixed verbiage and example of how routed views are related to the router outlet commitb1c2c27d36Author: Adrian Irwin <adrianirwin@kpmg.com> Date: Thu Nov 3 16:57:56 2016 -0700 docs(router): fixed verbiage and example of how routed views are related to the router outlet
This commit is contained in:
Filipe Silva
parent
5fa0b69066
commit
eb60bfe20e
|
|
@ -22,6 +22,7 @@ public/docs/xref-*.*
|
|||
_zip-output
|
||||
www*
|
||||
npm-debug*.log*
|
||||
**/debug.log
|
||||
*.plnkr.html
|
||||
plnkr.html
|
||||
*.eplnkr.html
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ env:
|
|||
- DBUS_SESSION_BUS_ADDRESS=/dev/null
|
||||
- DISPLAY=:99.0
|
||||
- CHROME_BIN=chromium-browser
|
||||
- LATEST_RELEASE=2.1.1
|
||||
- LATEST_RELEASE=2.2.0
|
||||
- TASK_FLAGS="--dgeni-log=warn"
|
||||
matrix:
|
||||
- TASK=lint
|
||||
|
|
|
|||
13
gulpfile.js
13
gulpfile.js
|
|
@ -247,15 +247,16 @@ function findAndRunE2eTests(filter, outputFile) {
|
|||
e2eSpecPaths.forEach(function(specPath) {
|
||||
// get all of the examples under each dir where a pcFilename is found
|
||||
localExamplePaths = getExamplePaths(specPath, true);
|
||||
// Filter by language
|
||||
localExamplePaths = localExamplePaths.filter(function (fn) {
|
||||
return fn.match('/'+lang+'$') != null;
|
||||
});
|
||||
// Filter by example name
|
||||
if (filter) {
|
||||
localExamplePaths = localExamplePaths.filter(function (fn) {
|
||||
return fn.match(filter) != null;
|
||||
})
|
||||
}
|
||||
// Filter by language, also supports variations like js-es6
|
||||
localExamplePaths = localExamplePaths.filter(function (fn) {
|
||||
return fn.match('/'+lang+'(?:-[^/]*)?$') != null;
|
||||
});
|
||||
localExamplePaths.forEach(function(examplePath) {
|
||||
examplePaths.push(examplePath);
|
||||
})
|
||||
|
|
@ -754,7 +755,7 @@ gulp.task('check-deploy', ['firebase-use-proj-check', 'build-docs'], () => {
|
|||
}).then(function(shouldDeploy) {
|
||||
if (shouldDeploy) {
|
||||
gutil.log('deploying...');
|
||||
return execPromise(`firebase deploy -p ${WWW}`);
|
||||
return execPromise('firebase deploy');
|
||||
} else {
|
||||
return ['Not deploying'];
|
||||
}
|
||||
|
|
@ -1270,7 +1271,7 @@ function apiExamplesWatch(postShredAction) {
|
|||
}
|
||||
|
||||
function devGuideExamplesWatch(shredOptions, postShredAction, focus) {
|
||||
var watchPattern = focus ? '**/{' + focus + ',cb-' + focus+ '}/**/*.*' : '**/*.*';
|
||||
var watchPattern = focus ? '{' + focus + ',cb-' + focus+ '}/**/*.*' : '**/*.*';
|
||||
var includePattern = path.join(shredOptions.examplesDir, watchPattern);
|
||||
// removed this version because gulp.watch has the same glob issue that dgeni has.
|
||||
// var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*');
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
"picture": "/resources/images/bios/naomi.jpg",
|
||||
"twitter": "naomitraveller",
|
||||
"website": "http://google.com/+NaomiBlack",
|
||||
"bio": "Naomi is Angular's TPM generalist and jack-of-all-trades. She leads Angular Material and AngularDart, and acts as webmaster for angular.io. She's been at Google since 2006, as a technical program manager on projects ranging from Accessibility to Google Transit. She fights daleks in her spare time.",
|
||||
"bio": "Naomi is Angular's TPM generalist and jack-of-all-trades. She leads Angular's global programs (including localization), supports Angular's internal Google users, and acts as webmaster for angular.io and angular.cn. She's been at Google since 2006, as a technical program manager on projects ranging from Accessibility to Google Transit. She fights daleks in her spare time.",
|
||||
"type": "Lead"
|
||||
},
|
||||
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
"picture": "/resources/images/bios/brad-green.jpg",
|
||||
"twitter": "bradlygreen",
|
||||
"website": "https://plus.google.com/+BradGreen",
|
||||
"bio": "Brad Green works at Google as an engineering director. Brad manages the Google Sales Platform suite of projects as well as the AngularJS framework. Prior to Google, Brad worked on the early mobile web at AvantGo, founded and sold startups, and spent a few hard years toiling as a caterer. Brad's first job out of school was as lackey to Steve Jobs at NeXT Computer writing demo software and designing his slide presentations. Brad lives in Mountain View, CA with his wife and two children.",
|
||||
"bio": "Brad Green works at Google as an engineering director. Brad manages the Google Sales Platform suite of projects as well as the AngularJS framework. Prior to Google, Brad worked on the early mobile web at AvantGo, founded and sold startups, and spent a few hard years toiling as a caterer. Brad's first job out of school was as lackey to Steve Jobs at NeXT Computer writing demo software and designing his slide presentations. Brad enjoys throwing dinner parties with his wife Heather and putting on plays with his children.",
|
||||
"type": "Lead"
|
||||
},
|
||||
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
"picture": "/resources/images/bios/juleskremer.jpg",
|
||||
"twitter": "jules_kremer",
|
||||
"website": "https://plus.google.com/+JulesKremer",
|
||||
"bio": "Jules is a TPM on the Angular team. When not working with developers, Jules is often bending into pretzel-like shapes, climbing mountains or drinking really awesome beer.",
|
||||
"bio": "Jules is Head of Angular Developer Relations at Google. When not working with developers, Jules is often bending into pretzel-like shapes, climbing mountains or drinking really awesome beer.",
|
||||
"type": "Lead"
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ div(class="main-footer" data-swiftype-index="false")
|
|||
// TODO: (ericjim) make a libraries page to showcase all angular libraries
|
||||
//li <a href="/libraries.html">Libraries</a>
|
||||
li <a href="/about/">About</a>
|
||||
li <a href="/resources/">Books & Training</a>
|
||||
li <a href="/resources/#Education">Books & Training</a>
|
||||
li <a href="/resources/">Tools & Libraries</a>
|
||||
li <a href="/resources/">Community</a>
|
||||
li <a href="/presskit.html">Press Kit</a>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ wallaby.js
|
|||
|
||||
_test-output
|
||||
**/ts/**/*.js
|
||||
**/js-es6*/**/*.js
|
||||
**/ts-snippets/**/*.js
|
||||
*.d.ts
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
"build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail",
|
||||
"build:cli": "ng build",
|
||||
"build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
|
||||
"build:babel": "babel app -d app --extensions \".es6\" --source-maps",
|
||||
"copy-dist-files": "node ./copy-dist-files.js",
|
||||
"i18n": "ng-xi18n"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
'use strict'; // necessary for es6 output in node
|
||||
'use strict'; // necessary for es6 output in node
|
||||
|
||||
import { browser, element, by } from 'protractor';
|
||||
|
||||
|
|
@ -9,7 +9,7 @@ describe('TypeScript to Javascript tests', function () {
|
|||
});
|
||||
|
||||
it('should display the basic component example', function () {
|
||||
testTag('hero-view', 'Hero: Windstorm');
|
||||
testTag('hero-view', 'Hero Detail: Windstorm');
|
||||
});
|
||||
|
||||
it('should display the component example with lifecycle methods', function () {
|
||||
|
|
@ -36,7 +36,7 @@ describe('TypeScript to Javascript tests', function () {
|
|||
|
||||
it('should support component with inputs and outputs', function () {
|
||||
let app = element(by.css('hero-io'));
|
||||
let confirmComponent = app.element(by.css('my-confirm'));
|
||||
let confirmComponent = app.element(by.css('app-confirm'));
|
||||
|
||||
confirmComponent.element(by.buttonText('OK')).click();
|
||||
expect(app.element(by.cssContainingText('span', 'OK clicked')).isPresent()).toBe(true);
|
||||
|
|
@ -46,11 +46,11 @@ describe('TypeScript to Javascript tests', function () {
|
|||
});
|
||||
|
||||
it('should support host bindings and host listeners', function() {
|
||||
let app = element(by.css('heroes-bindings'));
|
||||
let app = element(by.css('hero-host'));
|
||||
let h1 = app.element(by.css('h1'));
|
||||
|
||||
expect(app.getAttribute('class')).toBe('heading');
|
||||
expect(app.getAttribute('title')).toBe('Tooltip content');
|
||||
expect(app.getAttribute('title')).toContain('Tooltip');
|
||||
|
||||
h1.click();
|
||||
expect(h1.getAttribute('class')).toBe('active');
|
||||
|
|
@ -61,12 +61,12 @@ describe('TypeScript to Javascript tests', function () {
|
|||
});
|
||||
|
||||
it('should support content and view queries', function() {
|
||||
let app = element(by.css('heroes-queries'));
|
||||
let windstorm = app.element(by.css('a-hero:first-child'));
|
||||
let app = element(by.css('hero-queries'));
|
||||
let windstorm = app.element(by.css('view-child:first-child'));
|
||||
|
||||
app.element(by.buttonText('Activate')).click();
|
||||
app.element(by.css('button')).click();
|
||||
expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active');
|
||||
expect(windstorm.element(by.css('active-label')).getText()).toBe('Active');
|
||||
expect(windstorm.element(by.css('content-child')).getText()).toBe('Active');
|
||||
});
|
||||
|
||||
function testTag(selector: string, expectedText: string) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"presets": [
|
||||
"es2015",
|
||||
"angular2"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-app',
|
||||
templateUrl: 'app.component.html',
|
||||
styles: [
|
||||
// See hero-di-inject-additional.component
|
||||
'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}',
|
||||
'.heading {font-style: italic}'
|
||||
]
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'ES6 JavaScript with Decorators';
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<a id="toc"></a>
|
||||
<h1>{{title}}</h1>
|
||||
<a href="#class-metadata">Classes and Class Metadata</a><br>
|
||||
<a href="#io-metadata">Input and Output Decorators</a><br>
|
||||
<a href="#dependency-injection">Dependency Injection</a><br>
|
||||
<a href="#host-metadata">Host Metadata</a><br>
|
||||
<a href="#view-child-metadata">View and Child Metadata</a><br>
|
||||
|
||||
<hr>
|
||||
<h4 id="class-metadata">Classes and Class Metadata</h4>
|
||||
<hero-view></hero-view>
|
||||
<hero-lifecycle></hero-lifecycle>
|
||||
|
||||
<hr>
|
||||
<h4 id="io-metadata">Input and Output Metadata</h4>
|
||||
<hero-io></hero-io>
|
||||
|
||||
<hr>
|
||||
<h4 id="dependency-injection">Dependency Injection</h4>
|
||||
<hero-di></hero-di>
|
||||
<hero-di-inject></hero-di-inject>
|
||||
<hero-di-inject-additional></hero-di-inject-additional>
|
||||
|
||||
<hr>
|
||||
<h4 id="host-metadata">Host Metadata</h4>
|
||||
<hero-host></hero-host>
|
||||
<hero-host-meta></hero-host-meta>
|
||||
|
||||
<hr>
|
||||
<h4 id="view-child-metadata">View and Child Metadata</h4>
|
||||
<hero-queries></hero-queries>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { ConfirmComponent } from './confirm.component';
|
||||
// #docregion appimport
|
||||
import { HeroComponent } from './hero.component';
|
||||
// #enddocregion appimport
|
||||
import { HeroComponent as HeroDIComponent } from './hero-di.component';
|
||||
import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
|
||||
import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
|
||||
import { HeroHostComponent } from './hero-host.component';
|
||||
import { HeroHostMetaComponent } from './hero-host-meta.component';
|
||||
import { HeroIOComponent } from './hero-io.component';
|
||||
import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
|
||||
import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component';
|
||||
import { HeroTitleComponent } from './hero-title.component';
|
||||
|
||||
import { DataService } from './data.service';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
ConfirmComponent,
|
||||
HeroComponent,
|
||||
HeroDIComponent,
|
||||
HeroDIInjectComponent,
|
||||
HeroDIInjectAdditionalComponent,
|
||||
HeroHostComponent, HeroHostMetaComponent,
|
||||
HeroIOComponent,
|
||||
HeroLifecycleComponent,
|
||||
HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
|
||||
HeroTitleComponent
|
||||
],
|
||||
providers: [
|
||||
DataService,
|
||||
{ provide: 'heroName', useValue: 'Windstorm' }
|
||||
],
|
||||
bootstrap: [ AppComponent ],
|
||||
|
||||
// schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging
|
||||
})
|
||||
export class AppModule { }
|
||||
|
||||
/* tslint:disable no-unused-variable */
|
||||
// #docregion ng2import
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import {
|
||||
LocationStrategy,
|
||||
HashLocationStrategy
|
||||
} from '@angular/common';
|
||||
// #enddocregion ng2import
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
||||
|
||||
// #docregion
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'app-confirm',
|
||||
templateUrl: 'confirm.component.html'
|
||||
})
|
||||
export class ConfirmComponent {
|
||||
@Input() okMsg = '';
|
||||
@Input('cancelMsg') notOkMsg = '';
|
||||
@Output() ok = new EventEmitter();
|
||||
@Output('cancel') notOk = new EventEmitter();
|
||||
|
||||
onOkClick() {
|
||||
this.ok.emit(true);
|
||||
}
|
||||
onNotOkClick() {
|
||||
this.notOk.emit(true);
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<button (click)="onOkClick()">
|
||||
{{okMsg}}
|
||||
</button>
|
||||
<button (click)="onNotOkClick()">
|
||||
{{notOkMsg}}
|
||||
</button>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class DataService {
|
||||
constructor() { }
|
||||
|
||||
getHeroName() {
|
||||
return 'Windstorm';
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-di-inject-additional',
|
||||
template: `<hero-title title="Tour of Heroes"></hero-title>`
|
||||
})
|
||||
export class HeroComponent { }
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { Component, Inject } from '@angular/core';
|
||||
|
||||
// #docregion
|
||||
@Component({
|
||||
selector: 'hero-di-inject',
|
||||
template: `<h1>Hero: {{name}}</h1>`
|
||||
})
|
||||
export class HeroComponent {
|
||||
constructor(@Inject('heroName') name) {
|
||||
this.name = name;
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { DataService } from './data.service';
|
||||
|
||||
// #docregion
|
||||
@Component({
|
||||
selector: 'hero-di',
|
||||
template: `<h1>Hero: {{name}}</h1>`
|
||||
})
|
||||
export class HeroComponent {
|
||||
name = '';
|
||||
constructor(dataService: DataService) {
|
||||
this.name = dataService.getHeroName();
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
// #docregion
|
||||
@Component({
|
||||
selector: 'hero-host-meta',
|
||||
template: `
|
||||
<h1 [class.active]="active">Hero Host in Metadata</h1>
|
||||
<div>Heading clicks: {{clicks}}</div>
|
||||
`,
|
||||
host: {
|
||||
// HostBindings to the <hero-host-meta> element
|
||||
'[title]': 'title',
|
||||
'[class.heading]': 'headingClass',
|
||||
|
||||
// HostListeners on the entire <hero-host-meta> element
|
||||
'(click)': 'clicked()',
|
||||
'(mouseenter)': 'enter($event)',
|
||||
'(mouseleave)': 'leave($event)'
|
||||
},
|
||||
// Styles within (but excluding) the <hero-host-meta> element
|
||||
styles: ['.active {background-color: coral;}']
|
||||
})
|
||||
export class HeroHostMetaComponent {
|
||||
title = 'Hero Host in Metadata Tooltip';
|
||||
headingClass = true;
|
||||
|
||||
active = false;
|
||||
clicks = 0;
|
||||
|
||||
clicked() {
|
||||
this.clicks += 1;
|
||||
}
|
||||
|
||||
enter(event: Event) {
|
||||
this.active = true;
|
||||
this.headingClass = false;
|
||||
}
|
||||
|
||||
leave(event: Event) {
|
||||
this.active = false;
|
||||
this.headingClass = true;
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import { Component, HostBinding, HostListener } from '@angular/core';
|
||||
|
||||
// #docregion
|
||||
@Component({
|
||||
selector: 'hero-host',
|
||||
template: `
|
||||
<h1 [class.active]="active">Hero Host in Decorators</h1>
|
||||
<div>Heading clicks: {{clicks}}</div>
|
||||
`,
|
||||
// Styles within (but excluding) the <hero-host> element
|
||||
styles: ['.active {background-color: yellow;}']
|
||||
})
|
||||
export class HeroHostComponent {
|
||||
// HostBindings to the <hero-host> element
|
||||
@HostBinding() title = 'Hero Host in Decorators Tooltip';
|
||||
@HostBinding('class.heading') headingClass = true;
|
||||
|
||||
active = false;
|
||||
clicks = 0;
|
||||
|
||||
// HostListeners on the entire <hero-host> element
|
||||
@HostListener('click')
|
||||
clicked() {
|
||||
this.clicks += 1;
|
||||
}
|
||||
|
||||
@HostListener('mouseenter', ['$event'])
|
||||
enter(event: Event) {
|
||||
this.active = true;
|
||||
this.headingClass = false;
|
||||
}
|
||||
|
||||
@HostListener('mouseleave', ['$event'])
|
||||
leave(event: Event) {
|
||||
this.active = false;
|
||||
this.headingClass = true;
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-io',
|
||||
template: `
|
||||
<app-confirm [okMsg]="'OK'"
|
||||
[cancelMsg]="'Cancel'"
|
||||
(ok)="onOk()"
|
||||
(cancel)="onCancel()">
|
||||
</app-confirm>
|
||||
<span *ngIf="okClicked">OK clicked</span>
|
||||
<span *ngIf="cancelClicked">Cancel clicked</span>
|
||||
`
|
||||
})
|
||||
export class HeroIOComponent {
|
||||
okClicked = false;
|
||||
cancelClicked = false;
|
||||
|
||||
onOk() {
|
||||
this.okClicked = true;
|
||||
}
|
||||
|
||||
onCancel() {
|
||||
this.cancelClicked = true;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-lifecycle',
|
||||
template: `<h1>Hero: {{name}}</h1>`
|
||||
})
|
||||
export class HeroComponent {
|
||||
name = '';
|
||||
ngOnInit() {
|
||||
// todo: fetch from server async
|
||||
setTimeout(() => this.name = 'Windstorm', 0);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
import {
|
||||
Component,
|
||||
ContentChild,
|
||||
Input,
|
||||
QueryList,
|
||||
ViewChildren
|
||||
} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'content-child',
|
||||
template: `
|
||||
<span class="content-child" *ngIf="active">
|
||||
Active
|
||||
</span>`
|
||||
})
|
||||
export class ContentChildComponent {
|
||||
active = false;
|
||||
|
||||
activate() {
|
||||
this.active = true;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////
|
||||
|
||||
// #docregion content
|
||||
@Component({
|
||||
selector: 'view-child',
|
||||
template: `
|
||||
<h2 [class.active]=active>
|
||||
{{hero.name}}
|
||||
<ng-content></ng-content>
|
||||
</h2>`,
|
||||
styles: ['.active {font-weight: bold; background-color: skyblue;}']
|
||||
})
|
||||
export class ViewChildComponent {
|
||||
@Input() hero;
|
||||
active = false;
|
||||
|
||||
@ContentChild(ContentChildComponent) content;
|
||||
|
||||
activate() {
|
||||
this.active = !this.active;
|
||||
this.content.activate();
|
||||
}
|
||||
}
|
||||
// #enddocregion content
|
||||
|
||||
////////////////////
|
||||
|
||||
// #docregion view
|
||||
@Component({
|
||||
selector: 'hero-queries',
|
||||
template: `
|
||||
<view-child *ngFor="let hero of heroData" [hero]="hero">
|
||||
<content-child></content-child>
|
||||
</view-child>
|
||||
<button (click)="activate()">{{buttonLabel}} All</button>
|
||||
`
|
||||
})
|
||||
export class HeroQueriesComponent {
|
||||
active = false;
|
||||
heroData = [
|
||||
{id: 1, name: 'Windstorm'},
|
||||
{id: 2, name: 'LaughingGas'}
|
||||
];
|
||||
|
||||
@ViewChildren(ViewChildComponent) views;
|
||||
|
||||
activate() {
|
||||
this.active = !this.active;
|
||||
this.views.forEach(
|
||||
view => view.activate()
|
||||
);
|
||||
}
|
||||
|
||||
get buttonLabel() {
|
||||
return this.active ? 'Deactivate' : 'Activate';
|
||||
}
|
||||
}
|
||||
// #enddocregion view
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { Attribute, Component, Inject, Optional } from '@angular/core';
|
||||
|
||||
// #docregion
|
||||
// #docregion templateUrl
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-title',
|
||||
templateUrl: 'hero-title.component.html'
|
||||
})
|
||||
// #enddocregion templateUrl
|
||||
export class HeroTitleComponent {
|
||||
msg = '';
|
||||
constructor(
|
||||
@Inject('titlePrefix') @Optional() titlePrefix,
|
||||
@Attribute('title') title
|
||||
) {
|
||||
this.titlePrefix = titlePrefix;
|
||||
this.title = title;
|
||||
}
|
||||
|
||||
ok() {
|
||||
this.msg = 'OK!';
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<!-- #docregion -->
|
||||
<h1>{{titlePrefix}} {{title}}</h1>
|
||||
<button (click)="ok()">OK</button>
|
||||
<p>{{ msg }}</p>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
// #docregion metadata
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-view',
|
||||
template: '<h1>{{title}}: {{getName()}}</h1>'
|
||||
})
|
||||
// #docregion appexport, class
|
||||
export class HeroComponent {
|
||||
title = 'Hero Detail';
|
||||
getName() {return 'Windstorm'; }
|
||||
}
|
||||
// #enddocregion appexport, class
|
||||
// #enddocregion metadata
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { AppModule } from './app.module';
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"build": "build:babel",
|
||||
"run": "http-server:e2e"
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<base href="/">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>TypeScript to JavaScript</title>
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<my-app>Loading...</my-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"description": "TypeScript to JavaScript",
|
||||
"files":[
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js"
|
||||
],
|
||||
"tags":["cookbook"]
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"presets": [
|
||||
"es2015"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
export class AppComponent {
|
||||
constructor() {
|
||||
this.title = 'Plain ES6 JavaScript';
|
||||
}
|
||||
}
|
||||
|
||||
AppComponent.annotations = [
|
||||
new Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-app',
|
||||
templateUrl: 'app.component.html',
|
||||
styles: [
|
||||
// See hero-di-inject-additional.component
|
||||
'hero-host { border: 1px dashed black; display: block; padding: 4px;}',
|
||||
'.heading {font-style: italic}'
|
||||
]
|
||||
})
|
||||
];
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<a id="toc"></a>
|
||||
<h1>{{title}}</h1>
|
||||
<a href="#class-metadata">Classes and Class Metadata</a><br>
|
||||
<a href="#io-metadata">Input and Output Metadata</a><br>
|
||||
<a href="#dependency-injection">Dependency Injection</a><br>
|
||||
<a href="#host-metadata">Host Metadata</a><br>
|
||||
<a href="#view-child-metadata">View and Child Metadata</a><br>
|
||||
|
||||
<hr>
|
||||
<h4 id="class-metadata">Classes and Class Metadata</h4>
|
||||
<hero-view></hero-view>
|
||||
<hero-lifecycle></hero-lifecycle>
|
||||
|
||||
<hr>
|
||||
<h4 id="io-metadata">Input and Output Metadata</h4>
|
||||
<hero-io></hero-io>
|
||||
|
||||
<hr>
|
||||
<h4 id="dependency-injection">Dependency Injection</h4>
|
||||
<hero-di></hero-di>
|
||||
<hero-di-inject></hero-di-inject>
|
||||
<hero-di-inject-additional></hero-di-inject-additional>
|
||||
|
||||
<hr>
|
||||
<h4 id="host-metadata">Host Metadata</h4>
|
||||
<hero-host></hero-host>
|
||||
|
||||
<hr>
|
||||
<h4 id="view-child-metadata">View and Child Metadata</h4>
|
||||
<hero-queries></hero-queries>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { ConfirmComponent } from './confirm.component';
|
||||
// #docregion appimport
|
||||
import { HeroComponent } from './hero.component';
|
||||
|
||||
// #enddocregion appimport
|
||||
import { HeroComponent as HeroDIComponent } from './hero-di.component';
|
||||
import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
|
||||
import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
|
||||
import { HeroHostComponent } from './hero-host.component';
|
||||
import { HeroIOComponent } from './hero-io.component';
|
||||
import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
|
||||
import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component';
|
||||
import { HeroTitleComponent } from './hero-title.component';
|
||||
|
||||
import { DataService } from './data.service';
|
||||
|
||||
export class AppModule { }
|
||||
|
||||
AppModule.annotations = [
|
||||
new NgModule({
|
||||
imports: [ BrowserModule],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
ConfirmComponent,
|
||||
HeroComponent,
|
||||
HeroDIComponent,
|
||||
HeroDIInjectComponent,
|
||||
HeroDIInjectAdditionalComponent,
|
||||
HeroHostComponent,
|
||||
HeroIOComponent,
|
||||
HeroLifecycleComponent,
|
||||
HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
|
||||
HeroTitleComponent
|
||||
],
|
||||
providers: [
|
||||
DataService,
|
||||
{ provide: 'heroName', useValue: 'Windstorm' }
|
||||
],
|
||||
bootstrap: [ AppComponent ],
|
||||
|
||||
// schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging
|
||||
})
|
||||
]
|
||||
|
||||
/* tslint:disable no-unused-variable */
|
||||
// #docregion ng2import
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import {
|
||||
LocationStrategy,
|
||||
HashLocationStrategy
|
||||
} from '@angular/common';
|
||||
// #enddocregion ng2import
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { Component, EventEmitter } from '@angular/core';
|
||||
|
||||
// #docregion
|
||||
export class ConfirmComponent {
|
||||
constructor(){
|
||||
this.ok = new EventEmitter();
|
||||
this.notOk = new EventEmitter();
|
||||
}
|
||||
onOkClick() {
|
||||
this.ok.emit(true);
|
||||
}
|
||||
onNotOkClick() {
|
||||
this.notOk.emit(true);
|
||||
}
|
||||
}
|
||||
|
||||
ConfirmComponent.annotations = [
|
||||
new Component({
|
||||
moduleId: module.id,
|
||||
selector: 'app-confirm',
|
||||
templateUrl: 'confirm.component.html',
|
||||
inputs: [
|
||||
'okMsg',
|
||||
'notOkMsg: cancelMsg'
|
||||
],
|
||||
outputs: [
|
||||
'ok',
|
||||
'notOk: cancel'
|
||||
]
|
||||
})
|
||||
];
|
||||
// #enddocregion
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<button (click)="onOkClick()">
|
||||
{{okMsg}}
|
||||
</button>
|
||||
<button (click)="onNotOkClick()">
|
||||
{{notOkMsg}}
|
||||
</button>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
|
||||
export class DataService {
|
||||
constructor() {
|
||||
}
|
||||
getHeroName() {
|
||||
return 'Windstorm';
|
||||
}
|
||||
}
|
||||
|
||||
DataService.annotations = [
|
||||
new Injectable()
|
||||
];
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
export class HeroComponent { }
|
||||
|
||||
HeroComponent.annotations = [
|
||||
new Component({
|
||||
selector: 'hero-di-inject-additional',
|
||||
template: `<hero-title title="Tour of Heroes"></hero-title>`
|
||||
})
|
||||
];
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { Component, Inject } from '@angular/core';
|
||||
|
||||
// #docregion
|
||||
export class HeroComponent {
|
||||
constructor(name) {
|
||||
this.name = name;
|
||||
}
|
||||
}
|
||||
|
||||
HeroComponent.annotations = [
|
||||
new Component({
|
||||
selector: 'hero-di-inject',
|
||||
template: `<h1>Hero: {{name}}</h1>`
|
||||
})
|
||||
];
|
||||
|
||||
HeroComponent.parameters = [
|
||||
[new Inject('heroName')]
|
||||
];
|
||||
// #enddocregion
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { DataService } from './data.service';
|
||||
|
||||
// #docregion
|
||||
export class HeroComponent {
|
||||
constructor(dataService) {
|
||||
this.name = dataService.getHeroName();
|
||||
}
|
||||
}
|
||||
|
||||
HeroComponent.annotations = [
|
||||
new Component({
|
||||
selector: 'hero-di',
|
||||
template: `<h1>Hero: {{name}}</h1>`
|
||||
})
|
||||
];
|
||||
|
||||
HeroComponent.parameters = [
|
||||
[DataService]
|
||||
];
|
||||
|
||||
// #enddocregion
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
// #docregion
|
||||
export class HeroHostComponent {
|
||||
constructor() {
|
||||
this.active = false;
|
||||
this.clicks = 0;
|
||||
this.headingClass = true;
|
||||
this.title = 'Hero Host Tooltip';
|
||||
}
|
||||
|
||||
clicked() {
|
||||
this.clicks += 1;
|
||||
}
|
||||
|
||||
enter(event) {
|
||||
this.active = true;
|
||||
this.headingClass = false;
|
||||
}
|
||||
|
||||
leave(event) {
|
||||
this.active = false;
|
||||
this.headingClass = true;
|
||||
}
|
||||
}
|
||||
|
||||
// #docregion metadata
|
||||
HeroHostComponent.annotations = [
|
||||
new Component({
|
||||
selector: 'hero-host',
|
||||
template: `
|
||||
<h1 [class.active]="active">Hero Host</h1>
|
||||
<div>Heading clicks: {{clicks}}</div>
|
||||
`,
|
||||
host: {
|
||||
// HostBindings to the <hero-host> element
|
||||
'[title]': 'title',
|
||||
'[class.heading]': 'headingClass',
|
||||
'(click)': 'clicked()',
|
||||
|
||||
// HostListeners on the entire <hero-host> element
|
||||
'(mouseenter)': 'enter($event)',
|
||||
'(mouseleave)': 'leave($event)'
|
||||
},
|
||||
// Styles within (but excluding) the <hero-host> element
|
||||
styles: ['.active {background-color: yellow;}']
|
||||
})
|
||||
];
|
||||
// #docregion metadata
|
||||
// #enddocregion
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
export class HeroIOComponent {
|
||||
constructor() {
|
||||
this.okClicked = false;
|
||||
this.cancelClicked = false;
|
||||
}
|
||||
|
||||
onOk() {
|
||||
this.okClicked = true;
|
||||
}
|
||||
|
||||
onCancel() {
|
||||
this.cancelClicked = true;
|
||||
}
|
||||
}
|
||||
|
||||
HeroIOComponent.annotations = [
|
||||
new Component({
|
||||
selector: 'hero-io',
|
||||
template: `
|
||||
<app-confirm [okMsg]="'OK'"
|
||||
[cancelMsg]="'Cancel'"
|
||||
(ok)="onOk()"
|
||||
(cancel)="onCancel()">
|
||||
</app-confirm>
|
||||
<span *ngIf="okClicked">OK clicked</span>
|
||||
<span *ngIf="cancelClicked">Cancel clicked</span>
|
||||
`
|
||||
})
|
||||
];
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
export class HeroComponent {
|
||||
ngOnInit() {
|
||||
// todo: fetch from server async
|
||||
setTimeout(() => this.name = 'Windstorm', 0);
|
||||
}
|
||||
}
|
||||
|
||||
HeroComponent.annotations = [
|
||||
new Component({
|
||||
selector: 'hero-lifecycle',
|
||||
template: `<h1>Hero: {{name}}</h1>`
|
||||
})
|
||||
];
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
import {
|
||||
Component,
|
||||
ContentChild,
|
||||
Input,
|
||||
QueryList,
|
||||
ViewChildren
|
||||
} from '@angular/core';
|
||||
|
||||
export class ContentChildComponent {
|
||||
constructor() {
|
||||
this.active = false;
|
||||
}
|
||||
|
||||
activate() {
|
||||
this.active = !this.active;
|
||||
}
|
||||
}
|
||||
|
||||
ContentChildComponent.annotations = [
|
||||
new Component({
|
||||
selector: 'content-child',
|
||||
template: `
|
||||
<span class="content-child" *ngIf="active">
|
||||
Active
|
||||
</span>`
|
||||
})
|
||||
];
|
||||
|
||||
////////////////////
|
||||
|
||||
// #docregion content
|
||||
export class ViewChildComponent {
|
||||
constructor() {
|
||||
this.active = false;
|
||||
}
|
||||
|
||||
activate() {
|
||||
this.active = !this.active;
|
||||
this.content.activate();
|
||||
}
|
||||
}
|
||||
|
||||
ViewChildComponent.annotations = [
|
||||
new Component({
|
||||
selector: 'view-child',
|
||||
template: `<h2 [class.active]=active>
|
||||
{{hero.name}}
|
||||
<ng-content></ng-content>
|
||||
</h2>`,
|
||||
styles: ['.active {font-weight: bold; background-color: skyblue;}'],
|
||||
inputs: ['hero'],
|
||||
queries: {
|
||||
content: new ContentChild(ContentChildComponent)
|
||||
}
|
||||
})
|
||||
];
|
||||
// #enddocregion content
|
||||
|
||||
////////////////////
|
||||
|
||||
// #docregion view
|
||||
export class HeroQueriesComponent {
|
||||
constructor(){
|
||||
this.active = false;
|
||||
this.heroData = [
|
||||
{id: 1, name: 'Windstorm'},
|
||||
{id: 2, name: 'LaughingGas'}
|
||||
];
|
||||
}
|
||||
|
||||
activate() {
|
||||
this.active = !this.active;
|
||||
this.views.forEach(
|
||||
view => view.activate()
|
||||
);
|
||||
}
|
||||
|
||||
get buttonLabel() {
|
||||
return this.active ? 'Deactivate' : 'Activate';
|
||||
}
|
||||
}
|
||||
|
||||
HeroQueriesComponent.annotations = [
|
||||
new Component({
|
||||
selector: 'hero-queries',
|
||||
template: `
|
||||
<view-child *ngFor="let hero of heroData" [hero]="hero">
|
||||
<content-child></content-child>
|
||||
</view-child>
|
||||
<button (click)="activate()">{{buttonLabel}} All</button>
|
||||
`,
|
||||
queries: {
|
||||
views: new ViewChildren(ViewChildComponent)
|
||||
}
|
||||
})
|
||||
];
|
||||
// #enddocregion view
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { Attribute, Component, Inject, Optional } from '@angular/core';
|
||||
|
||||
// #docregion
|
||||
export class HeroTitleComponent {
|
||||
constructor(titlePrefix, title) {
|
||||
this.titlePrefix = titlePrefix;
|
||||
this.title = title;
|
||||
this.msg = '';
|
||||
}
|
||||
|
||||
ok() {
|
||||
this.msg = 'OK!';
|
||||
}
|
||||
}
|
||||
|
||||
// #docregion templateUrl
|
||||
HeroTitleComponent.annotations = [
|
||||
new Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-title',
|
||||
templateUrl: 'hero-title.component.html'
|
||||
})
|
||||
];
|
||||
// #enddocregion templateUrl
|
||||
|
||||
HeroTitleComponent.parameters = [
|
||||
[new Optional(), new Inject('titlePrefix')],
|
||||
[new Attribute('title')]
|
||||
];
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<!-- #docregion -->
|
||||
<h1>{{titlePrefix}} {{title}}</h1>
|
||||
<button (click)="ok()">OK</button>
|
||||
<p>{{ msg }}</p>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
// #docplaster
|
||||
// #docregion metadata
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
// #docregion appexport, class
|
||||
export class HeroComponent {
|
||||
constructor() {
|
||||
this.title = 'Hero Detail';
|
||||
}
|
||||
getName() {return 'Windstorm'; }
|
||||
}
|
||||
// #enddocregion appexport, class
|
||||
|
||||
HeroComponent.annotations = [
|
||||
new Component({
|
||||
selector: 'hero-view',
|
||||
template: '<h1>{{title}}: {{getName()}}</h1>'
|
||||
})
|
||||
];
|
||||
// #enddocregion metadata
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { AppModule } from './app.module';
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"build": "build:babel",
|
||||
"run": "http-server:e2e"
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<base href="/">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>TypeScript to JavaScript</title>
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<my-app>Loading...</my-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"description": "TypeScript to JavaScript",
|
||||
"files":[
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js"
|
||||
],
|
||||
"tags":["cookbook"]
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<a id="toc"></a>
|
||||
<h1>{{title}}</h1>
|
||||
<a href="#class-metadata">Classes and Class Metadata</a><br>
|
||||
<a href="#interfaces">Interfaces</a><br>
|
||||
<a href="#io-metadata">Input and Output Metadata</a><br>
|
||||
<a href="#dependency-injection">Dependency Injection</a><br>
|
||||
<a href="#host-metadata">Host Metadata</a><br>
|
||||
<a href="#view-child-metadata">View and Child Metadata</a><br>
|
||||
|
||||
<hr>
|
||||
<h4 id="class-metadata">Classes and Class Metadata</h4>
|
||||
<hero-view></hero-view>
|
||||
<h4 id="class-metadata-dsl">Classes and Class Metadata (DSL)</h4>
|
||||
<hero-view-dsl></hero-view-dsl>
|
||||
|
||||
<hr>
|
||||
<h4 id="interfaces">Interfaces</h4>
|
||||
<hero-lifecycle></hero-lifecycle>
|
||||
<h4 id="interfaces-dsl">Interfaces (DSL)</h4>
|
||||
<hero-lifecycle-dsl></hero-lifecycle-dsl>
|
||||
|
||||
<hr>
|
||||
<h4 id="io-metadata">Input and Output Metadata</h4>
|
||||
<hero-io></hero-io>
|
||||
<h4 id="io-metadata-dsl">Input and Output Metadata (DSL)</h4>
|
||||
<hero-io-dsl></hero-io-dsl>
|
||||
|
||||
<hr>
|
||||
<h4 id="dependency-injection">Dependency Injection</h4>
|
||||
<hero-di></hero-di>
|
||||
<hero-di-inject></hero-di-inject>
|
||||
<hero-di-inject-additional></hero-di-inject-additional>
|
||||
|
||||
<h4 id="dependency-injection-dsl">Dependency Injection (DSL)</h4>
|
||||
<hero-di-dsl></hero-di-dsl>
|
||||
<hero-di-inject-dsl></hero-di-inject-dsl>
|
||||
<hero-di-inject-additional-dsl></hero-di-inject-additional-dsl>
|
||||
|
||||
<hr>
|
||||
<h4 id="host-metadata">Host Metadata</h4>
|
||||
<hero-host></hero-host>
|
||||
<h4 id="host-metadata-dsl">Host Metadata (DSL)</h4>
|
||||
<hero-host-dsl></hero-host-dsl>
|
||||
|
||||
<hr>
|
||||
<h4 id="view-child-metadata">View and Child Metadata (DSL)</h4>
|
||||
<hero-queries></hero-queries>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
(function(app) {
|
||||
|
||||
app.AppComponent = AppComponent;
|
||||
function AppComponent() {
|
||||
this.title = 'ES5 JavaScript';
|
||||
}
|
||||
|
||||
AppComponent.annotations = [
|
||||
new ng.core.Component({
|
||||
selector: 'my-app',
|
||||
templateUrl: 'app/app.component.html',
|
||||
styles: [
|
||||
// See hero-di-inject-additional.component
|
||||
'hero-host, hero-host-dsl { border: 1px dashed black; display: block; padding: 4px;}',
|
||||
'.heading {font-style: italic}'
|
||||
]
|
||||
})
|
||||
];
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
(function(app) {
|
||||
|
||||
app.AppModule = AppModule;
|
||||
function AppModule() { }
|
||||
|
||||
AppModule.annotations = [
|
||||
new ng.core.NgModule({
|
||||
imports: [ ng.platformBrowser.BrowserModule ],
|
||||
declarations: [
|
||||
app.AppComponent,
|
||||
app.ConfirmComponent, app.ConfirmDslComponent,
|
||||
app.HeroComponent, app.HeroDslComponent,
|
||||
app.HeroDIComponent, app.HeroDIDslComponent,
|
||||
app.HeroDIInjectComponent, app.HeroDIInjectDslComponent,
|
||||
app.HeroDIInjectAdditionalComponent, app.HeroDIInjectAdditionalDslComponent,
|
||||
app.HeroHostComponent, app.HeroHostDslComponent,
|
||||
app.HeroIOComponent, app.HeroIODslComponent,
|
||||
app.HeroLifecycleComponent, app.HeroLifecycleDslComponent,
|
||||
app.heroQueries.HeroQueriesComponent, app.heroQueries.ViewChildComponent, app.heroQueries.ContentChildComponent,
|
||||
app.HeroTitleComponent, app.HeroTitleDslComponent
|
||||
],
|
||||
providers: [
|
||||
app.DataService,
|
||||
{ provide: 'heroName', useValue: 'Windstorm' }
|
||||
],
|
||||
bootstrap: [ app.AppComponent ],
|
||||
|
||||
// schemas: [ ng.core.NO_ERRORS_SCHEMA ] // helpful for debugging!
|
||||
})
|
||||
]
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
||||
|
||||
///// For documentation only /////
|
||||
(function () {
|
||||
// #docregion appimport
|
||||
var HeroComponent = app.HeroComponent;
|
||||
// #enddocregion appimport
|
||||
|
||||
// #docregion ng2import
|
||||
var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
|
||||
var LocationStrategy = ng.common.LocationStrategy;
|
||||
var HashLocationStrategy = ng.common.HashLocationStrategy;
|
||||
// #enddocregion ng2import
|
||||
})
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<button (click)="onOkClick()">
|
||||
{{okMsg}}
|
||||
</button>
|
||||
<button (click)="onNotOkClick()">
|
||||
{{notOkMsg}}
|
||||
</button>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
(function(app) {
|
||||
|
||||
// #docregion
|
||||
app.ConfirmComponent = ConfirmComponent;
|
||||
|
||||
ConfirmComponent.annotations = [
|
||||
new ng.core.Component({
|
||||
selector: 'app-confirm',
|
||||
templateUrl: 'app/confirm.component.html',
|
||||
inputs: [
|
||||
'okMsg',
|
||||
'notOkMsg: cancelMsg'
|
||||
],
|
||||
outputs: [
|
||||
'ok',
|
||||
'notOk: cancel'
|
||||
]
|
||||
})
|
||||
];
|
||||
|
||||
function ConfirmComponent() {
|
||||
this.ok = new ng.core.EventEmitter();
|
||||
this.notOk = new ng.core.EventEmitter();
|
||||
}
|
||||
|
||||
ConfirmComponent.prototype.onOkClick = function() {
|
||||
this.ok.emit(true);
|
||||
}
|
||||
|
||||
ConfirmComponent.prototype.onNotOkClick = function() {
|
||||
this.notOk.emit(true);
|
||||
}
|
||||
|
||||
|
||||
// #enddocregion
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
||||
/////// DSL version ////////
|
||||
|
||||
(function(app) {
|
||||
|
||||
// #docregion dsl
|
||||
app.ConfirmDslComponent = ng.core.Component({
|
||||
selector: 'app-confirm-dsl',
|
||||
templateUrl: 'app/confirm.component.html',
|
||||
inputs: [
|
||||
'okMsg',
|
||||
'notOkMsg: cancelMsg'
|
||||
],
|
||||
outputs: [
|
||||
'ok',
|
||||
'notOk: cancel'
|
||||
]
|
||||
})
|
||||
.Class({
|
||||
constructor: function ConfirmDslComponent() {
|
||||
this.ok = new ng.core.EventEmitter();
|
||||
this.notOk = new ng.core.EventEmitter();
|
||||
},
|
||||
|
||||
onOkClick: function() {
|
||||
this.ok.emit(true);
|
||||
},
|
||||
|
||||
onNotOkClick: function() {
|
||||
this.notOk.emit(true);
|
||||
}
|
||||
});
|
||||
|
||||
// #enddocregion dsl
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
|
@ -1,13 +1,10 @@
|
|||
(function(app) {
|
||||
|
||||
function DataService() {
|
||||
}
|
||||
DataService.annotations = [
|
||||
new ng.core.Injectable()
|
||||
];
|
||||
app.DataService = DataService;
|
||||
function DataService() { }
|
||||
|
||||
DataService.prototype.getHeroName = function() {
|
||||
return 'Windstorm';
|
||||
};
|
||||
app.DataService = DataService;
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
|
|
|||
|
|
@ -1,50 +1,26 @@
|
|||
(function(app) {
|
||||
|
||||
// #docregion
|
||||
var TitleComponent = ng.core.Component({
|
||||
selector: 'hero-title',
|
||||
template:
|
||||
'<h1>{{titlePrefix}} {{title}}</h1>' +
|
||||
'<button (click)="ok()">OK</button>' +
|
||||
'<p>{{ msg }}</p>'
|
||||
}).Class({
|
||||
constructor: [
|
||||
[
|
||||
new ng.core.Optional(),
|
||||
new ng.core.Inject('titlePrefix')
|
||||
],
|
||||
new ng.core.Attribute('title'),
|
||||
function(titlePrefix, title) {
|
||||
this.titlePrefix = titlePrefix;
|
||||
this.title = title;
|
||||
this.msg = '';
|
||||
}
|
||||
],
|
||||
ok: function() {
|
||||
this.msg = 'OK!';
|
||||
}
|
||||
});
|
||||
// #enddocregion
|
||||
app.HeroDIInjectAdditionalComponent = HeroDIInjectAdditionalComponent;
|
||||
|
||||
var AppComponent = ng.core.Component({
|
||||
HeroDIInjectAdditionalComponent.annotations = [
|
||||
new ng.core.Component({
|
||||
selector: 'hero-di-inject-additional',
|
||||
template: '<hero-title title="Tour of Heroes">' +
|
||||
'</hero-title>'
|
||||
}).Class({
|
||||
constructor: function() { }
|
||||
});
|
||||
|
||||
app.HeroesDIInjectAdditionalModule =
|
||||
ng.core.NgModule({
|
||||
imports: [ ng.platformBrowser.BrowserModule ],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
TitleComponent
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
.Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
template: '<hero-title title="Tour of Heroes"></hero-title>'
|
||||
})
|
||||
];
|
||||
|
||||
function HeroDIInjectAdditionalComponent() {}
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
||||
////// DSL Version /////////
|
||||
(function(app) {
|
||||
|
||||
app.HeroDIInjectAdditionalDslComponent = ng.core.Component({
|
||||
selector: 'hero-di-inject-additional-dsl',
|
||||
template: '<hero-title-dsl title="Tour of Heroes"></hero-title-dsl>'
|
||||
}).Class({
|
||||
constructor: function HeroDIInjectAdditionalDslComponent() { }
|
||||
});
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
|
|
|||
|
|
@ -1,57 +1,41 @@
|
|||
(function(app) {
|
||||
|
||||
// #docregion parameters
|
||||
function HeroComponent(name) {
|
||||
this.name = name;
|
||||
}
|
||||
HeroComponent.parameters = [
|
||||
'heroName'
|
||||
];
|
||||
HeroComponent.annotations = [
|
||||
new ng.core.Component({
|
||||
selector: 'hero-di-inject',
|
||||
template: '<h1>Hero: {{name}}</h1>'
|
||||
})
|
||||
];
|
||||
// #enddocregion parameters
|
||||
// #docregion
|
||||
app.HeroDIInjectComponent = HeroDIInjectComponent;
|
||||
|
||||
app.HeroesDIInjectModule =
|
||||
ng.core.NgModule({
|
||||
imports: [ ng.platformBrowser.BrowserModule ],
|
||||
providers: [ { provide: 'heroName', useValue: 'Windstorm' } ],
|
||||
declarations: [ HeroComponent ],
|
||||
bootstrap: [ HeroComponent ]
|
||||
})
|
||||
.Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
||||
(function(app) {
|
||||
// #docregion ctor
|
||||
var HeroComponent = ng.core.Component({
|
||||
selector: 'hero-di-inline2',
|
||||
HeroDIInjectComponent.annotations = [
|
||||
new ng.core.Component({
|
||||
selector: 'hero-di-inject',
|
||||
template: '<h1>Hero: {{name}}</h1>'
|
||||
})
|
||||
.Class({
|
||||
constructor:
|
||||
[new ng.core.Inject('heroName'),
|
||||
function(name) {
|
||||
this.name = name;
|
||||
}]
|
||||
});
|
||||
// #enddocregion ctor
|
||||
];
|
||||
|
||||
app.HeroesDIInjectModule2 =
|
||||
ng.core.NgModule({
|
||||
imports: [ ng.platformBrowser.BrowserModule ],
|
||||
providers: [ { provide: 'heroName', useValue: 'Bombasto' } ],
|
||||
declarations: [ HeroComponent ],
|
||||
bootstrap: [ HeroComponent ]
|
||||
})
|
||||
.Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
HeroDIInjectComponent.parameters = [ 'heroName' ];
|
||||
|
||||
function HeroDIInjectComponent(name) {
|
||||
this.name = name;
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
||||
/////// DSL version ////////
|
||||
|
||||
(function(app) {
|
||||
|
||||
// #docregion dsl
|
||||
app.HeroDIInjectDslComponent = ng.core.Component({
|
||||
selector: 'hero-di-inject-dsl',
|
||||
template: '<h1>Hero: {{name}}</h1>'
|
||||
})
|
||||
.Class({
|
||||
constructor: [
|
||||
new ng.core.Inject('heroName'),
|
||||
function HeroDIInjectDslComponent(name) {
|
||||
this.name = name;
|
||||
}
|
||||
]
|
||||
});
|
||||
// #enddocregion dsl
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
(function(app) {
|
||||
// #docregion
|
||||
var HeroComponent = ng.core.Component({
|
||||
selector: 'hero-di-inline',
|
||||
template: '<h1>Hero: {{name}}</h1>'
|
||||
})
|
||||
.Class({
|
||||
constructor:
|
||||
[app.DataService,
|
||||
function(service) {
|
||||
this.name = service.getHeroName();
|
||||
}]
|
||||
});
|
||||
// #enddocregion
|
||||
|
||||
app.HeroDIInlineModule =
|
||||
ng.core.NgModule({
|
||||
imports: [ ng.platformBrowser.BrowserModule ],
|
||||
providers: [ app.DataService ],
|
||||
declarations: [ HeroComponent ],
|
||||
bootstrap: [ HeroComponent ]
|
||||
})
|
||||
.Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
|
@ -1,31 +1,43 @@
|
|||
(function(app) {
|
||||
|
||||
// #docregion
|
||||
app.HeroDIComponent = HeroComponent;
|
||||
|
||||
function HeroComponent(dataService) {
|
||||
this.name = dataService.getHeroName();
|
||||
}
|
||||
HeroComponent.parameters = [
|
||||
app.DataService
|
||||
];
|
||||
HeroComponent.annotations = [
|
||||
app.HeroDIComponent = HeroDIComponent;
|
||||
|
||||
HeroDIComponent.annotations = [
|
||||
new ng.core.Component({
|
||||
selector: 'hero-di',
|
||||
template: '<h1>Hero: {{name}}</h1>'
|
||||
})
|
||||
];
|
||||
|
||||
HeroDIComponent.parameters = [ app.DataService ];
|
||||
|
||||
function HeroDIComponent(dataService) {
|
||||
this.name = dataService.getHeroName();
|
||||
}
|
||||
|
||||
// #enddocregion
|
||||
|
||||
app.HeroesDIModule =
|
||||
ng.core.NgModule({
|
||||
imports: [ ng.platformBrowser.BrowserModule ],
|
||||
providers: [ app.DataService ],
|
||||
declarations: [ HeroComponent ],
|
||||
bootstrap: [ HeroComponent ]
|
||||
})
|
||||
.Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
||||
////// DSL Version /////
|
||||
|
||||
(function(app) {
|
||||
|
||||
// #docregion dsl
|
||||
app.HeroDIDslComponent = ng.core.Component({
|
||||
selector: 'hero-di-dsl',
|
||||
template: '<h1>Hero: {{name}}</h1>'
|
||||
})
|
||||
.Class({
|
||||
constructor: [
|
||||
app.DataService,
|
||||
function HeroDIDslComponent(service) {
|
||||
this.name = service.getHeroName();
|
||||
}
|
||||
]
|
||||
});
|
||||
// #enddocregion dsl
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
// #docplaster
|
||||
// #docregion appexport
|
||||
(function(app) {
|
||||
|
||||
// #docregion component
|
||||
var HeroComponent = ng.core.Component({
|
||||
selector: 'hero-view-2',
|
||||
template:
|
||||
'<h1>Name: {{getName()}}</h1>',
|
||||
})
|
||||
.Class({
|
||||
constructor: function() {
|
||||
},
|
||||
getName: function() {
|
||||
return 'Windstorm';
|
||||
}
|
||||
});
|
||||
// #enddocregion component
|
||||
|
||||
app.HeroesDslModule =
|
||||
ng.core.NgModule({
|
||||
imports: [ ng.platformBrowser.BrowserModule ],
|
||||
declarations: [ HeroComponent ],
|
||||
bootstrap: [ HeroComponent ]
|
||||
})
|
||||
.Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
})(window.app = window.app || {});
|
||||
// #enddocregion appexport
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
(function(app) {
|
||||
|
||||
// #docregion
|
||||
app.HeroHostComponent = HeroHostComponent;
|
||||
|
||||
HeroHostComponent.annotations = [
|
||||
new ng.core.Component({
|
||||
selector: 'hero-host',
|
||||
template:
|
||||
'<h1 [class.active]="active">Hero Host</h1>' +
|
||||
'<div>Heading clicks: {{clicks}}</div>',
|
||||
host: {
|
||||
// HostBindings to the <hero-host> element
|
||||
'[title]': 'title',
|
||||
'[class.heading]': 'headingClass',
|
||||
'(click)': 'clicked()',
|
||||
|
||||
// HostListeners on the entire <hero-host> element
|
||||
'(mouseenter)': 'enter($event)',
|
||||
'(mouseleave)': 'leave($event)'
|
||||
},
|
||||
// Styles within (but excluding) the <hero-host> element
|
||||
styles: ['.active {background-color: yellow;}']
|
||||
})
|
||||
];
|
||||
|
||||
function HeroHostComponent() {
|
||||
this.clicks = 0;
|
||||
this.headingClass = true;
|
||||
this.title = 'Hero Host Tooltip content';
|
||||
}
|
||||
|
||||
HeroHostComponent.prototype.clicked = function() {
|
||||
this.clicks += 1;
|
||||
}
|
||||
|
||||
HeroHostComponent.prototype.enter = function(event) {
|
||||
this.active = true;
|
||||
this.headingClass = false;
|
||||
}
|
||||
|
||||
HeroHostComponent.prototype.leave = function(event) {
|
||||
this.active = false;
|
||||
this.headingClass = true;
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
||||
//// DSL Version ////
|
||||
|
||||
(function(app) {
|
||||
|
||||
// #docregion dsl
|
||||
app.HeroHostDslComponent = ng.core.Component({
|
||||
selector: 'hero-host-dsl',
|
||||
template: `
|
||||
<h1 [class.active]="active">Hero Host (DSL)</h1>
|
||||
<div>Heading clicks: {{clicks}}</div>
|
||||
`,
|
||||
host: {
|
||||
// HostBindings to the <hero-host-dsl> element
|
||||
'[title]': 'title',
|
||||
'[class.heading]': 'headingClass',
|
||||
'(click)': 'clicked()',
|
||||
|
||||
// HostListeners on the entire <hero-host-dsl> element
|
||||
'(mouseenter)': 'enter($event)',
|
||||
'(mouseleave)': 'leave($event)'
|
||||
},
|
||||
// Styles within (but excluding) the <hero-host-dsl> element
|
||||
styles: ['.active {background-color: coral;}']
|
||||
})
|
||||
.Class({
|
||||
constructor: function HeroHostDslComponent() {
|
||||
this.clicks = 0;
|
||||
this.headingClass = true;
|
||||
this.title = 'Hero Host Tooltip DSL content';
|
||||
},
|
||||
|
||||
clicked() {
|
||||
this.clicks += 1;
|
||||
},
|
||||
|
||||
enter(event) {
|
||||
this.active = true;
|
||||
this.headingClass = false;
|
||||
},
|
||||
|
||||
leave(event) {
|
||||
this.active = false;
|
||||
this.headingClass = true;
|
||||
}
|
||||
});
|
||||
// #enddocregion dsl
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<app-confirm-dsl [okMsg]="'OK'"
|
||||
[cancelMsg]="'Cancel'"
|
||||
(ok)="onOk()"
|
||||
(cancel)="onCancel()">
|
||||
</app-confirm-dsl>
|
||||
<span *ngIf="okClicked">OK clicked</span>
|
||||
<span *ngIf="cancelClicked">Cancel clicked</span>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<app-confirm [okMsg]="'OK'"
|
||||
[cancelMsg]="'Cancel'"
|
||||
(ok)="onOk()"
|
||||
(cancel)="onCancel()">
|
||||
</app-confirm>
|
||||
<span *ngIf="okClicked">OK clicked</span>
|
||||
<span *ngIf="cancelClicked">Cancel clicked</span>
|
||||
|
|
@ -1,68 +1,42 @@
|
|||
(function(app) {
|
||||
// #docregion
|
||||
var ConfirmComponent = ng.core.Component({
|
||||
selector: 'my-confirm',
|
||||
inputs: [
|
||||
'okMsg',
|
||||
'notOkMsg: cancelMsg'
|
||||
],
|
||||
outputs: [
|
||||
'ok',
|
||||
'notOk: cancel'
|
||||
],
|
||||
template:
|
||||
'<button (click)="onOkClick()">' +
|
||||
'{{okMsg}}' +
|
||||
'</button>' +
|
||||
'<button (click)="onNotOkClick()">' +
|
||||
'{{notOkMsg}}' +
|
||||
'</button>'
|
||||
}).Class({
|
||||
constructor: function() {
|
||||
this.ok = new ng.core.EventEmitter();
|
||||
this.notOk = new ng.core.EventEmitter();
|
||||
},
|
||||
onOkClick: function() {
|
||||
this.ok.next(true);
|
||||
},
|
||||
onNotOkClick: function() {
|
||||
this.notOk.next(true);
|
||||
}
|
||||
});
|
||||
// #enddocregion
|
||||
|
||||
function AppComponent() {
|
||||
}
|
||||
AppComponent.annotations = [
|
||||
new ng.core.Component({
|
||||
selector: 'hero-io',
|
||||
template: '<my-confirm [okMsg]="\'OK\'"' +
|
||||
'[cancelMsg]="\'Cancel\'"' +
|
||||
'(ok)="onOk()"' +
|
||||
'(cancel)="onCancel()">' +
|
||||
'</my-confirm>' +
|
||||
'<span *ngIf="okClicked">OK clicked</span>' +
|
||||
'<span *ngIf="cancelClicked">Cancel clicked</span>'
|
||||
})
|
||||
];
|
||||
AppComponent.prototype.onOk = function() {
|
||||
this.okClicked = true;
|
||||
}
|
||||
AppComponent.prototype.onCancel = function() {
|
||||
this.cancelClicked = true;
|
||||
}
|
||||
app.HeroIOComponent = HeroComponent;
|
||||
|
||||
app.HeroesIOModule =
|
||||
ng.core.NgModule({
|
||||
imports: [ ng.platformBrowser.BrowserModule ],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
ConfirmComponent
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
.Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
HeroComponent.annotations = [
|
||||
new ng.core.Component({
|
||||
selector: 'hero-io',
|
||||
templateUrl: 'app/hero-io.component.html'
|
||||
})
|
||||
];
|
||||
|
||||
function HeroComponent() { }
|
||||
|
||||
HeroComponent.prototype.onOk = function() {
|
||||
this.okClicked = true;
|
||||
}
|
||||
|
||||
HeroComponent.prototype.onCancel = function() {
|
||||
this.cancelClicked = true;
|
||||
}
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
||||
///// DSL Version ////
|
||||
|
||||
(function(app) {
|
||||
|
||||
app.HeroIODslComponent = ng.core.Component({
|
||||
selector: 'hero-io-dsl',
|
||||
templateUrl: 'app/hero-io-dsl.component.html'
|
||||
})
|
||||
.Class({
|
||||
constructor: function HeroIODslComponent() { },
|
||||
onOk: function() {
|
||||
this.okClicked = true;
|
||||
},
|
||||
onCancel: function() {
|
||||
this.cancelClicked = true;
|
||||
}
|
||||
});
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
|
|
|||
|
|
@ -1,29 +1,42 @@
|
|||
// #docplaster
|
||||
(function(app) {
|
||||
// #docregion
|
||||
function HeroComponent() {}
|
||||
// #enddocregion
|
||||
HeroComponent.annotations = [
|
||||
new ng.core.Component({
|
||||
selector: 'hero-lifecycle',
|
||||
template: '<h1>Hero: {{name}}</h1>'
|
||||
})
|
||||
];
|
||||
// #docregion
|
||||
HeroComponent.prototype.ngOnInit =
|
||||
function() {
|
||||
this.name = 'Windstorm';
|
||||
};
|
||||
// #enddocregion
|
||||
|
||||
app.HeroesLifecycleModule =
|
||||
ng.core.NgModule({
|
||||
imports: [ ng.platformBrowser.BrowserModule ],
|
||||
declarations: [ HeroComponent ],
|
||||
bootstrap: [ HeroComponent ]
|
||||
})
|
||||
.Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
// #docregion
|
||||
app.HeroLifecycleComponent = HeroComponent;
|
||||
|
||||
HeroComponent.annotations = [
|
||||
new ng.core.Component({
|
||||
selector: 'hero-lifecycle',
|
||||
template: '<h1>Hero: {{name}}</h1>'
|
||||
})
|
||||
];
|
||||
|
||||
function HeroComponent() { }
|
||||
|
||||
HeroComponent.prototype.ngOnInit = function() {
|
||||
// todo: fetch from server async
|
||||
setTimeout(() => this.name = 'Windstorm', 0);
|
||||
};
|
||||
// #enddocregion
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
||||
/////// DSL version ////
|
||||
|
||||
(function(app) {
|
||||
|
||||
// #docregion dsl
|
||||
app.HeroLifecycleDslComponent = ng.core.Component({
|
||||
selector: 'hero-lifecycle-dsl',
|
||||
template: '<h1>Hero: {{name}}</h1>'
|
||||
})
|
||||
.Class({
|
||||
constructor: function HeroLifecycleDslComponent() { },
|
||||
ngOnInit: function() {
|
||||
// todo: fetch from server async
|
||||
setTimeout(() => this.name = 'Windstorm', 0);
|
||||
}
|
||||
});
|
||||
// #enddocregion dsl
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,92 @@
|
|||
(function(app) {
|
||||
|
||||
app.heroQueries = app.heroQueries || {};
|
||||
|
||||
app.heroQueries.ContentChildComponent = ng.core.Component({
|
||||
selector: 'content-child',
|
||||
template:
|
||||
'<span class="content-child" *ngIf="active">' +
|
||||
'Active' +
|
||||
'</span>'
|
||||
}).Class({
|
||||
constructor: function ContentChildComponent() {
|
||||
this.active = false;
|
||||
},
|
||||
|
||||
activate: function() {
|
||||
this.active = !this.active;
|
||||
}
|
||||
});
|
||||
|
||||
////////////////////
|
||||
|
||||
// #docregion content
|
||||
app.heroQueries.ViewChildComponent = ng.core.Component({
|
||||
selector: 'view-child',
|
||||
template:
|
||||
'<h2 [class.active]=active>' +
|
||||
'{{hero.name}} ' +
|
||||
'<ng-content></ng-content>' +
|
||||
'</h2>',
|
||||
styles: ['.active {font-weight: bold; background-color: skyblue;}'],
|
||||
inputs: ['hero'],
|
||||
queries: {
|
||||
content: new ng.core.ContentChild(app.heroQueries.ContentChildComponent)
|
||||
}
|
||||
})
|
||||
.Class({
|
||||
constructor: function HeroQueriesHeroComponent() {
|
||||
this.active = false;
|
||||
},
|
||||
|
||||
activate: function() {
|
||||
this.active = !this.active;
|
||||
this.content.activate();
|
||||
}
|
||||
});
|
||||
// #enddocregion content
|
||||
|
||||
////////////////////
|
||||
|
||||
// #docregion view
|
||||
app.heroQueries.HeroQueriesComponent = ng.core.Component({
|
||||
selector: 'hero-queries',
|
||||
template:
|
||||
'<view-child *ngFor="let hero of heroData" [hero]="hero">' +
|
||||
'<content-child></content-child>' +
|
||||
'</view-child>' +
|
||||
'<button (click)="activate()">{{buttonLabel}} All</button>',
|
||||
queries: {
|
||||
views: new ng.core.ViewChildren(app.heroQueries.ViewChildComponent)
|
||||
}
|
||||
})
|
||||
.Class({
|
||||
constructor: function HeroQueriesComponent() {
|
||||
this.active = false;
|
||||
this.heroData = [
|
||||
{id: 1, name: 'Windstorm'},
|
||||
{id: 2, name: 'LaughingGas'}
|
||||
];
|
||||
},
|
||||
|
||||
activate: function() {
|
||||
this.active = !this.active;
|
||||
this.views.forEach(function(view) {
|
||||
view.activate();
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// #docregion defined-property
|
||||
// add prototype property w/ getter outside the DSL
|
||||
var proto = app.heroQueries.HeroQueriesComponent.prototype;
|
||||
Object.defineProperty(proto, "buttonLabel", {
|
||||
get: function () {
|
||||
return this.active ? 'Deactivate' : 'Activate';
|
||||
},
|
||||
enumerable: true
|
||||
});
|
||||
// #enddocregion defined-property
|
||||
// #enddocregion view
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<!-- #docregion -->
|
||||
<h1>{{titlePrefix}} {{title}}</h1>
|
||||
<button (click)="ok()">OK</button>
|
||||
<p>{{ msg }}</p>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
(function(app) {
|
||||
|
||||
// #docregion
|
||||
app.HeroTitleComponent = HeroTitleComponent;
|
||||
|
||||
// #docregion templateUrl
|
||||
HeroTitleComponent.annotations = [
|
||||
new ng.core.Component({
|
||||
selector: 'hero-title',
|
||||
templateUrl: 'app/hero-title.component.html'
|
||||
})
|
||||
];
|
||||
// #enddocregion templateUrl
|
||||
|
||||
function HeroTitleComponent(titlePrefix, title) {
|
||||
this.titlePrefix = titlePrefix;
|
||||
this.title = title;
|
||||
this.msg = '';
|
||||
}
|
||||
|
||||
HeroTitleComponent.prototype.ok = function() {
|
||||
this.msg = 'OK!';
|
||||
}
|
||||
|
||||
HeroTitleComponent.parameters = [
|
||||
[new ng.core.Optional(), new ng.core.Inject('titlePrefix')],
|
||||
[new ng.core.Attribute('title')]
|
||||
];
|
||||
|
||||
// #enddocregion
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
||||
////////// DSL version ////////////
|
||||
|
||||
(function(app) {
|
||||
|
||||
// #docregion dsl
|
||||
app.HeroTitleDslComponent = ng.core.Component({
|
||||
selector: 'hero-title-dsl',
|
||||
templateUrl: 'app/hero-title.component.html'
|
||||
})
|
||||
.Class({
|
||||
constructor: [
|
||||
[ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ],
|
||||
new ng.core.Attribute('title'),
|
||||
function HeroTitleDslComponent(titlePrefix, title) {
|
||||
this.titlePrefix = titlePrefix;
|
||||
this.title = title;
|
||||
this.msg = '';
|
||||
}
|
||||
],
|
||||
|
||||
ok: function() {
|
||||
this.msg = 'OK!';
|
||||
}
|
||||
});
|
||||
// #enddocregion dsl
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
|
@ -1,42 +1,48 @@
|
|||
// #docplaster
|
||||
// #docregion appexport
|
||||
(function(app) {
|
||||
// #enddocregion appexport
|
||||
|
||||
// #docregion metadata
|
||||
// #docregion appexport
|
||||
// #docregion constructorproto
|
||||
function HeroComponent() {
|
||||
this.title = "Hero Detail";
|
||||
}
|
||||
|
||||
// #enddocregion constructorproto
|
||||
// #enddocregion appexport
|
||||
HeroComponent.annotations = [
|
||||
new ng.core.Component({
|
||||
selector: 'hero-view',
|
||||
template:
|
||||
'<h1>Hero: {{getName()}}</h1>'
|
||||
})
|
||||
];
|
||||
// #docregion constructorproto
|
||||
HeroComponent.prototype.getName =
|
||||
function() {return 'Windstorm';};
|
||||
// #enddocregion constructorproto
|
||||
// #enddocregion metadata
|
||||
// #docregion
|
||||
// #docregion appexport
|
||||
// #docregion metadata
|
||||
app.HeroComponent = HeroComponent; // "export"
|
||||
|
||||
app.HeroesModule =
|
||||
ng.core.NgModule({
|
||||
imports: [ ng.platformBrowser.BrowserModule ],
|
||||
declarations: [ HeroComponent ],
|
||||
bootstrap: [ HeroComponent ]
|
||||
})
|
||||
.Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
HeroComponent.annotations = [
|
||||
new ng.core.Component({
|
||||
selector: 'hero-view',
|
||||
template: '<h1>{{title}}: {{getName()}}</h1>'
|
||||
})
|
||||
];
|
||||
|
||||
// #docregion appexport
|
||||
app.HeroComponent = HeroComponent;
|
||||
// #docregion constructorproto
|
||||
function HeroComponent() {
|
||||
this.title = "Hero Detail";
|
||||
}
|
||||
|
||||
HeroComponent.prototype.getName = function() { return 'Windstorm'; };
|
||||
// #enddocregion constructorproto
|
||||
|
||||
// #enddocregion metadata
|
||||
// #enddocregion appexport
|
||||
// #enddocregion
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
||||
//////////// DSL version ///////////
|
||||
|
||||
(function(app) {
|
||||
|
||||
// #docregion dsl
|
||||
app.HeroDslComponent = ng.core.Component({
|
||||
selector: 'hero-view-dsl',
|
||||
template: '<h1>{{title}}: {{getName()}}</h1>',
|
||||
})
|
||||
.Class({
|
||||
constructor: function HeroDslComponent() {
|
||||
this.title = "Hero Detail";
|
||||
},
|
||||
|
||||
getName: function() { return 'Windstorm'; }
|
||||
});
|
||||
// #enddocregion dsl
|
||||
|
||||
})(window.app = window.app || {});
|
||||
// #enddocregion appexport
|
||||
|
|
|
|||
|
|
@ -1,39 +0,0 @@
|
|||
(function(app) {
|
||||
|
||||
// #docregion
|
||||
var HeroesComponent = ng.core.Component({
|
||||
selector: 'heroes-bindings',
|
||||
template: '<h1 [class.active]="active">' +
|
||||
'Tour of Heroes' +
|
||||
'</h1>',
|
||||
host: {
|
||||
'[title]': 'title',
|
||||
'[class.heading]': 'hClass',
|
||||
'(click)': 'clicked()',
|
||||
'(dblclick)': 'doubleClicked($event)'
|
||||
}
|
||||
}).Class({
|
||||
constructor: function() {
|
||||
this.title = 'Tooltip content';
|
||||
this.hClass = true;
|
||||
},
|
||||
clicked: function() {
|
||||
this.active = !this.active;
|
||||
},
|
||||
doubleClicked: function(evt) {
|
||||
this.active = true;
|
||||
}
|
||||
});
|
||||
// #enddocregion
|
||||
|
||||
app.HeroesHostBindingsModule =
|
||||
ng.core.NgModule({
|
||||
imports: [ ng.platformBrowser.BrowserModule ],
|
||||
declarations: [ HeroesComponent ],
|
||||
bootstrap: [ HeroesComponent ]
|
||||
})
|
||||
.Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
(function(app) {
|
||||
|
||||
var ActiveLabelComponent = ng.core.Component({
|
||||
selector: 'active-label',
|
||||
template: '<span class="active-label"' +
|
||||
'*ngIf="active">' +
|
||||
'Active' +
|
||||
'</span>'
|
||||
}).Class({
|
||||
constructor: [function() { }],
|
||||
activate: function() {
|
||||
this.active = true;
|
||||
}
|
||||
});
|
||||
|
||||
// #docregion content
|
||||
var HeroComponent = ng.core.Component({
|
||||
selector: 'a-hero',
|
||||
template: '<h2 [class.active]=active>' +
|
||||
'{{hero.name}} ' +
|
||||
'<ng-content></ng-content>' +
|
||||
'</h2>',
|
||||
inputs: ['hero'],
|
||||
queries: {
|
||||
label: new ng.core.ContentChild(
|
||||
ActiveLabelComponent)
|
||||
}
|
||||
}).Class({
|
||||
constructor: [function() { }],
|
||||
activate: function() {
|
||||
this.active = true;
|
||||
this.label.activate();
|
||||
}
|
||||
});
|
||||
app.HeroQueriesComponent = HeroComponent;
|
||||
// #enddocregion content
|
||||
|
||||
// #docregion view
|
||||
var AppComponent = ng.core.Component({
|
||||
selector: 'heroes-queries',
|
||||
template:
|
||||
'<a-hero *ngFor="let hero of heroData"' +
|
||||
'[hero]="hero">' +
|
||||
'<active-label></active-label>' +
|
||||
'</a-hero>' +
|
||||
'<button (click)="activate()">' +
|
||||
'Activate' +
|
||||
'</button>',
|
||||
queries: {
|
||||
heroCmps: new ng.core.ViewChildren(
|
||||
HeroComponent)
|
||||
}
|
||||
}).Class({
|
||||
constructor: function() {
|
||||
this.heroData = [
|
||||
{id: 1, name: 'Windstorm'},
|
||||
{id: 2, name: 'Superman'}
|
||||
];
|
||||
},
|
||||
activate: function() {
|
||||
this.heroCmps.forEach(function(cmp) {
|
||||
cmp.activate();
|
||||
});
|
||||
}
|
||||
});
|
||||
// #enddocregion view
|
||||
|
||||
app.HeroesQueriesModule =
|
||||
ng.core.NgModule({
|
||||
imports: [ ng.platformBrowser.BrowserModule ],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
HeroComponent,
|
||||
ActiveLabelComponent
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
.Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
})(window.app = window.app || {});
|
||||
|
|
@ -1,35 +1,9 @@
|
|||
// #docplaster
|
||||
// #docregion appimport
|
||||
(function(app) {
|
||||
// #enddocregion appimport
|
||||
|
||||
// #docregion ng2import
|
||||
var platformBrowserDynamic =
|
||||
ng.platformBrowserDynamic.platformBrowserDynamic;
|
||||
var LocationStrategy =
|
||||
ng.common.LocationStrategy;
|
||||
var HashLocationStrategy =
|
||||
ng.common.HashLocationStrategy;
|
||||
// #enddocregion ng2import
|
||||
var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
|
||||
|
||||
// #docregion appimport
|
||||
var HeroComponent = app.HeroComponent;
|
||||
// #enddocregion appimport
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
platformBrowserDynamic().bootstrapModule(app.AppModule);
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
platformBrowserDynamic().bootstrapModule(app.HeroesModule);
|
||||
platformBrowserDynamic().bootstrapModule(app.HeroesDslModule);
|
||||
platformBrowserDynamic().bootstrapModule(app.HeroesLifecycleModule);
|
||||
platformBrowserDynamic().bootstrapModule(app.HeroesDIModule);
|
||||
platformBrowserDynamic().bootstrapModule(app.HeroDIInlineModule);
|
||||
platformBrowserDynamic().bootstrapModule(app.HeroesDIInjectModule);
|
||||
platformBrowserDynamic().bootstrapModule(app.HeroesDIInjectModule2);
|
||||
platformBrowserDynamic().bootstrapModule(app.HeroesDIInjectAdditionalModule);
|
||||
platformBrowserDynamic().bootstrapModule(app.HeroesIOModule);
|
||||
platformBrowserDynamic().bootstrapModule(app.HeroesHostBindingsModule);
|
||||
platformBrowserDynamic().bootstrapModule(app.HeroesQueriesModule);
|
||||
});
|
||||
|
||||
// #docregion appimport
|
||||
})(window.app = window.app || {});
|
||||
// #enddocregion appimport
|
||||
|
|
|
|||
|
|
@ -4,64 +4,41 @@
|
|||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>TypeScript to JavaScript</title>
|
||||
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
||||
<!-- Angular and RxJS umd scripts -->
|
||||
<script src="node_modules/rxjs/bundles/Rx.js"></script>
|
||||
<script src="node_modules/@angular/core/bundles/core.umd.js"></script>
|
||||
<script src="node_modules/@angular/common/bundles/common.umd.js"></script>
|
||||
<script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
|
||||
<script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
|
||||
<script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
|
||||
<script src="node_modules/@angular/router-deprecated/bundles/router-deprecated.umd.js"></script>
|
||||
|
||||
<!-- Application scripts -->
|
||||
<script src="app/app.component.js"></script>
|
||||
<script src="app/confirm.component.js"></script>
|
||||
<script src="app/data.service.js"></script>
|
||||
<script src="app/hero.component.js"></script>
|
||||
<script src="app/hero-dsl.component.js"></script>
|
||||
<script src="app/hero-lifecycle.component.js"></script>
|
||||
<script src="app/hero-io.component.js"></script>
|
||||
<script src="app/hero-di.component.js"></script>
|
||||
<script src="app/hero-di-inline.component.js"></script>
|
||||
<script src="app/hero-di-inject.component.js"></script>
|
||||
<script src="app/hero-di-inject-additional.component.js"></script>
|
||||
<script src="app/heroes-bindings.component.js"></script>
|
||||
<script src="app/heroes-queries.component.js"></script>
|
||||
<script src="app/hero-host.component.js"></script>
|
||||
<script src="app/hero-lifecycle.component.js"></script>
|
||||
<script src="app/hero-queries.component.js"></script>
|
||||
<script src="app/hero-title.component.js"></script>
|
||||
|
||||
<script src="app/app.module.js"></script>
|
||||
<script src="app/main.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a id="toc"></a>
|
||||
<h1>TypeScript to JavaScript</h1>
|
||||
<a href="#class-metadata">Classes and Class Metadata</a><br>
|
||||
<a href="#property-metadata">Input and Output Metadata</a><br>
|
||||
<a href="#dependency-injection">Dependency Injection</a><br>
|
||||
<a href="#other-property-metadata">Host and Query Metadata</a><br>
|
||||
|
||||
<hr>
|
||||
<h4 id="class-metadata">Classes and Class Metadata</h4>
|
||||
<hero-view>Loading hero-view...</hero-view>
|
||||
<hero-view-2>Loading hero-view2...</hero-view-2>
|
||||
<hero-lifecycle>Loading hero-lifecycle...</hero-lifecycle>
|
||||
|
||||
<hr>
|
||||
<h4 id="property-metadata">Input and Output Metadata</h4>
|
||||
<hero-io>Loading hero-io...</hero-io>
|
||||
|
||||
<hr>
|
||||
<h4 id="dependency-injection">Dependency Injection</h4>
|
||||
<hero-di>Loading hero-di...</hero-di>
|
||||
<hero-di-inline>Loading hero-di-inline...</hero-di-inline>
|
||||
<hero-di-inline2>Loading hero-di-inline2...</hero-di-inline2>
|
||||
<hero-di-inject>Loading hero-di-inject...</hero-di-inject>
|
||||
<hero-di-inject-additional>Loading hero-di-inject-additional...</hero-di-inject-additional>
|
||||
|
||||
<hr>
|
||||
<h4 id="other-property-metadata">Host and Query Metadata</h4>
|
||||
<heroes-bindings>Loading heroes-bindings...</heroes-bindings>
|
||||
<heroes-queries>Loading heroes-queries...</heroes-queries>
|
||||
<my-app>Loading...</my-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
<a id="toc"></a>
|
||||
<h1>{{title}}</h1>
|
||||
<a href="#class-metadata">Classes and Class Metadata</a><br>
|
||||
<a href="#io-metadata">Input and Output Decorators</a><br>
|
||||
<a href="#dependency-injection">Dependency Injection</a><br>
|
||||
<a href="#host-metadata">Host Metadata</a><br>
|
||||
<a href="#view-child-metadata">View and Child Metadata</a><br>
|
||||
|
||||
<hr>
|
||||
<h4 id="class-metadata">Classes and Class Metadata</h4>
|
||||
<hero-view></hero-view>
|
||||
<hero-lifecycle></hero-lifecycle>
|
||||
|
||||
<hr>
|
||||
<h4 id="io-metadata">Input and Output Metadata</h4>
|
||||
<hero-io></hero-io>
|
||||
|
||||
<hr>
|
||||
<h4 id="dependency-injection">Dependency Injection</h4>
|
||||
<hero-di></hero-di>
|
||||
<hero-di-inject></hero-di-inject>
|
||||
<hero-di-inject-additional></hero-di-inject-additional>
|
||||
|
||||
<hr>
|
||||
<h4 id="host-metadata">Host Metadata</h4>
|
||||
<hero-host></hero-host>
|
||||
<hero-host-meta></hero-host-meta>
|
||||
|
||||
<hr>
|
||||
<h4 id="view-child-metadata">View and Child Metadata</h4>
|
||||
<hero-queries></hero-queries>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-app',
|
||||
templateUrl: 'app.component.html',
|
||||
styles: [
|
||||
// See hero-di-inject-additional.component
|
||||
'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}',
|
||||
'.heading {font-style: italic}'
|
||||
]
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'TypeScript';
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
/* tslint:disable-next-line:no-unused-variable */
|
||||
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { ConfirmComponent } from './confirm.component';
|
||||
// #docregion appimport
|
||||
import { HeroComponent } from './hero.component';
|
||||
// #enddocregion appimport
|
||||
import { HeroComponent as HeroDIComponent } from './hero-di.component';
|
||||
import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
|
||||
import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
|
||||
import { HeroHostComponent } from './hero-host.component';
|
||||
import { HeroHostMetaComponent } from './hero-host-meta.component';
|
||||
import { HeroIOComponent } from './hero-io.component';
|
||||
import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
|
||||
import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component';
|
||||
import { HeroTitleComponent } from './hero-title.component';
|
||||
|
||||
import { DataService } from './data.service';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
ConfirmComponent,
|
||||
HeroComponent,
|
||||
HeroDIComponent,
|
||||
HeroDIInjectComponent,
|
||||
HeroDIInjectAdditionalComponent,
|
||||
HeroHostComponent, HeroHostMetaComponent,
|
||||
HeroIOComponent,
|
||||
HeroLifecycleComponent,
|
||||
HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
|
||||
HeroTitleComponent
|
||||
],
|
||||
providers: [
|
||||
DataService,
|
||||
{ provide: 'heroName', useValue: 'Windstorm' }
|
||||
],
|
||||
bootstrap: [ AppComponent ],
|
||||
|
||||
// schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging!
|
||||
})
|
||||
export class AppModule { }
|
||||
|
||||
/* tslint:disable no-unused-variable */
|
||||
// #docregion ng2import
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import {
|
||||
LocationStrategy,
|
||||
HashLocationStrategy
|
||||
} from '@angular/common';
|
||||
// #enddocregion ng2import
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<button (click)="onOkClick()">
|
||||
{{okMsg}}
|
||||
</button>
|
||||
<button (click)="onNotOkClick()">
|
||||
{{notOkMsg}}
|
||||
</button>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
||||
|
||||
// #docregion
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'app-confirm',
|
||||
templateUrl: 'confirm.component.html'
|
||||
})
|
||||
export class ConfirmComponent {
|
||||
@Input() okMsg = '';
|
||||
@Input('cancelMsg') notOkMsg = '';
|
||||
@Output() ok = new EventEmitter();
|
||||
@Output('cancel') notOk = new EventEmitter();
|
||||
|
||||
onOkClick() {
|
||||
this.ok.emit(true);
|
||||
}
|
||||
onNotOkClick() {
|
||||
this.notOk.emit(true);
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
|
@ -2,8 +2,8 @@ import { Injectable } from '@angular/core';
|
|||
|
||||
@Injectable()
|
||||
export class DataService {
|
||||
constructor() {
|
||||
}
|
||||
constructor() { }
|
||||
|
||||
getHeroName() {
|
||||
return 'Windstorm';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,50 +1,7 @@
|
|||
import {
|
||||
Attribute,
|
||||
Component,
|
||||
Inject,
|
||||
Optional,
|
||||
NgModule
|
||||
} from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
// #docregion
|
||||
@Component({
|
||||
selector: 'hero-title',
|
||||
template: `
|
||||
<h1>{{titlePrefix}} {{title}}</h1>
|
||||
<button (click)="ok()">OK</button>
|
||||
<p>{{ msg }}</p>
|
||||
`
|
||||
})
|
||||
class TitleComponent {
|
||||
private msg: string = '';
|
||||
constructor(
|
||||
@Inject('titlePrefix')
|
||||
@Optional()
|
||||
private titlePrefix: string,
|
||||
@Attribute('title')
|
||||
private title: string) {
|
||||
}
|
||||
|
||||
ok() {
|
||||
this.msg = 'OK!';
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-di-inject-additional',
|
||||
template: `<hero-title title="Tour of Heroes">
|
||||
</hero-title>`
|
||||
template: `<hero-title title="Tour of Heroes"></hero-title>`
|
||||
})
|
||||
class AppComponent { }
|
||||
|
||||
@NgModule({
|
||||
imports: [ BrowserModule ],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
TitleComponent
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class HeroesDIInjectAdditionalModule { }
|
||||
export class HeroComponent { }
|
||||
|
|
|
|||
|
|
@ -1,23 +1,11 @@
|
|||
import { Component, Inject, NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { Component, Inject } from '@angular/core';
|
||||
|
||||
// #docregion
|
||||
@Component({
|
||||
selector: 'hero-di-inject',
|
||||
template: `<h1>Hero: {{name}}</h1>`
|
||||
})
|
||||
class HeroComponent {
|
||||
constructor(
|
||||
@Inject('heroName')
|
||||
private name: string) {
|
||||
}
|
||||
export class HeroComponent {
|
||||
constructor(@Inject('heroName') private name: string) { }
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
@NgModule({
|
||||
imports: [ BrowserModule ],
|
||||
providers: [ { provide: 'heroName', useValue: 'Windstorm' } ],
|
||||
declarations: [ HeroComponent ],
|
||||
bootstrap: [ HeroComponent ]
|
||||
})
|
||||
export class HeroesDIInjectModule { }
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
import { Component, NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
import { DataService } from './data.service';
|
||||
|
||||
// #docregion
|
||||
|
|
@ -8,18 +6,10 @@ import { DataService } from './data.service';
|
|||
selector: 'hero-di',
|
||||
template: `<h1>Hero: {{name}}</h1>`
|
||||
})
|
||||
class HeroComponent {
|
||||
name: string;
|
||||
export class HeroComponent {
|
||||
name = '';
|
||||
constructor(dataService: DataService) {
|
||||
this.name = dataService.getHeroName();
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
@NgModule({
|
||||
imports: [ BrowserModule ],
|
||||
providers: [ DataService ],
|
||||
declarations: [ HeroComponent ],
|
||||
bootstrap: [ HeroComponent ]
|
||||
})
|
||||
export class HeroesDIModule { }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
// #docregion
|
||||
@Component({
|
||||
selector: 'hero-host-meta',
|
||||
template: `
|
||||
<h1 [class.active]="active">Hero Host in Metadata</h1>
|
||||
<div>Heading clicks: {{clicks}}</div>
|
||||
`,
|
||||
host: {
|
||||
// HostBindings to the <hero-host-meta> element
|
||||
'[title]': 'title',
|
||||
'[class.heading]': 'headingClass',
|
||||
|
||||
// HostListeners on the entire <hero-host-meta> element
|
||||
'(click)': 'clicked()',
|
||||
'(mouseenter)': 'enter($event)',
|
||||
'(mouseleave)': 'leave($event)'
|
||||
},
|
||||
// Styles within (but excluding) the <hero-host-meta> element
|
||||
styles: ['.active {background-color: coral;}']
|
||||
})
|
||||
export class HeroHostMetaComponent {
|
||||
title = 'Hero Host in Metadata Tooltip';
|
||||
headingClass = true;
|
||||
|
||||
active = false;
|
||||
clicks = 0;
|
||||
|
||||
clicked() {
|
||||
this.clicks += 1;
|
||||
}
|
||||
|
||||
enter(event: Event) {
|
||||
this.active = true;
|
||||
this.headingClass = false;
|
||||
}
|
||||
|
||||
leave(event: Event) {
|
||||
this.active = false;
|
||||
this.headingClass = true;
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import { Component, HostBinding, HostListener } from '@angular/core';
|
||||
|
||||
// #docregion
|
||||
@Component({
|
||||
selector: 'hero-host',
|
||||
template: `
|
||||
<h1 [class.active]="active">Hero Host in Decorators</h1>
|
||||
<div>Heading clicks: {{clicks}}</div>
|
||||
`,
|
||||
// Styles within (but excluding) the <hero-host> element
|
||||
styles: ['.active {background-color: yellow;}']
|
||||
})
|
||||
export class HeroHostComponent {
|
||||
// HostBindings to the <hero-host> element
|
||||
@HostBinding() title = 'Hero Host in Decorators Tooltip';
|
||||
@HostBinding('class.heading') headingClass = true;
|
||||
|
||||
active = false;
|
||||
clicks = 0;
|
||||
|
||||
// HostListeners on the entire <hero-host> element
|
||||
@HostListener('click')
|
||||
clicked() {
|
||||
this.clicks += 1;
|
||||
}
|
||||
|
||||
@HostListener('mouseenter', ['$event'])
|
||||
enter(event: Event) {
|
||||
this.active = true;
|
||||
this.headingClass = false;
|
||||
}
|
||||
|
||||
@HostListener('mouseleave', ['$event'])
|
||||
leave(event: Event) {
|
||||
this.active = false;
|
||||
this.headingClass = true;
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
|
@ -1,73 +1,26 @@
|
|||
import {
|
||||
Component,
|
||||
EventEmitter,
|
||||
Input,
|
||||
Output,
|
||||
NgModule
|
||||
} from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
// #docregion
|
||||
@Component({
|
||||
selector: 'my-confirm',
|
||||
template: `
|
||||
<button (click)="onOkClick()">
|
||||
{{okMsg}}
|
||||
</button>
|
||||
<button (click)="onNotOkClick()">
|
||||
{{notOkMsg}}
|
||||
</button>
|
||||
`
|
||||
})
|
||||
class ConfirmComponent {
|
||||
@Input() okMsg: string;
|
||||
@Input('cancelMsg') notOkMsg: string;
|
||||
@Output() ok =
|
||||
new EventEmitter();
|
||||
@Output('cancel') notOk =
|
||||
new EventEmitter();
|
||||
|
||||
onOkClick() {
|
||||
this.ok.next(true);
|
||||
}
|
||||
onNotOkClick() {
|
||||
this.notOk.next(true);
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-io',
|
||||
template: `
|
||||
<my-confirm [okMsg]="'OK'"
|
||||
[cancelMsg]="'Cancel'"
|
||||
(ok)="onOk()"
|
||||
(cancel)="onCancel()">
|
||||
</my-confirm>
|
||||
<app-confirm [okMsg]="'OK'"
|
||||
[cancelMsg]="'Cancel'"
|
||||
(ok)="onOk()"
|
||||
(cancel)="onCancel()">
|
||||
</app-confirm>
|
||||
<span *ngIf="okClicked">OK clicked</span>
|
||||
<span *ngIf="cancelClicked">Cancel clicked</span>
|
||||
`
|
||||
})
|
||||
class AppComponent {
|
||||
okClicked: boolean;
|
||||
cancelClicked: boolean;
|
||||
export class HeroIOComponent {
|
||||
okClicked = false;
|
||||
cancelClicked = false;
|
||||
|
||||
onOk() {
|
||||
this.okClicked = true;
|
||||
}
|
||||
|
||||
onCancel() {
|
||||
this.cancelClicked = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [ BrowserModule ],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
ConfirmComponent
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class HeroesIOModule { }
|
||||
|
|
|
|||
|
|
@ -1,28 +1,14 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
// #enddocregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-lifecycle',
|
||||
template: `<h1>Hero: {{name}}</h1>`
|
||||
})
|
||||
// #docregion
|
||||
class HeroComponent
|
||||
implements OnInit {
|
||||
export class HeroComponent implements OnInit {
|
||||
name: string;
|
||||
ngOnInit() {
|
||||
this.name = 'Windstorm';
|
||||
// todo: fetch from server async
|
||||
setTimeout(() => this.name = 'Windstorm', 0);
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
@NgModule({
|
||||
imports: [ BrowserModule ],
|
||||
declarations: [ HeroComponent ],
|
||||
bootstrap: [ HeroComponent ]
|
||||
})
|
||||
export class HeroesLifecycleModule { }
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
import {
|
||||
Component,
|
||||
ContentChild,
|
||||
Input,
|
||||
QueryList,
|
||||
ViewChildren
|
||||
} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'content-child',
|
||||
template: `
|
||||
<span class="content-child" *ngIf="active">
|
||||
Active
|
||||
</span>`
|
||||
})
|
||||
export class ContentChildComponent {
|
||||
active = false;
|
||||
|
||||
activate() {
|
||||
this.active = !this.active;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////
|
||||
|
||||
// #docregion content
|
||||
@Component({
|
||||
selector: 'view-child',
|
||||
template: `
|
||||
<h2 [class.active]=active>
|
||||
{{hero.name}}
|
||||
<ng-content></ng-content>
|
||||
</h2>`,
|
||||
styles: ['.active {font-weight: bold; background-color: skyblue;}']
|
||||
})
|
||||
export class ViewChildComponent {
|
||||
@Input() hero: any;
|
||||
active = false;
|
||||
|
||||
@ContentChild(ContentChildComponent) content: ContentChildComponent;
|
||||
|
||||
activate() {
|
||||
this.active = !this.active;
|
||||
this.content.activate();
|
||||
}
|
||||
}
|
||||
// #enddocregion content
|
||||
|
||||
////////////////////
|
||||
|
||||
// #docregion view
|
||||
@Component({
|
||||
selector: 'hero-queries',
|
||||
template: `
|
||||
<view-child *ngFor="let hero of heroData" [hero]="hero">
|
||||
<content-child></content-child>
|
||||
</view-child>
|
||||
<button (click)="activate()">{{buttonLabel}} All</button>
|
||||
`
|
||||
})
|
||||
export class HeroQueriesComponent {
|
||||
active = false;
|
||||
heroData = [
|
||||
{id: 1, name: 'Windstorm'},
|
||||
{id: 2, name: 'LaughingGas'}
|
||||
];
|
||||
|
||||
@ViewChildren(ViewChildComponent) views: QueryList<ViewChildComponent>;
|
||||
|
||||
activate() {
|
||||
this.active = !this.active;
|
||||
this.views.forEach(
|
||||
view => view.activate()
|
||||
);
|
||||
}
|
||||
|
||||
// #docregion defined-property
|
||||
get buttonLabel() {
|
||||
return this.active ? 'Deactivate' : 'Activate';
|
||||
}
|
||||
// #enddocregion defined-property
|
||||
}
|
||||
// #enddocregion view
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<!-- #docregion -->
|
||||
<h1>{{titlePrefix}} {{title}}</h1>
|
||||
<button (click)="ok()">OK</button>
|
||||
<p>{{ msg }}</p>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { Attribute, Component, Inject, Optional } from '@angular/core';
|
||||
|
||||
// #docregion
|
||||
// #docregion templateUrl
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-title',
|
||||
templateUrl: 'hero-title.component.html'
|
||||
})
|
||||
// #enddocregion templateUrl
|
||||
export class HeroTitleComponent {
|
||||
msg: string = '';
|
||||
constructor(
|
||||
@Inject('titlePrefix') @Optional() private titlePrefix: string,
|
||||
@Attribute('title') private title: string
|
||||
) { }
|
||||
|
||||
ok() {
|
||||
this.msg = 'OK!';
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
|
@ -1,30 +1,14 @@
|
|||
// #docplaster
|
||||
// #docregion metadata
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-view',
|
||||
template:
|
||||
'<h1>Hero: {{getName()}}</h1>'
|
||||
template: '<h1>{{title}}: {{getName()}}</h1>'
|
||||
})
|
||||
// #docregion appexport
|
||||
// #docregion class
|
||||
// #docregion appexport, class
|
||||
export class HeroComponent {
|
||||
title = 'Hero Detail';
|
||||
getName() {return 'Windstorm'; }
|
||||
}
|
||||
// #enddocregion class
|
||||
// #enddocregion appexport
|
||||
// #enddocregion appexport, class
|
||||
// #enddocregion metadata
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
@NgModule({
|
||||
imports: [ BrowserModule ],
|
||||
declarations: [ HeroComponent ],
|
||||
bootstrap: [ HeroComponent ]
|
||||
})
|
||||
export class HeroesModule { }
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,41 +0,0 @@
|
|||
import {
|
||||
Component,
|
||||
HostBinding,
|
||||
HostListener,
|
||||
NgModule
|
||||
} from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
// #docregion
|
||||
@Component({
|
||||
selector: 'heroes-bindings',
|
||||
template: `<h1 [class.active]="active">
|
||||
Tour of Heroes
|
||||
</h1>`
|
||||
})
|
||||
class HeroesComponent {
|
||||
@HostBinding() title = 'Tooltip content';
|
||||
@HostBinding('class.heading')
|
||||
hClass = true;
|
||||
active: boolean;
|
||||
|
||||
constructor() {}
|
||||
|
||||
@HostListener('click')
|
||||
clicked() {
|
||||
this.active = !this.active;
|
||||
}
|
||||
|
||||
@HostListener('dblclick', ['$event'])
|
||||
doubleClicked(evt: Event) {
|
||||
this.active = true;
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
@NgModule({
|
||||
imports: [ BrowserModule ],
|
||||
declarations: [ HeroesComponent ],
|
||||
bootstrap: [ HeroesComponent ]
|
||||
})
|
||||
export class HeroesHostBindingsModule { }
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
import {
|
||||
Component,
|
||||
ViewChildren,
|
||||
ContentChild,
|
||||
QueryList,
|
||||
Input,
|
||||
NgModule
|
||||
} from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
@Component({
|
||||
selector: 'active-label',
|
||||
template: `<span class="active-label"
|
||||
*ngIf="active">
|
||||
Active
|
||||
</span>`
|
||||
})
|
||||
class ActiveLabelComponent {
|
||||
active: boolean;
|
||||
|
||||
activate() {
|
||||
this.active = true;
|
||||
}
|
||||
}
|
||||
|
||||
// #docregion content
|
||||
@Component({
|
||||
selector: 'a-hero',
|
||||
template: `<h2 [class.active]=active>
|
||||
{{hero.name}}
|
||||
<ng-content></ng-content>
|
||||
</h2>`
|
||||
})
|
||||
class HeroComponent {
|
||||
@Input() hero: any;
|
||||
active: boolean;
|
||||
|
||||
@ContentChild(ActiveLabelComponent)
|
||||
label: ActiveLabelComponent;
|
||||
|
||||
activate() {
|
||||
this.active = true;
|
||||
this.label.activate();
|
||||
}
|
||||
}
|
||||
// #enddocregion content
|
||||
|
||||
|
||||
// #docregion view
|
||||
@Component({
|
||||
selector: 'heroes-queries',
|
||||
template: `
|
||||
<a-hero *ngFor="let hero of heroData"
|
||||
[hero]="hero">
|
||||
<active-label></active-label>
|
||||
</a-hero>
|
||||
<button (click)="activate()">
|
||||
Activate
|
||||
</button>
|
||||
`
|
||||
})
|
||||
class HeroesQueriesComponent {
|
||||
heroData = [
|
||||
{id: 1, name: 'Windstorm'},
|
||||
{id: 2, name: 'Superman'}
|
||||
];
|
||||
|
||||
@ViewChildren(HeroComponent)
|
||||
heroCmps: QueryList<HeroComponent>;
|
||||
|
||||
activate() {
|
||||
this.heroCmps.forEach(
|
||||
(cmp) => cmp.activate()
|
||||
);
|
||||
}
|
||||
}
|
||||
// #enddocregion view
|
||||
|
||||
@NgModule({
|
||||
imports: [ BrowserModule ],
|
||||
declarations: [
|
||||
HeroesQueriesComponent,
|
||||
HeroComponent,
|
||||
ActiveLabelComponent
|
||||
],
|
||||
bootstrap: [ HeroesQueriesComponent ]
|
||||
})
|
||||
export class HeroesQueriesModule { }
|
||||
|
|
@ -1,30 +1,4 @@
|
|||
/* tslint:disable no-unused-variable */
|
||||
// #docregion ng2import
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import {
|
||||
LocationStrategy,
|
||||
HashLocationStrategy
|
||||
} from '@angular/common';
|
||||
// #enddocregion ng2import
|
||||
|
||||
// #docregion appimport
|
||||
import { HeroComponent } from './hero.component';
|
||||
// #enddocregion appimport
|
||||
|
||||
import { HeroesModule } from './hero.component';
|
||||
import { HeroesLifecycleModule } from './hero-lifecycle.component';
|
||||
import { HeroesDIModule } from './hero-di.component';
|
||||
import { HeroesDIInjectModule } from './hero-di-inject.component';
|
||||
import { HeroesDIInjectAdditionalModule } from './hero-di-inject-additional.component';
|
||||
import { HeroesIOModule } from './hero-io.component';
|
||||
import { HeroesHostBindingsModule } from './heroes-bindings.component';
|
||||
import { HeroesQueriesModule } from './heroes-queries.component';
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(HeroesModule);
|
||||
platformBrowserDynamic().bootstrapModule(HeroesLifecycleModule);
|
||||
platformBrowserDynamic().bootstrapModule(HeroesDIModule);
|
||||
platformBrowserDynamic().bootstrapModule(HeroesDIInjectModule);
|
||||
platformBrowserDynamic().bootstrapModule(HeroesDIInjectAdditionalModule);
|
||||
platformBrowserDynamic().bootstrapModule(HeroesIOModule);
|
||||
platformBrowserDynamic().bootstrapModule(HeroesHostBindingsModule);
|
||||
platformBrowserDynamic().bootstrapModule(HeroesQueriesModule);
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { AppModule } from './app.module';
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>TypeScript to JavaScript</title>
|
||||
|
||||
<!-- Polyfills for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
|
@ -20,32 +21,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<a id="toc"></a>
|
||||
<h1>TypeScript to JavaScript</h1>
|
||||
<a href="#class-metadata">Classes and Class Metadata</a><br>
|
||||
<a href="#property-metadata">Input and Output Metadata</a><br>
|
||||
<a href="#dependency-injection">Dependency Injection</a><br>
|
||||
<a href="#other-property-metadata">Host and Query Metadata</a><br>
|
||||
|
||||
<hr>
|
||||
<h4 id="class-metadata">Classes and Class Metadata</h4>
|
||||
<hero-view id="class-metadata">Loading hero-view...</hero-view>
|
||||
<hero-lifecycle>Loading hero-lifecycle...</hero-lifecycle>
|
||||
|
||||
<hr>
|
||||
<h4 id="property-metadata">Input and Output Metadata</h4>
|
||||
<hero-io>Loading hero-io...</hero-io>
|
||||
|
||||
<hr>
|
||||
<h4 id="dependency-injection">Dependency Injection</h4>
|
||||
<hero-di>Loading hero-di...</hero-di>
|
||||
<hero-di-inject>Loading hero-di-inject...</hero-di-inject>
|
||||
<hero-di-inject-additional>Loading hero-di-inject-additional...</hero-di-inject-additional>
|
||||
|
||||
<hr>
|
||||
<h4 id="other-property-metadata">Host and Query Metadata</h4>
|
||||
<heroes-bindings>Loading heroes-bindings...</heroes-bindings>
|
||||
<heroes-queries id="other-property-metadata">Loading heroes-queries...</heroes-queries>
|
||||
<my-app>Loading...</my-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script>document.noBootstrap = true;</script>
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('app/main.0').catch(function(err){ console.error(err); });
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script>document.noBootstrap = true;</script>
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('app/main.1').catch(function(err){ console.error(err); });
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script>document.noBootstrap = true;</script>
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('app/main.1b').catch(function(err){ console.error(err); });
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script>document.noBootstrap = true;</script>
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('app/main.2').catch(function(err){ console.error(err); });
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue