docs(aio): remove unnecessary blank lines
This commit is contained in:
Peter Bacon Darwin
committed by
Pete Bacon Darwin
Pete Bacon Darwin
parent
0aa90c6be4
commit
46f8a6dd85
@ -18,78 +18,54 @@ If your structure doesn't match, go back to that page to figure out what you mis
|
||||
|
||||
<aio-filetree>
|
||||
|
||||
|
||||
<aio-folder>
|
||||
angular-tour-of-heroes
|
||||
|
||||
<aio-folder>
|
||||
src
|
||||
|
||||
<aio-folder>
|
||||
app
|
||||
|
||||
<aio-file>
|
||||
app.component.ts
|
||||
</aio-file>
|
||||
|
||||
|
||||
|
||||
<aio-file>
|
||||
app.module.ts
|
||||
</aio-file>
|
||||
|
||||
|
||||
</aio-folder>
|
||||
|
||||
|
||||
|
||||
<aio-file>
|
||||
main.ts
|
||||
</aio-file>
|
||||
|
||||
|
||||
|
||||
<aio-file>
|
||||
index.html
|
||||
</aio-file>
|
||||
|
||||
|
||||
|
||||
<aio-file>
|
||||
styles.css
|
||||
</aio-file>
|
||||
|
||||
|
||||
|
||||
<aio-file>
|
||||
systemjs.config.js
|
||||
</aio-file>
|
||||
|
||||
|
||||
|
||||
<aio-file>
|
||||
tsconfig.json
|
||||
</aio-file>
|
||||
|
||||
|
||||
</aio-folder>
|
||||
|
||||
|
||||
|
||||
<aio-file>
|
||||
node_modules ...
|
||||
</aio-file>
|
||||
|
||||
|
||||
|
||||
<aio-file>
|
||||
package.json
|
||||
</aio-file>
|
||||
|
||||
|
||||
</aio-folder>
|
||||
|
||||
|
||||
</aio-filetree>
|
||||
|
||||
## Keep the app transpiling and running
|
||||
@ -113,7 +89,6 @@ To display a list of heroes, you'll add heroes to the view's template.
|
||||
Create an array of ten heroes.
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/src/app/app.component.ts" region="hero-array">
|
||||
|
||||
</code-example>
|
||||
@ -127,7 +102,6 @@ Create a public property in `AppComponent` that exposes the heroes for binding.
|
||||
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/app/app.component.1.html" region="hero-array-1">
|
||||
|
||||
</code-example>
|
||||
@ -149,7 +123,6 @@ insert the following chunk of HTML below the title and above the hero details.
|
||||
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/app/app.component.1.html" region="heroes-template-1" linenums="false">
|
||||
|
||||
</code-example>
|
||||
@ -164,7 +137,6 @@ and display them individually.
|
||||
Modify the `<li>` tag by adding the built-in directive `*ngFor`.
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/app/app.component.1.html" region="heroes-ngfor-1">
|
||||
|
||||
</code-example>
|
||||
@ -198,7 +170,6 @@ that uses the `hero` template variable to display the hero's properties.
|
||||
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/app/app.component.1.html" region="ng-for" linenums="false">
|
||||
|
||||
</code-example>
|
||||
@ -212,7 +183,6 @@ To add styles to your component, set the `styles` property on the `@Component` d
|
||||
to the following CSS classes:
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/src/app/app.component.ts" region="styles" linenums="false">
|
||||
|
||||
</code-example>
|
||||
@ -228,7 +198,6 @@ The template for displaying heroes should look like this:
|
||||
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/app/app.component.1.html" region="heroes-styled" linenums="false">
|
||||
|
||||
</code-example>
|
||||
@ -249,7 +218,6 @@ Add a click event binding to the `<li>` like this:
|
||||
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/app/app.component.1.html" region="selectedHero-click" linenums="false">
|
||||
|
||||
</code-example>
|
||||
@ -275,7 +243,6 @@ But the user will be able to select one of the heroes by clicking on it.
|
||||
So replace the `hero` property with this simple `selectedHero` property:
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/src/app/app.component.ts" region="selected-hero">
|
||||
|
||||
</code-example>
|
||||
@ -285,7 +252,6 @@ you won't initialize the `selectedHero` as you did with `hero`.
|
||||
|
||||
Add an `onSelect` method that sets the `selectedHero` property to the `hero` that the user clicks.
|
||||
|
||||
|
||||
<code-example path="toh-2/src/app/app.component.ts" region="on-select" linenums="false">
|
||||
|
||||
</code-example>
|
||||
@ -295,7 +261,6 @@ Bind to the new selectedHero property instead as follows:
|
||||
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/app/app.component.1.html" region="selectedHero-details" linenums="false">
|
||||
|
||||
</code-example>
|
||||
@ -319,7 +284,6 @@ Wrap the HTML hero detail content of the template with a `<div>`.
|
||||
Then add the `ngIf` built-in directive and set it to the `selectedHero` property of the component.
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/app/app.component.1.html" region="ng-if" linenums="false">
|
||||
|
||||
</code-example>
|
||||
@ -368,7 +332,6 @@ like this:
|
||||
|
||||
In the template, add the following `[class.selected]` binding to the `<li>`:
|
||||
|
||||
|
||||
<code-example path="toh-2/app/app.component.1.html" region="class-selected-1" linenums="false">
|
||||
|
||||
</code-example>
|
||||
@ -387,7 +350,6 @@ Read more about the `[class]` binding in the [Template Syntax](guide/template-sy
|
||||
|
||||
The final version of the `<li>` looks like this:
|
||||
|
||||
|
||||
<code-example path="toh-2/app/app.component.1.html" region="class-selected-2" linenums="false">
|
||||
|
||||
</code-example>
|
||||
@ -402,7 +364,6 @@ After clicking "Magneta", the list should look like this:
|
||||
Here's the complete `app.component.ts` as of now:
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/src/app/app.component.ts">
|
||||
|
||||
</code-example>
|
||||
|
||||
Reference in New Issue
Block a user