8000 docs(api): add api files for alpha-25 · rusongyu/angular.io@d62557a · GitHub
[go: up one dir, main page]
Skip to content

Commit d62557a

Browse files
naomiblacknaomiblack
committed
docs(api): add api files for alpha-25
1 parent 2f62173 commit d62557a

File tree

202 files changed

+9631
-1037
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

202 files changed

+9631
-1037
lines changed

‎public/docs/js/latest/api/annotations/Ancestor-var.jade

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
2+
.l-main-section
3+
h2 Ancestor <span class="type">variable</span>
4+
p.location-badge.
5+
exported from <a href='../annotations'>angular2/annotations</a>
6+
7+
:markdown
8+
9+
10+

‎public/docs/js/latest/api/annotations/Attribute-var.jade

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
2+
.l-main-section
3+
h2 Attribute <span class="type">variable</span>
4+
p.location-badge.
5+
exported from <a href='../annotations'>angular2/annotations</a>
6+
7+
:markdown
8+
9+
10+

‎public/docs/js/latest/api/annotations/Component-var.jade

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
2+
.l-main-section
3+
h2 Component <span class="type">variable</span>
4+
p.location-badge.
5+
exported from <a href='../annotations'>angular2/annotations</a>
6+
7+
:markdown
8+
9+
10+

‎public/docs/js/latest/api/annotations/ComponentAnnotation-class.jade

Lines changed: 257 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
2+
p.location-badge.
3+
exported from <a href='../annotations'>angular2/annotations</a>
4+
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/annotations.ts#L778-L1011">angular2/src/core/annotations_impl/annotations.ts (line 778)</a>
5+
6+
:markdown
7+
Declare reusable UI building blocks for an application.
8+
9+
Each Angular component requires a single `@Component` and at least one `@View` annotation. The
10+
`@Component`
11+
annotation specifies when a component is instantiated, and which properties and hostListeners it
12+
binds to.
13+
14+
When a component is instantiated, Angular
15+
- creates a shadow DOM for the component.
16+
- loads the selected template into the shadow DOM.
17+
- creates a child <a href='../di/Injector-class.html'><code>Injector</code></a> which is configured with the `appInjector` for the
18+
<a href='Component-var.html'><code>Component</code></a>.
19+
20+
All template expressions and statements are then evaluated against the component instance.
21+
22+
For details on the `@View` annotation, see <a href='View-var.html'><code>View</code></a>.
23+
24+
## Example
25+
26+
```
27+
@Component({
28+
selector: 'greet'
29+
})
30+
@View({
31+
template: 'Hello {{name}}!'
32+
})
33+
class Greet {
34+
name: string;
35+
36+
constructor() {
37+
this.name = 'World';
38+
}
39+
}
40+
```
41+
42+
43+
Dynamically loading a component at runtime:
44+
45+
Regular Angular components are statically resolved. Dynamic components allows to resolve a
46+
component at runtime
47+
instead by providing a placeholder into which a regular Angular component can be dynamically
48+
loaded. Once loaded,
49+
the dynamically-loaded component becomes permanent and cannot be changed.
50+
Dynamic components are declared just like components, but without a `@View` annotation.
51+
52+
53+
## Example
54+
55+
Here we have `DynamicComp` which acts as the placeholder for `HelloCmp`. At runtime, the dynamic
56+
component
57+
`DynamicComp` requests loading of the `HelloCmp` component.
58+
59+
There is nothing special about `HelloCmp`, which is a regular Angular component. It can also be
60+
used in other static
61+
locations.
62+
63+
```
64+
@Component({
65+
selector: 'dynamic-comp'
66+
})
67+
class DynamicComp {
68+
helloCmp:HelloCmp;
69+
constructor(loader:DynamicComponentLoader, location:ElementRef) {
70+
loader.load(HelloCmp, location).then((helloCmp) => {
71+
this.helloCmp = helloCmp;
72+
});
73+
}
74+
}
75+
76+
@Component({
77+
selector: 'hello-cmp'
78+
})
79+
@View({
80+
template: "{{greeting}}"
81+
})
82+
class HelloCmp {
83+
greeting:string;
84+
constructor() {
85+
this.greeting = "hello";
86+
}
87+
}
88+
```
89+
90+
91+
.l-main-section
92+
h2 Members
93+
.l-sub-section
94+
h3 constructor
95+
96+
97+
pre.prettyprint
98+
code.
99+
constructor({selector, properties, events, hostListeners, hostProperties, hostAttributes,
100+
hostActions, appInjector, lifecycle, hostInjector, viewInjector,
101+
changeDetection = DEFAULT, compileChildren = true}: {
102+
selector?: string,
103+
properties?: List&lt;string&gt;,
104+
events?: List&lt;string&gt;,
105+
hostListeners?: StringMap&lt;string, string&gt;,
106+
hostProperties?: StringMap&lt;string, string&gt;,
107+
hostAttributes?: StringMap&lt;string, string&gt;,
108+
hostActions?: StringMap&lt;string, string&gt;,
109+
appInjector?: List&lt;any&gt;,
110+
lifecycle?: List&lt;LifecycleEvent&gt;,
111+
hostInjector?: List&lt;any&gt;,
112+
viewInjector?: List&lt;any&gt;,
113+
changeDetection?: string,
114+
compileChildren?: boolean
115+
} = {})
116+
117+
:markdown
118+
119+
120+
121+
122+
123+
124+
.l-sub-section
125+
h3 appInjector
126+
127+
128+
:markdown
129+
130+
Defines the set of injectable objects that are visible to a Component and its children.
131+
132+
The `appInjector` defined in the Component annotation allow you to configure a set of bindings
133+
for the component's
134+
injector.
135+
136+
When a component is instantiated, Angular creates a new child Injector, which is configured
137+
with the bindings in
138+
the Component `appInjector` annotation. The injectable objects then become available for
139+
injection to the component
140+
itself and any of the directives in the component's template, i.e. they are not available to
141+
the directives which
142+
are children in the component's light DOM.
143+
144+
145+
The syntax for configuring the `appInjector` injectable is identical to <a href='../di/Injector-class.html'><code>Injector</code></a>
146+
injectable configuration.
147+
See <a href='../di/Injector-class.html'><code>Injector</code></a> for additional detail.
148+
149+
150+
## Simple Example
151+
152+
Here is an example of a class that can be injected:
153+
154+
```
155+
class Greeter {
156+
greet(name:string) {
157+
return 'Hello ' + name + '!';
158+
}
159+
}
160+
161+
@Component({
162+
selector: 'greet',
163+
appInjector: [
164+
Greeter
165+
]
166+
})
167+
@View({
168+
template: `{{greeter.greet('world')}}!`,
169+
directives: [Child]
170+
})
171+
class HelloWorld {
172+
greeter:Greeter;
173+
174+
constructor(greeter:Greeter) {
175+
this.greeter = greeter;
176+
}
177+
}
178+
```
179+
180+
181+
182+
183+
184+
185+
186+
.l-sub-section
187+
h3 changeDetection
188+
189+
190+
:markdown
191+
192+
Defines the used change detection strategy.
193+
194+
When a component is instantiated, Angular creates a change detector, which is responsible for
195+
propagating
196+
the component's bindings.
197+
198+
The `changeDetection` property defines, whether the change detection will be checked every time
199+
or only when the component
200+
tells it to do so.
201+
202+
203+
204+
205+
206+
207+
208+
.l-sub-section
209+
h3 viewInjector
210+
211+
212+
:markdown
213+
214+
Defines the set of injectable objects that are visible to its view dom children.
215+
216+
## Simple Example
217+
218+
Here is an example of a class that can be injected:
219+
220+
```
221+
class Greeter {
222+
greet(name:string) {
223+
return 'Hello ' + name + '!';
224+
}
225+
}
226+
227+
@Directive({
228+
selector: 'needs-greeter'
229+
})
230+
class NeedsGreeter {
231+
greeter:Greeter;
232+
233+
constructor(greeter:Greeter) {
234+
this.greeter = greeter;
235+
}
236+
}
237+
238+
@Component({
239+
selector: 'greet',
240+
viewInjector: [
241+
Greeter
242+
]
243+
})
244+
@View({
245+
template: `<needs-greeter></needs-greeter>`,
246+
directives: [NeedsGreeter]
247+
})
248+
class HelloWorld {
249+
}
250+
251+
```
252+
253+
254+
255+
256+
257+

‎public/docs/js/latest/api/annotations/Directive-var.jade

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
2+
.l-main-section
3+
h2 Directive <span class="type">variable</span>
4+
p.location-badge.
5+
exported from <a href='../annotations'>angular2/annotations</a>
6+
7+
:markdown
8+
9+
10+

0 commit comments

Comments
 (0)
0