parent
b2b4d3b8c9
commit
dc1c054927
|
@ -9,7 +9,7 @@
|
|||
"lite": "lite-server",
|
||||
"live": "live-server",
|
||||
"start": "npm run lite",
|
||||
"both": "concurrent \"npm run tsc:w\" \"npm run start\" ",
|
||||
"go": "concurrent \"npm run tsc:w\" \"npm run start\" ",
|
||||
"test": "karma start karma.conf.js",
|
||||
"build-and-test": "npm run tsc && npm run test"
|
||||
},
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
"tsc": "tsc",
|
||||
"tsc:w": "tsc -w",
|
||||
"lite": "lite-server",
|
||||
"both": "concurrent \"npm run tsc:w\" \"npm run lite\" "
|
||||
"go": "concurrent \"npm run tsc:w\" \"npm run lite\" "
|
||||
},
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
|
|
|
@ -11,9 +11,9 @@ include ../../../../_includes/_util-fns
|
|||
In this chapter, we'll create a component with a list of heroes. Each hero has a name.
|
||||
We'll display the list of hero names and
|
||||
conditionally show a selected hero in a detail area below the list.
|
||||
|
||||
|
||||
[Live Example](/resources/live-examples/displaying-data/ts/src/plnkr.html).
|
||||
|
||||
|
||||
Our final UI looks like this:
|
||||
|
||||
figure.image-display
|
||||
|
@ -73,18 +73,18 @@ figure.image-display
|
|||
When we bootstrap with the `AppComponent` class (see `boot.ts`), Angular looks for a `<my-app>`
|
||||
in the `index.html`, finds it, instantiates an instance of `AppComponent`, and renders it
|
||||
inside the `<my-app>` tag.
|
||||
|
||||
|
||||
We're ready to see changes in a running app by firing up the npm script that both compiles and serves our applications
|
||||
while watching for changes.
|
||||
code-example(format="").
|
||||
npm run both
|
||||
npm run go
|
||||
:marked
|
||||
We should see the title and hero name:
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/displaying-data/title-and-hero.png" alt="Title and Hero")
|
||||
:marked
|
||||
Let's review some of the choices we made and consider alternatives.
|
||||
|
||||
|
||||
## Template inline or template file?
|
||||
|
||||
We can store our component's template in one of two places.
|
||||
|
@ -154,7 +154,7 @@ figure.image-display
|
|||
In fact, `NgFor` can repeat items for any [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)
|
||||
object.
|
||||
:marked
|
||||
Assuming we're still running under the `npm both` command,
|
||||
Assuming we're still running under the `npm both` command,
|
||||
we should see heroes appearing in an unordered list.
|
||||
|
||||
figure.image-display
|
||||
|
@ -240,7 +240,7 @@ figure.image-display
|
|||
Try it out. We have four items in the array so the message should appear.
|
||||
Go back into `app.component.ts` and delete or comment out one of the elements from the hero array.
|
||||
The browser should refresh automatically and the message should disappear.
|
||||
|
||||
|
||||
Play with it.
|
||||
|
||||
.l-main-section
|
||||
|
|
|
@ -259,7 +259,7 @@ code-example(format="").
|
|||
|
||||
Open a terminal window and enter this command:
|
||||
code-example(format="").
|
||||
npm run both
|
||||
npm run go
|
||||
:marked
|
||||
That command runs two parallel node processes
|
||||
1. The TypeScript compiler in watch mode
|
||||
|
@ -374,7 +374,7 @@ code-example(format="").
|
|||
:marked
|
||||
We've seen how we can run the compiler and a server at the same time with this command:
|
||||
code-example(format="").
|
||||
npm run both
|
||||
npm run go
|
||||
:marked
|
||||
We execute npm scripts in that manner: `npm run` + *script-name*. Here's what these scripts do:
|
||||
|
||||
|
|
Loading…
Reference in New Issue