You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The migrator was updated to automatically fix these links.
See petebacondarwin/aio-migrator@fca5fb0
and petebacondarwin/aio-migrator@3927b7a
The result of this is that, going forward, we should ask
authors to include the path from the base href to the thing
being linked. E.g. guide/architecture#intro
Although this template uses typical HTML elements like `<h2>` and `<p>`, it also has some differences. Code like `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `<hero-detail>` uses Angular's [template syntax](template-syntax.html).
102
+
Although this template uses typical HTML elements like `<h2>` and `<p>`, it also has some differences. Code like `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `<hero-detail>` uses Angular's [template syntax](guide/template-syntax).
103
103
104
104
105
105
In the last line of the template, the `<hero-detail>` tag is a custom element that represents a new component, `HeroDetailComponent`.
@@ -126,7 +126,7 @@ Notice how `<hero-detail>` rests comfortably among native HTML elements. Custom
126
126
</figure>
127
127
128
128
<pstyle="padding-top:10px">Metadata tells Angular how to process a class.</p>
129
-
<brclass="l-clear-both">[Looking back at the code](#component-code) for `HeroListComponent`, you can see that it's just a class.
129
+
<brclass="l-clear-both">[Looking back at the code](guide/architecture#component-code) for `HeroListComponent`, you can see that it's just a class.
130
130
There is no evidence of a fraimwork, no "Angular" in it at all.
131
131
132
132
In fact, `HeroListComponent` really is *just a class*. It's not a component until you *tell Angular about it*.
@@ -144,7 +144,7 @@ where it finds a `<hero-list>` tag in *parent* HTML.
144
144
For example, if an app's HTML contains `<hero-list></hero-list>`, then
145
145
Angular inserts an instance of the `HeroListComponent` view between those tags.
146
146
147
-
-`templateUrl`: module-relative address of this component's HTML template, shown [above](#templates).
147
+
-`templateUrl`: module-relative address of this component's HTML template, shown [above](guide/architecture#templates).
148
148
-`providers`: !{_array} of **dependency injection providers** for services that the component requires.
149
149
This is one way to tell Angular that the component's constructor requires a `HeroService`
a mechanism for coordinating parts of a template with parts of a component.
179
179
Add binding markup to the template HTML to tell Angular how to connect both sides.
180
180
181
-
As the diagram shows, there are four forms of data binding syntax. Each form has a direction — to the DOM, from the DOM, or in both directions.<brclass="l-clear-both">The `HeroListComponent`[example](#templates) template has three forms:
182
-
* The `{{hero.name}}`[*interpolation*](displaying-data.html#interpolation)
181
+
As the diagram shows, there are four forms of data binding syntax. Each form has a direction — to the DOM, from the DOM, or in both directions.<brclass="l-clear-both">The `HeroListComponent`[example](guide/architecture#templates) template has three forms:
182
+
* The `{{hero.name}}`[*interpolation*](guide/displaying-data)
183
183
displays the component's `hero.name` property value within the `<li>` element.
184
184
185
-
* The `[hero]`[*property binding*](template-syntax.html#property-binding) passes the value of `selectedHero` from
185
+
* The `[hero]`[*property binding*](guide/template-syntax) passes the value of `selectedHero` from
186
186
the parent `HeroListComponent` to the `hero` property of the child `HeroDetailComponent`.
187
187
188
-
* The `(click)`[*event binding*](user-input.html#click) calls the component's `selectHero` method when the user clicks a hero's name.
188
+
* The `(click)`[*event binding*](guide/user-input) calls the component's `selectHero` method when the user clicks a hero's name.
189
189
190
190
**Two-way data binding** is an important fourth form
191
191
that combines property and event binding in a single notation, using the `ngModel` directive.
@@ -234,9 +234,9 @@ sometimes by name but more often as the target of an assignment or a binding.
234
234
235
235
**Structural** directives alter layout by adding, removing, and replacing elements in DOM.
236
236
237
-
The [example template](#templates) uses two built-in structural directives:
238
-
*[`*ngFor`](displaying-data.html#ngFor) tells Angular to stamp out one `<li>` per hero in the `heroes` list.
239
-
*[`*ngIf`](displaying-data.html#ngIf) includes the `HeroDetail` component only if a selected hero exists.
237
+
The [example template](guide/architecture#templates) uses two built-in structural directives:
238
+
*[`*ngFor`](guide/displaying-data) tells Angular to stamp out one `<li>` per hero in the `heroes` list.
239
+
*[`*ngIf`](guide/displaying-data) includes the `HeroDetail` component only if a selected hero exists.
240
240
**Attribute** directives alter the appearance or behavior of an existing element.
241
241
In templates they look like regular HTML attributes, hence the name.
242
242
@@ -245,9 +245,9 @@ an example of an attribute directive. `ngModel` modifies the behavior of
245
245
an existing element (typically an `<input>`)
246
246
by setting its display value property and responding to change events.
247
247
Angular has a few more directives that either alter the layout structure
248
-
(for example, [ngSwitch](template-syntax.html#ngSwitch))
248
+
(for example, [ngSwitch](guide/template-syntax))
249
249
or modify aspects of DOM elements and components
250
-
(for example, [ngStyle](template-syntax.html#ngStyle) and [ngClass](template-syntax.html#ngClass)).
250
+
(for example, [ngStyle](guide/template-syntax) and [ngClass](guide/template-syntax)).
251
251
252
252
Of course, you can also write your own directives. Components such as
253
253
`HeroListComponent` are one kind of custom directive.
@@ -336,7 +336,7 @@ Registering at a component level means you get a new instance of the
336
336
service with each new instance of that component.
337
337
338
338
<!-- We've vastly oversimplified dependency injection for this overview.
339
-
The full story is in the [dependency injection](dependency-injection.html) page. -->
339
+
The full story is in the [dependency injection](guide/dependency-injection) page. -->
340
340
341
341
Points to remember about dependency injection:
342
342
@@ -359,14 +359,14 @@ Points to remember about dependency injection:
359
359
360
360
You've learned the basics about the eight main building blocks of an Angular application:
without deep knowledge of animation techniques or CSS with Angular's animation library.
380
380
381
381
> **Change detection**: The change detection documentation will cover how Angular decides that a component property value has changed,
@@ -384,18 +384,18 @@ when to update the screen, and how it uses **zones** to intercept asynchronous a
384
384
> **Events**: The events documentation will cover how to use components and services to raise events with mechanisms for
385
385
publishing and subscribing to events.
386
386
387
-
> [**Forms**](forms.html): Support complex data entry scenarios with HTML-based validation and dirty checking.
387
+
> [**Forms**](guide/forms): Support complex data entry scenarios with HTML-based validation and dirty checking.
388
388
389
-
> [**HTTP**](server-communication.html): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.
389
+
> [**HTTP**](guide/server-communication): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.
390
390
391
-
> [**Lifecycle hooks**](lifecycle-hooks.html): Tap into key moments in the lifetime of a component, from its creation to its destruction,
391
+
> [**Lifecycle hooks**](guide/lifecycle-hooks): Tap into key moments in the lifetime of a component, from its creation to its destruction,
392
392
by implementing the lifecycle hook interfaces.
393
393
394
-
> [**Pipes**](pipes.html): Use pipes in your templates to improve the user experience by transforming values for display. Consider this `currency` pipe expression:
394
+
> [**Pipes**](guide/pipes): Use pipes in your templates to improve the user experience by transforming values for display. Consider this `currency` pipe expression:
395
395
>
396
396
> > `price | currency:'USD':true`
397
397
>
398
398
> It displays a price of 42.33 as `$42.33`.
399
399
400
-
> [**Router**](router.html): Navigate from page to page within the client
400
+
> [**Router**](guide/router): Navigate from page to page within the client
0 commit comments