cargdev/angular
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(docs-infra): remove linenums=false since it is now the default (#31674)

Browse Source 
PR Close #31674
This commit is contained in:
George Kalpakas
2019-07-20 20:40:17 +03:00
committed by Miško Hevery
parent dd0be7feb7
commit 1bcd58cee8
82 changed files with 1257 additions and 2097 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
aio/content/tutorial/toh-pt1.md
View File

@ -17,8 +17,7 @@ the three files of the `HeroesComponent` along with a test file.
The `HeroesComponent` class file is as follows:
<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" region="v1" header="app/heroes/heroes.component.ts (initial version)" linenums="false">
</code-example>
<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" region="v1" header="app/heroes/heroes.component.ts (initial version)"></code-example>
You always import the `Component` symbol from the Angular core library
and annotate the component class with `@Component`.
@ -46,8 +45,7 @@ Always `export` the component class so you can `import` it elsewhere ... like in
Add a `hero` property to the `HeroesComponent` for a hero named "Windstorm."
<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" region="add-hero" header="heroes.component.ts (hero property)" linenums="false">
</code-example>
<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" region="add-hero" header="heroes.component.ts (hero property)"></code-example>
### Show the hero
@ -55,8 +53,7 @@ Open the `heroes.component.html` template file.
Delete the default text generated by the Angular CLI and
replace it with a data binding to the new `hero` property.
<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" header="heroes.component.html" region="show-hero-1" linenums="false">
</code-example>
<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" header="heroes.component.html" region="show-hero-1"></code-example>
## Show the `HeroesComponent` view
@ -65,8 +62,7 @@ To display the `HeroesComponent`, you must add it to the template of the shell `
Remember that `app-heroes` is the [element selector](#selector) for the `HeroesComponent`.
So add an `<app-heroes>` element to the `AppComponent` template file, just below the title.
<code-example path="toh-pt1/src/app/app.component.html" header="src/app/app.component.html" linenums="false">
</code-example>
<code-example path="toh-pt1/src/app/app.component.html" header="src/app/app.component.html"></code-example>
Assuming that the CLI `ng serve` command is still running,
the browser should refresh and display both the application title and the hero name.
@ -78,8 +74,7 @@ A real hero is more than a name.
Create a `Hero` class in its own file in the `src/app` folder.
Give it `id` and `name` properties.
<code-example path="toh-pt1/src/app/hero.ts" header="src/app/hero.ts" linenums="false">
</code-example>
<code-example path="toh-pt1/src/app/hero.ts" header="src/app/hero.ts"></code-example>
Return to the `HeroesComponent` class and import the `Hero` class.
@ -89,9 +84,7 @@ Initialize it with an `id` of `1` and the name `Windstorm`.
The revised `HeroesComponent` class file should look like this:
<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" linenums="false"
header= "src/app/heroes/heroes.component.ts">
</code-example>
<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" header="src/app/heroes/heroes.component.ts"></code-example>
The page no longer displays properly because you changed the hero from a string to an object.
@ -100,8 +93,7 @@ The page no longer displays properly because you changed the hero from a string
Update the binding in the template to announce the hero's name
and show both `id` and `name` in a details layout like this:
<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" region="show-hero-2" header="heroes.component.html (HeroesComponent's template)" linenums="false">
</code-example>
<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" region="show-hero-2" header="heroes.component.html (HeroesComponent's template)"></code-example>
The browser refreshes and displays the hero's information.
@ -135,9 +127,7 @@ To automate that data flow, setup a two-way data binding between the `<input>` f
Refactor the details area in the `HeroesComponent` template so it looks like this:
<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" region="name-input" header="src/app/heroes/heroes.component.html (HeroesComponent's template)" linenums="false">
</code-example>
<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" region="name-input" header="src/app/heroes/heroes.component.html (HeroesComponent's template)"></code-example>
**[(ngModel)]** is Angular's two-way data binding syntax.