From 33340dbbd156d45e50b886f05095551f41c38600 Mon Sep 17 00:00:00 2001 From: Victor Berchet Date: Fri, 23 Sep 2016 16:23:28 -0700 Subject: [PATCH] docs: remove outdated docs (#11875) --- .../change_detection/change_detector_ref.ts | 6 +- modules/@angular/core/src/linker/errors.ts | 9 +- .../@angular/core/src/metadata/directives.ts | 9 +- modules/@angular/core/src/zone/ng_zone.ts | 1 - .../docs/change_detection/change_detection.md | 10 - .../docs/change_detection/expressions.md | 7 - .../@angular/docs/change_detection/record.md | 3 - modules/@angular/docs/core/00_index.md | 3 - modules/@angular/docs/core/01_templates.md | 610 ------------------ modules/@angular/docs/core/02_directives.md | 378 ----------- modules/@angular/docs/core/03_pipes.md | 27 - .../docs/core/04_decorator_directive.md | 0 .../docs/core/05_component_directive.md | 5 - .../docs/core/06_viewport_directive.md | 0 modules/@angular/docs/core/07_services.md | 0 modules/@angular/docs/core/08_lifecycle.md | 0 modules/@angular/docs/core/09_compilation.md | 21 - modules/@angular/docs/core/10_view.md | 246 ------- modules/@angular/docs/core/11_shadow_dom.md | 0 modules/@angular/docs/core/12_zones.md | 108 ---- modules/@angular/docs/migration/kebab-case.md | 239 ------- modules/@angular/forms/src/directives.ts | 15 +- 22 files changed, 8 insertions(+), 1689 deletions(-) delete mode 100644 modules/@angular/docs/change_detection/change_detection.md delete mode 100644 modules/@angular/docs/change_detection/expressions.md delete mode 100644 modules/@angular/docs/change_detection/record.md delete mode 100644 modules/@angular/docs/core/00_index.md delete mode 100644 modules/@angular/docs/core/01_templates.md delete mode 100644 modules/@angular/docs/core/02_directives.md delete mode 100644 modules/@angular/docs/core/03_pipes.md delete mode 100644 modules/@angular/docs/core/04_decorator_directive.md delete mode 100644 modules/@angular/docs/core/05_component_directive.md delete mode 100644 modules/@angular/docs/core/06_viewport_directive.md delete mode 100644 modules/@angular/docs/core/07_services.md delete mode 100644 modules/@angular/docs/core/08_lifecycle.md delete mode 100644 modules/@angular/docs/core/09_compilation.md delete mode 100644 modules/@angular/docs/core/10_view.md delete mode 100644 modules/@angular/docs/core/11_shadow_dom.md delete mode 100644 modules/@angular/docs/core/12_zones.md delete mode 100644 modules/@angular/docs/migration/kebab-case.md diff --git a/modules/@angular/core/src/change_detection/change_detector_ref.ts b/modules/@angular/core/src/change_detection/change_detector_ref.ts index e91a7cd573..21bb7dde38 100644 --- a/modules/@angular/core/src/change_detection/change_detector_ref.ts +++ b/modules/@angular/core/src/change_detection/change_detector_ref.ts @@ -41,7 +41,6 @@ export abstract class ChangeDetectorRef { * template: ` * * `, - * directives: [Cmp] * }) * class App { * } @@ -81,7 +80,6 @@ export abstract class ChangeDetectorRef { * template: ` *
  • Data {{d}} * `, - * directives: [NgFor] * }) * class GiantList { * constructor(private ref: ChangeDetectorRef, private dataProvider:DataProvider) { @@ -98,7 +96,6 @@ export abstract class ChangeDetectorRef { * template: ` * * `, - * directives: [GiantList] * }) * class App { * } @@ -166,7 +163,7 @@ export abstract class ChangeDetectorRef { * @Component({ * selector: 'live-data', * inputs: ['live'], - * template: `Data: {{dataProvider.data}}` + * template: 'Data: {{dataProvider.data}}' * }) * class LiveData { * constructor(private ref: ChangeDetectorRef, private dataProvider:DataProvider) {} @@ -186,7 +183,6 @@ export abstract class ChangeDetectorRef { * Live Update: * * `, - * directives: [LiveData, FORM_DIRECTIVES] * }) * class App { * live = true; diff --git a/modules/@angular/core/src/linker/errors.ts b/modules/@angular/core/src/linker/errors.ts index 2154076327..704bc1addf 100644 --- a/modules/@angular/core/src/linker/errors.ts +++ b/modules/@angular/core/src/linker/errors.ts @@ -25,13 +25,10 @@ import {DebugContext} from './debug_context'; * ```typescript * @Component({ * selector: 'parent', - * template: ` - * - * `, - * directives: [forwardRef(() => Child)] + * template: '', * }) * class Parent { - * parentProp = "init"; + * parentProp = 'init'; * } * * @Directive({selector: 'child', inputs: ['prop']}) @@ -41,7 +38,7 @@ import {DebugContext} from './debug_context'; * set prop(v) { * // this updates the parent property, which is disallowed during change detection * // this will result in ExpressionChangedAfterItHasBeenCheckedError - * this.parent.parentProp = "updated"; + * this.parent.parentProp = 'updated'; * } * } * ``` diff --git a/modules/@angular/core/src/metadata/directives.ts b/modules/@angular/core/src/metadata/directives.ts index 7a1cf43bec..9fc49cf5eb 100644 --- a/modules/@angular/core/src/metadata/directives.ts +++ b/modules/@angular/core/src/metadata/directives.ts @@ -928,7 +928,6 @@ export interface HostBindingDecorator { * @Component({ * selector: 'app', * template: ``, - * directives: [FORM_DIRECTIVES, NgModelStatus] * }) * class App { * prop; @@ -968,8 +967,7 @@ export interface HostListenerDecorator { * * Angular will invoke the decorated method when the host element emits the specified event. * - * If the decorated method returns `false`, then `preventDefault` is applied on the DOM - * event. + * If the decorated method returns `false`, then `preventDefault` is applied on the DOM event. * * ### Example * @@ -983,14 +981,13 @@ export interface HostListenerDecorator { * * @HostListener('click', ['$event.target']) * onClick(btn) { - * console.log("button", btn, "number of clicks:", this.numberOfClicks++); + * console.log('button', btn, 'number of clicks:', this.numberOfClicks++); * } * } * * @Component({ * selector: 'app', - * template: ``, - * directives: [CountClicks] + * template: '', * }) * class App {} * ``` diff --git a/modules/@angular/core/src/zone/ng_zone.ts b/modules/@angular/core/src/zone/ng_zone.ts index c4afd6501f..6f90f722fe 100644 --- a/modules/@angular/core/src/zone/ng_zone.ts +++ b/modules/@angular/core/src/zone/ng_zone.ts @@ -40,7 +40,6 @@ import {NgZoneImpl} from './ng_zone_impl'; * * * `, - * directives: [NgIf] * }) * export class NgZoneDemo { * progress: number = 0; diff --git a/modules/@angular/docs/change_detection/change_detection.md b/modules/@angular/docs/change_detection/change_detection.md deleted file mode 100644 index 4207687163..0000000000 --- a/modules/@angular/docs/change_detection/change_detection.md +++ /dev/null @@ -1,10 +0,0 @@ -@name Change Detection -@description -# Change Detection - -* Mechanisms by which changes are detected in the model -* DAG -* Order of evaluation -* Pure Functions -* `onChange` method -* Parser diff --git a/modules/@angular/docs/change_detection/expressions.md b/modules/@angular/docs/change_detection/expressions.md deleted file mode 100644 index e9cdc9aa9b..0000000000 --- a/modules/@angular/docs/change_detection/expressions.md +++ /dev/null @@ -1,7 +0,0 @@ -# Expressions - -## Binding Semantics - -### Formatters - -## Statement Semantics \ No newline at end of file diff --git a/modules/@angular/docs/change_detection/record.md b/modules/@angular/docs/change_detection/record.md deleted file mode 100644 index 343624acec..0000000000 --- a/modules/@angular/docs/change_detection/record.md +++ /dev/null @@ -1,3 +0,0 @@ -# Record - -## RecordRange \ No newline at end of file diff --git a/modules/@angular/docs/core/00_index.md b/modules/@angular/docs/core/00_index.md deleted file mode 100644 index 95c575cf1b..0000000000 --- a/modules/@angular/docs/core/00_index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Overview - -* High level description of all of the components. \ No newline at end of file diff --git a/modules/@angular/docs/core/01_templates.md b/modules/@angular/docs/core/01_templates.md deleted file mode 100644 index abd6d2cc66..0000000000 --- a/modules/@angular/docs/core/01_templates.md +++ /dev/null @@ -1,610 +0,0 @@ -# Templates - -Templates are markup which is added to HTML to declaratively describe how the application model should be -projected to DOM as well as which DOM events should invoke which methods on the controller. Templates contain -syntaxes which are core to Angular and allows for data-binding, event-binding, template-instantiation. - -The design of the template syntax has these properties: - - -* All data-binding expressions are easily identifiable. (i.e. there is never an ambiguity whether the value should be - interpreted as string literal or as an expression.) -* All events and their statements are easily identifiable. -* All places of DOM instantiation are easily identifiable. -* All places of variable declaration are easily identifiable. - -The above properties guarantee that the templates are easy to parse by tools (such as IDEs) and reason about by people. -At no point is it necessary to understand which directives are active or what their semantics are in order to reason -about the template runtime characteristics. - - - -## Summary - -Below is a summary of the kinds of syntaxes which Angular templating supports. The syntaxes are explained in more -detail in the following sections. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    DescriptionShortCanonical
    Text Interpolation -
    -<div>{{exp}}</div>
-
    - -Example: -
    -<div>
-  Hello {{name}}!
-  <br>
-  Goodbye {{name}}!
-</div>
-
    -     		-
    -<div [text|index]="exp"></div>
-
    - -Example: -
    -<div
-  [text|0]=" 'Hello' + stringify(name) + '!' "
-  [text|2]=" 'Goodbye' + stringify(name) + '!' ">
-  <b>x</b>
-</div>
-
    -
    Property Interpolation -
    -<div name="{{exp}}"></div>
-
    - -Example: - -
    -<div class="{{selected}}"></div>
-
    -     		-
    -<div [name]="stringify(exp)"></div>
-
    - -Example: - -
    -<div [title]="stringify(selected)"></div>
-
    -
    Property binding -
    -<div [prop]="exp"></div>
-
    - -Example: - -
    -<div [hidden]="true"></div>
-
    -     		-
    -<div bind-prop="exp"></div>
-
    - -Example: - -
    -<div bind-hidden="true"></div>
-
    -
    Event binding (non-bubbling) -
    -<div (event)="statement"></div>
-
    - -Example: - -
    -<div (click)="doX()"></div>
-
    -     		-
    -<div on-event="statement"></div>
-
    - -Example: - -
    -<video #player>
-  <button (click)="player.play()">play</button>
-</video>
-
    - -Or: - -
    -<div def="symbol"></div>
-
    - -Example: - -
    -<video def="player">
-  <button on-click="player.play()">play</button>
-</video>
-
    -
    Inline Template -
    -<div template="...">...</div>
-
    - -Example: - -
    -<ul>
-  <li template="for: #item of items">
-    {{item}}
-  </li>
-</ul>
-
    -     		-
    -<template>...</template>
-
    - -Example: -
    -<ul>
-  <template def-for:"item"
-            bind-for-in="items">
-    <li>
-      {{item}}
-    </li>
-  </template>
-</ul>
-
    -
    Explicit Template -
    -<template>...</template>
-
    - -Example: - -
    -<template #for="item"
-          [for-in]="items">
-  _some_content_to_repeat_
-</template>
-
    -     		-
    -<template>...</template>
-
    - -Example: - -
    -<template def-for="item"
-          bind-for-in="items">
-  _some_content_to_repeat_
-</template>
-
    -
    - - - -## Property Binding - -Binding application model data to the UI is the most common kind of bindings in an Angular application. The bindings -are always in the form of `property-name` which is assigned an `expression`. The generic form is: - - - - - - - - - - -
    Short form
    <some-element [someProperty]="expression">
    Canonical form
    <some-element bind-some-property="expression">
    - - -Where: -* `some-element` can be any existing DOM element. -* `someProperty` or `some-property` (escaped with `[]` or `bind-`) is the name of the property on `some-element`. If - the property is dash-case, it will be converted into camel-case `someProperty`. -* `expression` is a valid expression (as defined in section below). - -Example: -``` -
    -``` - -In the above example the `title` property of the `div` element will be updated whenever the `user.firstName` changes -its value. - -Key points: -* The binding is to the element property not the element attribute. -* To prevent custom element from accidentally reading the literal `expression` on the title element, the attribute name - is escaped. In our case the `title` is escaped to `[title]` through the addition of square brackets `[]`. -* A binding value (in this case `user.firstName`) will always be an expression, never a string literal. - -NOTE: Unlike Angular v1, Angular v2 binds to properties of elements rather than attributes of elements. This is -done to better support custom elements, and to allow binding for values other than strings. - -NOTE: Some editors/server side pre-processors may have trouble generating `[]` around the attribute name. For this -reason Angular also supports a canonical version which is prefixed using `bind-`. - - - -### String Interpolation - -Property bindings are the only data bindings which Angular supports, but for convenience Angular supports an interpolation -syntax which is just a short hand for the data binding syntax. - -``` -Hello {{name}}! -``` - -is a short hand for: - -``` - -``` - -The above says to bind the `'Hello ' + stringify(name) + '!'` expression to the zero-th child of the `span`'s `text` -property. The index is necessary in case there are more than one text nodes, or if the text node we wish to bind to -is not the first one. - -Similarly the same rules apply to interpolation inside attributes. - -``` - -``` - -is a short hand for: - -``` - -``` - -NOTE: `stringify()` is a built in implicit function which converts its argument to a string representation, while -keeping `null` and `undefined` as empty strings. - - - - -## Local Variables - - - - -## Inline Templates - -Data binding allows updating the DOM's properties, but it does not allow for changing of the DOM structure. To change -DOM structure we need the ability to define child templates, and then instantiate these templates into Views. The -Views than can be inserted and removed as needed to change the DOM structure. - - - - - - - - - - -
    Short form -
    -parent template
-<element>
-  <some-element template="instantiating-directive-microsyntax">child template</some-element>
-</element>
-
    -
    Canonical form -
    -parent template
-<element>
-  <template instantiating-directive-bindings>
-    <some-element>child template</some-element>
-  </template>
-</element>
-
    -
    - -Where: -* `template` defines a child template and designates the anchor where Views (instances of the template) will be - inserted. The template can be defined implicitly with `template` attribute, which turns the current element into - a template, or explicitly with `