parent
47d12c896f
commit
d33a381a6c
|
@ -1,4 +1,4 @@
|
|||
import {Component, bootstrap} from 'angular2/angular2';
|
||||
import {Component} from 'angular2/core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app-ctor',
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Component, bootstrap} from 'angular2/angular2';
|
||||
import {Component} from 'angular2/core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
|
@ -14,5 +14,3 @@ export class AppComponent {
|
|||
title = 'Tour of Heroes';
|
||||
myHero = 'Windstorm';
|
||||
}
|
||||
|
||||
bootstrap(AppComponent);
|
|
@ -1,7 +1,5 @@
|
|||
// #docregion
|
||||
// #docregion imports
|
||||
import {Component, bootstrap, NgFor} from 'angular2/angular2';
|
||||
// #enddocregion imports
|
||||
import {Component} from 'angular2/core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
|
@ -12,16 +10,13 @@ import {Component, bootstrap, NgFor} from 'angular2/angular2';
|
|||
<p>Heroes:</p>
|
||||
<ul>
|
||||
// #docregion li-repeater
|
||||
<li *ng-for="#hero of heroes">
|
||||
<li *ngFor="#hero of heroes">
|
||||
{{ hero }}
|
||||
</li>
|
||||
// #enddocregion li-repeater
|
||||
</ul>
|
||||
`,
|
||||
`
|
||||
// #enddocregion template
|
||||
// #docregion directives
|
||||
directives: [NgFor]
|
||||
// #enddocregion directives
|
||||
})
|
||||
// #docregion mock-heroes
|
||||
export class AppComponent {
|
|
@ -1,7 +1,5 @@
|
|||
// #docregion
|
||||
// #docregion import-ng-if
|
||||
import {Component, bootstrap, NgFor, NgIf} from 'angular2/angular2';
|
||||
// #enddocregion import-ng-if
|
||||
import {Component} from 'angular2/core';
|
||||
// #docregion import-hero
|
||||
import {Hero} from './hero';
|
||||
// #enddocregion import-hero
|
||||
|
@ -11,18 +9,15 @@ import {Hero} from './hero';
|
|||
// #docregion template
|
||||
template: `
|
||||
<h1>{{title}}</h1>
|
||||
<h2>My favorite hero is: {{myHero}}</h2>
|
||||
<h2>My favorite hero is: {{myHero.name}}</h2>
|
||||
<p>Heroes:</p>
|
||||
<ul>
|
||||
<li *ng-for="#hero of heroes">
|
||||
<li *ngFor="#hero of heroes">
|
||||
{{ hero.name }}
|
||||
</li>
|
||||
</ul>
|
||||
`,
|
||||
`
|
||||
// #enddocregion template
|
||||
// #docregion directives
|
||||
directives: [NgFor, NgIf]
|
||||
// #enddocregion directives
|
||||
})
|
||||
// #docregion class
|
||||
export class AppComponent {
|
|
@ -1,7 +1,7 @@
|
|||
// #docplaster
|
||||
// #docregion final
|
||||
// #docregion imports
|
||||
import {Component, bootstrap, CORE_DIRECTIVES} from 'angular2/angular2';
|
||||
import {Component} from 'angular2/core';
|
||||
// #enddocregion imports
|
||||
import {Hero} from './hero'
|
||||
|
||||
|
@ -12,17 +12,14 @@ import {Hero} from './hero'
|
|||
<h2>My favorite hero is: {{myHero.name}}</h2>
|
||||
<p>Heroes:</p>
|
||||
<ul>
|
||||
<li *ng-for="#hero of heroes">
|
||||
<li *ngFor="#hero of heroes">
|
||||
{{ hero.name }}
|
||||
</li>
|
||||
</ul>
|
||||
// #docregion message
|
||||
<p *ng-if="heroes.length > 3">There are many heroes!</p>
|
||||
<p *ngIf="heroes.length > 3">There are many heroes!</p>
|
||||
// #enddocregion message
|
||||
`,
|
||||
// #docregion directives
|
||||
directives: [CORE_DIRECTIVES]
|
||||
// #enddocregion directives
|
||||
`
|
||||
})
|
||||
|
||||
export class AppComponent {
|
||||
|
@ -35,10 +32,3 @@ export class AppComponent {
|
|||
];
|
||||
myHero = this.heroes[0];
|
||||
}
|
||||
//#enddocregion final
|
||||
/*
|
||||
// #docregion final
|
||||
|
||||
bootstrap(AppComponent);
|
||||
//#enddocregion final
|
||||
*/
|
|
@ -0,0 +1,16 @@
|
|||
import {bootstrap} from 'angular2/platform/browser';
|
||||
import {AppCtorComponent} from './app-ctor.component';
|
||||
import {AppComponent as v1} from './app.component.1';
|
||||
import {AppComponent as v2} from './app.component.2';
|
||||
import {AppComponent as v3} from './app.component.3';
|
||||
|
||||
import {AppComponent as final} from './app.component';
|
||||
|
||||
// pick one
|
||||
//bootstrap(v1);
|
||||
//bootstrap(v2);
|
||||
//bootstrap(v3);
|
||||
bootstrap(final);
|
||||
|
||||
// for doc testing
|
||||
bootstrap(AppCtorComponent);
|
|
@ -0,0 +1,5 @@
|
|||
// #docregion
|
||||
import {bootstrap} from 'angular2/platform/browser';
|
||||
import {AppComponent} from './app.component';
|
||||
|
||||
bootstrap(AppComponent);
|
|
@ -3,20 +3,18 @@
|
|||
|
||||
<head>
|
||||
<title>Displaying Data</title>
|
||||
<script src="../node_modules/systemjs/dist/system.src.js"></script>
|
||||
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||
<script>
|
||||
System.config({
|
||||
packages: {'app': {defaultExtension: 'js'}}
|
||||
});
|
||||
System.import('app/bootstrap');
|
||||
System.import('app/boot');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- #docregion my-app -->
|
||||
<my-app>loading...</my-app>
|
||||
<!-- #enddocregion my-app -->
|
||||
<hr>
|
||||
<my-app-ctor>loading...</my-app-ctor>
|
||||
</body>
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Displaying Data</title>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||
<script>
|
||||
System.config({
|
||||
packages: {'app': {defaultExtension: 'js'}}
|
||||
});
|
||||
System.import('app/boot');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<!-- #docregion my-app -->
|
||||
<body>
|
||||
<my-app>loading...</my-app>
|
||||
</body>
|
||||
<!-- #enddocregion my-app -->
|
||||
|
||||
</html>
|
|
@ -1,21 +1,15 @@
|
|||
{
|
||||
"name": "angular2-getting-started",
|
||||
"name": "angular2-displaying-data",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"tsc": "tsc -p src -w",
|
||||
"start": "live-server --open=src"
|
||||
"tsc": "tsc",
|
||||
"tsc:w": "tsc -w",
|
||||
"lite": "lite-server",
|
||||
"both": "concurrent \"npm run tsc:w\" \"npm run lite\" "
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"angular2": "2.0.0-alpha.46",
|
||||
"systemjs": "0.19.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"live-server": "^0.8.1",
|
||||
"typescript": "^1.6.2"
|
||||
}
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"description": "Displaying Data",
|
||||
"files": [
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js",
|
||||
"!**/app-ctor.component.ts",
|
||||
"!**/*.[1,2,3].*"
|
||||
],
|
||||
"tags": ["Template"]
|
||||
}
|
|
@ -1,16 +0,0 @@
|
|||
import {bootstrap} from 'angular2/angular2';
|
||||
import {AppCtorComponent} from './app-ctor';
|
||||
import {AppComponent as v1} from './app.1';
|
||||
import {AppComponent as v2} from './app.2';
|
||||
import {AppComponent as v3} from './app.3';
|
||||
|
||||
import {AppComponent as final} from './app.final';
|
||||
|
||||
// pick one
|
||||
//bootstrap(v1);
|
||||
//bootstrap(v2);
|
||||
//bootstrap(v3);
|
||||
bootstrap(final);
|
||||
|
||||
// for doc testing
|
||||
bootstrap(AppCtorComponent);
|
|
@ -1,11 +1,16 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES5",
|
||||
"module": "commonjs",
|
||||
"module": "system",
|
||||
"moduleResolution": "node",
|
||||
"sourceMap": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"removeComments": false,
|
||||
"noImplicitAny": false
|
||||
}
|
||||
"noImplicitAny": true,
|
||||
"suppressImplicitAnyIndexErrors": true
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
|
@ -11,7 +11,10 @@ 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.
|
||||
Our UI looks like this:
|
||||
|
||||
[Live Example](/resources/live-examples/displaying-data/ts/src/plnkr.html).
|
||||
|
||||
Our final UI looks like this:
|
||||
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/displaying-data/final.png" alt="Final UI")
|
||||
|
@ -22,16 +25,16 @@ figure.image-display
|
|||
## Showing component properties with interpolation
|
||||
The easiest way to display a component property
|
||||
is to bind the property name through interpolation.
|
||||
With interpolation, we put the property name in the view template, enclosed in double curly braces: <code>{‌{myHero}}</code> .
|
||||
With interpolation, we put the property name in the view template, enclosed in double curly braces: `{{myHero}}`.
|
||||
|
||||
Let's build a small illustrative example together.
|
||||
|
||||
Create a new project folder (`displaying-data`) and follow the steps in the [QuickStart](../quickstart.html).
|
||||
|
||||
Then modify the `app.ts` file by changing the template and the body of the component.
|
||||
Then modify the `app.component.ts` file by changing the template and the body of the component.
|
||||
When we're done, it should look like this:
|
||||
|
||||
+makeExample('displaying-data/ts/src/app/app.1.ts')
|
||||
+makeExample('displaying-data/ts/app/app.component.1.ts', null, 'app/app.component.ts')
|
||||
|
||||
:marked
|
||||
We added two properties to the formerly empty component: `title` and `myHero`.
|
||||
|
@ -39,7 +42,7 @@ figure.image-display
|
|||
Our revised template displays the two component properties using the double curly brace
|
||||
interpolation:
|
||||
|
||||
+makeExample('displaying-data/ts/src/app/app.1.ts', 'template')
|
||||
+makeExample('displaying-data/ts/app/app.component.1.ts', 'template')(format=".")
|
||||
.l-sub-section
|
||||
:marked
|
||||
The template is a multi-line string within ECMAScript 2015 back-tics (\`).
|
||||
|
@ -64,13 +67,24 @@ figure.image-display
|
|||
|
||||
Notice the CSS `selector` in the `@Component` decorator that specifies an element named "my-app".
|
||||
Remember back in QuickStart that we added the `<my-app>` element to the body of our `index.html`
|
||||
+makeExample('displaying-data/ts/src/index.html', 'my-app')
|
||||
+makeExample('displaying-data/ts/index.html', 'my-app')(format=".")
|
||||
|
||||
:marked
|
||||
When we bootstrap with the `AppComponent` class (see the bottom of `app.ts`), Angular looks for a `<my-app>`
|
||||
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
|
||||
: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.
|
||||
|
@ -89,41 +103,41 @@ figure.image-display
|
|||
This is a wonderfully concise and compact technique.
|
||||
|
||||
Some folks prefer to declare the properties and initialize them within a constructor like this:
|
||||
+makeExample('displaying-data/ts/src/app/app-ctor.ts', 'app-ctor')
|
||||
+makeExample('displaying-data/ts/app/app-ctor.component.ts', 'app-ctor')(format=".")
|
||||
|
||||
:marked
|
||||
That's fine too. The choice between them is a matter of taste and organization policy.
|
||||
We'll adopt the more terse "variable assignment" style in this chapter simply because
|
||||
there will be less code to read.
|
||||
|
||||
<a id="ng-for"></a>
|
||||
<a id="ngFor"></a>
|
||||
.l-main-section
|
||||
:marked
|
||||
## Showing an array property with NgFor
|
||||
|
||||
We want to display a list of heroes. We begin by adding a mock heroes name array to the component,
|
||||
just above `myHero` and redefine `myHero` to be the first name in the array.
|
||||
+makeExample('displaying-data/ts/src/app/app.2.ts', 'mock-heroes')
|
||||
+makeExample('displaying-data/ts/app/app.component.2.ts', 'mock-heroes', 'app/app.component.ts (class)')(format=".")
|
||||
|
||||
:marked
|
||||
Now we use the Angular `NgFor` "repeater" Directive in the template to display
|
||||
each item in the `heroes` list.
|
||||
|
||||
+makeExample('displaying-data/ts/src/app/app.2.ts', 'template')
|
||||
+makeExample('displaying-data/ts/app/app.component.2.ts', 'template','app/app.component.ts (template)')(format=".")
|
||||
|
||||
:marked
|
||||
Our presentation is the familiar HTML unordered list with `<ul>` and `<li>` tags. Let's focus on the `<li>` tag.
|
||||
+makeExample('displaying-data/ts/src/app/app.2.ts', 'li-repeater')
|
||||
+makeExample('displaying-data/ts/app/app.component.2.ts', 'li-repeater')(format=".")
|
||||
|
||||
:marked
|
||||
We added a somewhat mysterious `*ng-for` to the `<li>` element.
|
||||
We added a somewhat mysterious `*ngFor` to the `<li>` element.
|
||||
That's the Angular "repeater" directive.
|
||||
It's presence on the `<li>` tag marks that `<li>` element (and its children) as the "repeater template".
|
||||
|
||||
.alert.is-important
|
||||
:marked
|
||||
Don't forget the leading asterisk (\*) in front of `*ng-for`. It is an essential part of the syntax.
|
||||
Learn more about this and `NgFor` in the [Template Syntax](./template-syntax.html#ng-for) chapter.
|
||||
Don't forget the leading asterisk (\*) in front of `*ngFor`. It is an essential part of the syntax.
|
||||
Learn more about this and `NgFor` in the [Template Syntax](./template-syntax.html#ngFor) chapter.
|
||||
|
||||
:marked
|
||||
Notice the `#hero` in the `NgFor` double-quoted instruction.
|
||||
|
@ -140,25 +154,8 @@ 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
|
||||
## Register the NgFor Directive
|
||||
|
||||
Angular doesn't know that this template uses the `NgFor` directive.
|
||||
Our application will not run right now. Angular will complain that it doesn't know what `NgFor` is.
|
||||
|
||||
We have to register the `NgFor` directive with the component metadata by making two changes to the app.ts file.
|
||||
|
||||
First, we import the `NgFor` symbol from the Angular library by extending the existing `import` statement.
|
||||
Look for it in the following:
|
||||
+makeExample('displaying-data/ts/src/app/app.2.ts', 'imports')
|
||||
|
||||
:marked
|
||||
Second, we register `NgFor` as a directive accessible to the template by updating the
|
||||
`@Component` decorator with a `directives` array property whose only item is `NgFor`:
|
||||
|
||||
+makeExample('displaying-data/ts/src/app/app.2.ts', 'directives')
|
||||
|
||||
:marked
|
||||
Now the heroes will appear in the view as an unordered list.
|
||||
Assuming we're still running under the `npm both` command,
|
||||
we should see heroes appearing in an unordered list.
|
||||
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/displaying-data/hero-names-list.png" alt="After ngfor")
|
||||
|
@ -169,15 +166,15 @@ figure.image-display
|
|||
|
||||
We are defining our data directly inside our component.
|
||||
That's fine for a demo but certainly isn't a best practice. It's not even a good practice.
|
||||
We won't do anything about that in this chapter.
|
||||
Although we won't do anything about that in this chapter, we'll make a mental note to fix this down the road.
|
||||
|
||||
At the moment, we're binding to an array of strings. We do that occasionally in real applications but
|
||||
most of the time we're displaying objects, potentially instances of classes.
|
||||
|
||||
Let's turn our array of hero names into an array of `Hero` objects. For that we'll need a `Hero' class.
|
||||
|
||||
Create a new file called `hero.ts` and add the following short snippet to it.
|
||||
+makeExample('displaying-data/ts/src/app/hero.ts')
|
||||
Create a new file in the `app/` folder called `hero.ts` with the following short bit of code.
|
||||
+makeExample('displaying-data/ts/app/hero.ts', null, 'app/hero.ts')(format = ".")
|
||||
|
||||
:marked
|
||||
We've defined a class with a constructor and two properties: `id` and `name`.
|
||||
|
@ -186,7 +183,7 @@ figure.image-display
|
|||
advantage of a TypeScript short-cut in our declaration of the constructor parameters.
|
||||
|
||||
Consider the first parameter:
|
||||
+makeExample('displaying-data/ts/src/app/hero.ts', 'id-parameter')
|
||||
+makeExample('displaying-data/ts/app/hero.ts', 'id-parameter')
|
||||
|
||||
:marked
|
||||
That brief syntax simultaneously
|
||||
|
@ -199,18 +196,18 @@ figure.image-display
|
|||
## Use the Hero class
|
||||
Let's redefine the heroes property in our component to return an array of these Heroes
|
||||
and also set the `myHero` property with the first of these mock heroes.
|
||||
+makeExample('displaying-data/ts/src/app/app.3.ts', 'heroes')
|
||||
+makeExample('displaying-data/ts/app/app.component.3.ts', 'heroes', 'app.component.ts (excerpt)')(format=".")
|
||||
|
||||
:marked
|
||||
We'll have to update the template.
|
||||
At the moment it displays the entire hero object which used to be a string value.
|
||||
Let's fix that so we interpolate the `hero.name` property
|
||||
+makeExample('displaying-data/ts/src/app/app.3.ts', 'template')
|
||||
+makeExample('displaying-data/ts/app/app.component.3.ts', 'template','app.component.ts (template)')(format=".")
|
||||
|
||||
:marked
|
||||
Our display looks the same but we know how much better it is under the hood.
|
||||
|
||||
<a id="ng-if"></a>
|
||||
<a id="ngIf"></a>
|
||||
.l-main-section
|
||||
:marked
|
||||
## Conditional display with NgIf
|
||||
|
@ -221,11 +218,11 @@ figure.image-display
|
|||
|
||||
The Angular `NgIf` directive will insert or remove an element based on a truthy/falsey condition.
|
||||
We can see it in action by adding the following paragraph at the bottom of the template:
|
||||
+makeExample('displaying-data/ts/src/app/app.final.ts', 'message')
|
||||
+makeExample('displaying-data/ts/app/app.component.ts', 'message')
|
||||
.alert.is-important
|
||||
:marked
|
||||
Don't forget the leading asterisk (\*) in front of `*ng-if`. It is an essential part of the syntax.
|
||||
Learn more about this and `NgIf` in the [Template Syntax](./template-syntax.html#ng-if) chapter.
|
||||
Don't forget the leading asterisk (\*) in front of `*ngIf`. It is an essential part of the syntax.
|
||||
Learn more about this and `NgIf` in the [Template Syntax](./template-syntax.html#ngIf) chapter.
|
||||
|
||||
:marked
|
||||
The [template expression](./template-syntax.html#template-expressions) inside the double quotes
|
||||
|
@ -239,42 +236,12 @@ figure.image-display
|
|||
That hardly matters here. It would matter a great deal from a performance perspective if
|
||||
we were conditionally including or excluding a big chunk of HTML with many data bindings.
|
||||
|
||||
:marked
|
||||
As with the `NgFor`, we must add the `NgIf` directive to the component's metadata.
|
||||
|
||||
We should extend our `import` statement as before ...
|
||||
+makeExample('displaying-data/ts/src/app/app.3.ts', 'import-ng-if')
|
||||
|
||||
:marked
|
||||
... and add it to the directives array:
|
||||
+makeExample('displaying-data/ts/src/app/app.3.ts', 'directives')
|
||||
|
||||
:marked
|
||||
Try it out. We have four items in the array so the message should appear.
|
||||
Delete one of the elements from the array, refresh the browser, and the message should no longer appear.
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Use the CORE_DIRECTIVES Constant
|
||||
|
||||
There are other core Angular directives, such as `NgClass` and `NgSwitch`,
|
||||
that we often use in our apps.
|
||||
Extending the `import` statement and adding to the `directives` array for each one gets old.
|
||||
|
||||
Fortunately, Angular provides a constant array called `CORE_DIRECTIVES`
|
||||
that includes many of the directives that we use all the time.
|
||||
|
||||
Let's simplify our lives, discard the `NgFor` and `NgIf`, use the constant for all of them.
|
||||
|
||||
We'll revise our `import` statement one last time.
|
||||
+makeExample('displaying-data/ts/src/app/app.final.ts', 'imports')
|
||||
|
||||
:marked
|
||||
and update the `directives` metadata
|
||||
+makeExample('displaying-data/ts/src/app/app.final.ts', 'directives')
|
||||
|
||||
:marked
|
||||
Pro tip: we register this constant in almost every template we write.
|
||||
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
|
||||
:marked
|
||||
|
@ -284,14 +251,14 @@ figure.image-display
|
|||
- use **`NgFor`** to display a list of items,
|
||||
- use a TypeScript class to shape the model data for our component and display properties of that model,
|
||||
- use **`NgIf`** to conditionally display a chunk of HTML based on a boolean expression.
|
||||
- register common component directives with **`CORE_DIRECTIVES` constant**
|
||||
|
||||
Our final code:
|
||||
|
||||
+makeTabs('displaying-data/ts/src/app/app.final.ts, '+
|
||||
'displaying-data/ts/src/app/hero.ts',
|
||||
'final,',
|
||||
'app.ts, hero.ts')
|
||||
+makeTabs(`displaying-data/ts/app/app.component.ts,
|
||||
displaying-data/ts/app/hero.ts,
|
||||
displaying-data/ts/app/boot.ts`,
|
||||
'final,,',
|
||||
'app/app.component.ts, app/hero.ts, boot.ts')
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 8.4 KiB |
Loading…
Reference in New Issue