docs: update to beta-12
This commit is contained in:
parent
5b27178083
commit
a2cb80330a
|
@ -1,10 +1,5 @@
|
||||||
<h1 id="top">Component Communication Cookbook</h1>
|
<h1 id="top">Component Communication Cookbook</h1>
|
||||||
|
|
||||||
<div style="background: yellow; font-weight:bold; margin: 1em 0; padding: 1em">
|
|
||||||
Known problem with beta.11 prevents this sample from working properly.
|
|
||||||
We'll fix it for beta.12.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="#parent-to-child">Pass data from parent to child with input binding ("Heros")</a><br/>
|
<a href="#parent-to-child">Pass data from parent to child with input binding ("Heros")</a><br/>
|
||||||
<a href="#parent-to-child-setter">Intercept input property changes with a setter ("Master")</a><br/>
|
<a href="#parent-to-child-setter">Intercept input property changes with a setter ("Master")</a><br/>
|
||||||
<a href="#parent-to-child-on-changes">Intercept input property changes with <i>ngOnChanges</i> ("Source code version")</a><br/>
|
<a href="#parent-to-child-on-changes">Intercept input property changes with <i>ngOnChanges</i> ("Source code version")</a><br/>
|
||||||
|
|
|
@ -14,9 +14,9 @@
|
||||||
|
|
||||||
<script src="https://code.angularjs.org/tools/system.js"></script>
|
<script src="https://code.angularjs.org/tools/system.js"></script>
|
||||||
<script src="https://code.angularjs.org/tools/typescript.js"></script>
|
<script src="https://code.angularjs.org/tools/typescript.js"></script>
|
||||||
<script src="https://code.angularjs.org/2.0.0-beta.11/angular2-polyfills.js"></script>
|
<script src="https://code.angularjs.org/2.0.0-beta.12/angular2-polyfills.js"></script>
|
||||||
<script src="https://code.angularjs.org/2.0.0-beta.11/Rx.js"></script>
|
<script src="https://code.angularjs.org/2.0.0-beta.12/Rx.js"></script>
|
||||||
<script src="https://code.angularjs.org/2.0.0-beta.11/angular2.dev.js"></script>
|
<script src="https://code.angularjs.org/2.0.0-beta.12/angular2.dev.js"></script>
|
||||||
|
|
||||||
<!-- 2. Configure SystemJS -->
|
<!-- 2. Configure SystemJS -->
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -15,9 +15,9 @@
|
||||||
|
|
||||||
<script src="https://code.angularjs.org/tools/system.js"></script>
|
<script src="https://code.angularjs.org/tools/system.js"></script>
|
||||||
<script src="https://code.angularjs.org/tools/typescript.js"></script>
|
<script src="https://code.angularjs.org/tools/typescript.js"></script>
|
||||||
<script src="https://code.angularjs.org/2.0.0-beta.11/angular2-polyfills.js"></script>
|
<script src="https://code.angularjs.org/2.0.0-beta.12/angular2-polyfills.js"></script>
|
||||||
<script src="https://code.angularjs.org/2.0.0-beta.11/Rx.js"></script>
|
<script src="https://code.angularjs.org/2.0.0-beta.12/Rx.js"></script>
|
||||||
<script src="https://code.angularjs.org/2.0.0-beta.11/angular2.dev.js"></script>
|
<script src="https://code.angularjs.org/2.0.0-beta.12/angular2.dev.js"></script>
|
||||||
|
|
||||||
<!-- 2. Configure SystemJS -->
|
<!-- 2. Configure SystemJS -->
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -15,9 +15,9 @@
|
||||||
|
|
||||||
<script src="https://code.angularjs.org/tools/system.js"></script>
|
<script src="https://code.angularjs.org/tools/system.js"></script>
|
||||||
<script src="https://code.angularjs.org/tools/typescript.js"></script>
|
<script src="https://code.angularjs.org/tools/typescript.js"></script>
|
||||||
<script src="https://code.angularjs.org/2.0.0-beta.11/angular2-polyfills.js"></script>
|
<script src="https://code.angularjs.org/2.0.0-beta.12/angular2-polyfills.js"></script>
|
||||||
<script src="https://code.angularjs.org/2.0.0-beta.11/Rx.js"></script>
|
<script src="https://code.angularjs.org/2.0.0-beta.12/Rx.js"></script>
|
||||||
<script src="https://code.angularjs.org/2.0.0-beta.11/angular2.dev.js"></script>
|
<script src="https://code.angularjs.org/2.0.0-beta.12/angular2.dev.js"></script>
|
||||||
|
|
||||||
<!-- 2. Configure SystemJS -->
|
<!-- 2. Configure SystemJS -->
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -19,15 +19,14 @@
|
||||||
"author": "",
|
"author": "",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"angular2": "2.0.0-beta.11",
|
"angular2": "2.0.0-beta.12",
|
||||||
"systemjs": "0.19.24",
|
"systemjs": "0.19.24",
|
||||||
"es6-promise": "^3.0.2",
|
|
||||||
"es6-shim": "^0.35.0",
|
"es6-shim": "^0.35.0",
|
||||||
"reflect-metadata": "0.1.2",
|
"reflect-metadata": "0.1.2",
|
||||||
"rxjs": "5.0.0-beta.2",
|
"rxjs": "5.0.0-beta.2",
|
||||||
"zone.js": "0.6.4",
|
"zone.js": "0.6.6",
|
||||||
|
|
||||||
"a2-in-memory-web-api": "^0.1.11",
|
"a2-in-memory-web-api": "^0.1.12",
|
||||||
"bootstrap": "^3.3.6"
|
"bootstrap": "^3.3.6"
|
||||||
|
|
||||||
},
|
},
|
||||||
|
@ -40,7 +39,7 @@
|
||||||
"http-server": "^0.9.0",
|
"http-server": "^0.9.0",
|
||||||
"jasmine-core": "~2.4.1",
|
"jasmine-core": "~2.4.1",
|
||||||
"karma": "^0.13.22",
|
"karma": "^0.13.22",
|
||||||
"karma-chrome-launcher": "^0.2.2",
|
"karma-chrome-launcher": "^0.2.3",
|
||||||
"karma-cli": "^0.1.2",
|
"karma-cli": "^0.1.2",
|
||||||
"karma-jasmine": "^0.3.8",
|
"karma-jasmine": "^0.3.8",
|
||||||
"live-server": "^0.9.2",
|
"live-server": "^0.9.2",
|
||||||
|
|
|
@ -7,12 +7,11 @@
|
||||||
},
|
},
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"angular2": "2.0.0-beta.11",
|
"angular2": "2.0.0-beta.12",
|
||||||
"es6-promise": "^3.0.2",
|
|
||||||
"es6-shim": "^0.35.0",
|
"es6-shim": "^0.35.0",
|
||||||
"reflect-metadata": "0.1.2",
|
"reflect-metadata": "0.1.2",
|
||||||
"rxjs": "5.0.0-beta.2",
|
"rxjs": "5.0.0-beta.2",
|
||||||
"zone.js": "0.6.4"
|
"zone.js": "0.6.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"concurrently": "^2.0.0",
|
"concurrently": "^2.0.0",
|
||||||
|
|
|
@ -11,13 +11,12 @@
|
||||||
},
|
},
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"angular2": "2.0.0-beta.11",
|
"angular2": "2.0.0-beta.12",
|
||||||
"systemjs": "0.19.24",
|
"systemjs": "0.19.24",
|
||||||
"es6-promise": "^3.0.2",
|
|
||||||
"es6-shim": "^0.35.0",
|
"es6-shim": "^0.35.0",
|
||||||
"reflect-metadata": "0.1.2",
|
"reflect-metadata": "0.1.2",
|
||||||
"rxjs": "5.0.0-beta.2",
|
"rxjs": "5.0.0-beta.2",
|
||||||
"zone.js": "0.6.4"
|
"zone.js": "0.6.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"concurrently": "^2.0.0",
|
"concurrently": "^2.0.0",
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
"icon": "home",
|
"icon": "home",
|
||||||
"title": "Angular Docs",
|
"title": "Angular Docs",
|
||||||
"menuTitle": "Docs Home",
|
"menuTitle": "Docs Home",
|
||||||
"banner": "Angular 2 is currently in Beta."
|
"banner": "The current Angular 2 release is beta.12. Please consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'> Change Log</a> about recent enhancements, fixes, and breaking changes."
|
||||||
},
|
},
|
||||||
|
|
||||||
"quickstart": {
|
"quickstart": {
|
||||||
|
|
|
@ -434,14 +434,12 @@ figure.image-display
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## DoCheck
|
## DoCheck
|
||||||
|
|
||||||
We can use the `DoCheck` hook to detect and act upon changes that Angular doesn't catch on its own.
|
We can use the `DoCheck` hook to detect and act upon changes that Angular doesn't catch on its own.
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
With this method we can detect a change that Angular overlooked.
|
With this method we can detect a change that Angular overlooked.
|
||||||
What we do with that information to refresh the display is a separate matter.
|
What we do with that information to refresh the display is a separate matter.
|
||||||
:marked
|
:marked
|
||||||
|
|
||||||
The *DoCheck* sample extends the *OnChanges* sample with this implementation of `DoCheck`:
|
The *DoCheck* sample extends the *OnChanges* sample with this implementation of `DoCheck`:
|
||||||
+makeExample('lifecycle-hooks/ts/app/do-check.component.ts', 'ng-do-check', 'DoCheckComponent (ngDoCheck)')(format=".")
|
+makeExample('lifecycle-hooks/ts/app/do-check.component.ts', 'ng-do-check', 'DoCheckComponent (ngDoCheck)')(format=".")
|
||||||
:marked
|
:marked
|
||||||
|
@ -544,7 +542,7 @@ figure.image-display
|
||||||
In this case, the projected content is the `<child-view>` from the parent.
|
In this case, the projected content is the `<child-view>` from the parent.
|
||||||
figure.image-display
|
figure.image-display
|
||||||
img(src='/resources/images/devguide/lifecycle-hooks/projected-child-view.png' width="230" alt="Projected Content")
|
img(src='/resources/images/devguide/lifecycle-hooks/projected-child-view.png' width="230" alt="Projected Content")
|
||||||
:marked
|
:marked
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
The tell-tale signs of *content projection* are (a) HTML between component element tags
|
The tell-tale signs of *content projection* are (a) HTML between component element tags
|
||||||
|
|
|
@ -1,14 +1,3 @@
|
||||||
.alert.is-critical
|
|
||||||
:marked
|
|
||||||
The current beta.11 release has known bugs relating to
|
|
||||||
significant changes to the _zones_ subsystem.
|
|
||||||
All apps will report an error to the console:<br>
|
|
||||||
<span style="color:red; font-family:Lucida Console;">
|
|
||||||
Uncaught TypeError: Cannot read property 'zone' of undefined</span><br>
|
|
||||||
The app will run unimpeded but it is disconcerting.
|
|
||||||
We hope to have this and other bugs repaired by beta.12.
|
|
||||||
Thanks for your patience.
|
|
||||||
|
|
||||||
div.card-row(layout='row')
|
div.card-row(layout='row')
|
||||||
div(flex)
|
div(flex)
|
||||||
md-card.card
|
md-card.card
|
||||||
|
|
|
@ -288,7 +288,7 @@ code-example(format="." language="html").
|
||||||
It does that work (somewhere) and eventually it calls our function with the results of the work or an error.
|
It does that work (somewhere) and eventually it calls our function with the results of the work or an error.
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
We are simplifying. Learn about ES2015 Promises [here](http://www.datchley.name/es6-promises/) and elsewhere on the web.
|
We are simplifying. Learn about ES2015 Promises [here](http://www.2ality.com/2014/10/es6-promises-api.html) and elsewhere on the web.
|
||||||
:marked
|
:marked
|
||||||
Update the `HeroService` with this promise-returning `getHeroes` method:
|
Update the `HeroService` with this promise-returning `getHeroes` method:
|
||||||
+makeExample('toh-4/ts/app/hero.service.ts', 'get-heroes', 'hero.service.ts (getHeroes)')(format=".")
|
+makeExample('toh-4/ts/app/hero.service.ts', 'get-heroes', 'hero.service.ts (getHeroes)')(format=".")
|
||||||
|
|
|
@ -40,47 +40,47 @@ var _rxData = [
|
||||||
{
|
{
|
||||||
pattern: 'script',
|
pattern: 'script',
|
||||||
from: 'node_modules/angular2/bundles/angular2.dev.js',
|
from: 'node_modules/angular2/bundles/angular2.dev.js',
|
||||||
to: 'https://code.angularjs.org/2.0.0-beta.11/angular2.dev.js'
|
to: 'https://code.angularjs.org/2.0.0-beta.12/angular2.dev.js'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
pattern: 'script',
|
pattern: 'script',
|
||||||
from: 'node_modules/angular2/bundles/angular2-all.umd.js',
|
from: 'node_modules/angular2/bundles/angular2-all.umd.js',
|
||||||
to: 'https://code.angularjs.org/2.0.0-beta.11/angular2-all.umd.dev.js'
|
to: 'https://code.angularjs.org/2.0.0-beta.12/angular2-all.umd.dev.js'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
pattern: 'script',
|
pattern: 'script',
|
||||||
from: 'node_modules/angular2/bundles/angular2-polyfills.js',
|
from: 'node_modules/angular2/bundles/angular2-polyfills.js',
|
||||||
to: 'https://code.angularjs.org/2.0.0-beta.11/angular2-polyfills.js'
|
to: 'https://code.angularjs.org/2.0.0-beta.12/angular2-polyfills.js'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
pattern: 'script',
|
pattern: 'script',
|
||||||
from: 'node_modules/rxjs/bundles/Rx.js',
|
from: 'node_modules/rxjs/bundles/Rx.js',
|
||||||
to: 'https://code.angularjs.org/2.0.0-beta.11/Rx.js'
|
to: 'https://code.angularjs.org/2.0.0-beta.12/Rx.js'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
pattern: 'script',
|
pattern: 'script',
|
||||||
from: 'node_modules/rxjs/bundles/Rx.umd.js',
|
from: 'node_modules/rxjs/bundles/Rx.umd.js',
|
||||||
to: 'https://code.angularjs.org/2.0.0-beta.11/Rx.umd.js'
|
to: 'https://code.angularjs.org/2.0.0-beta.12/Rx.umd.js'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
pattern: 'script',
|
pattern: 'script',
|
||||||
from: 'node_modules/angular2/bundles/router.dev.js',
|
from: 'node_modules/angular2/bundles/router.dev.js',
|
||||||
to: 'https://code.angularjs.org/2.0.0-beta.11/router.dev.js'
|
to: 'https://code.angularjs.org/2.0.0-beta.12/router.dev.js'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
pattern: 'script',
|
pattern: 'script',
|
||||||
from: 'node_modules/angular2/bundles/http.dev.js',
|
from: 'node_modules/angular2/bundles/http.dev.js',
|
||||||
to: 'https://code.angularjs.org/2.0.0-beta.11/http.dev.js'
|
to: 'https://code.angularjs.org/2.0.0-beta.12/http.dev.js'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
pattern: 'script',
|
pattern: 'script',
|
||||||
from: 'node_modules/angular2/bundles/testing.dev.js',
|
from: 'node_modules/angular2/bundles/testing.dev.js',
|
||||||
to: 'https://code.angularjs.org/2.0.0-beta.11/testing.dev.js'
|
to: 'https://code.angularjs.org/2.0.0-beta.12/testing.dev.js'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
pattern: 'script',
|
pattern: 'script',
|
||||||
from: 'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
|
from: 'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
|
||||||
to: 'https://npmcdn.com/angular2@2.0.0-beta.11/es6/dev/src/testing/shims_for_IE.js'
|
to: 'https://npmcdn.com/angular2@2.0.0-beta.12/es6/dev/src/testing/shims_for_IE.js'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
pattern: 'script',
|
pattern: 'script',
|
||||||
|
|
Loading…
Reference in New Issue