mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
Bob Watson
committed by
Alex Rickabaugh
Alex Rickabaugh
parent
f21b510311
commit
14bcde9d76
@@ -1,7 +1,9 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { HousingLocationComponent } from '../housing-location/housing-location.component';
|
||||
// #docregion housing-location-import
|
||||
import { HousingLocation } from '../housinglocation';
|
||||
// #enddocregion
|
||||
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
@@ -24,6 +26,7 @@ import { HousingLocation } from '../housinglocation';
|
||||
styleUrls: ['./home.component.css'],
|
||||
})
|
||||
|
||||
// #docregion only-house
|
||||
export class HomeComponent {
|
||||
private img_server = 'https://storage.googleapis.com/angular-tutorial-assets/first-app/';
|
||||
onlyHouse: HousingLocation;
|
||||
@@ -40,5 +43,5 @@ export class HomeComponent {
|
||||
laundry: false,
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
@@ -852,6 +852,11 @@
|
||||
"url": "tutorial/first-app/first-app-lesson-02",
|
||||
"title": "Create home component",
|
||||
"tooltip": "Create the app's HomeComponent"
|
||||
},
|
||||
{
|
||||
"url": "tutorial/first-app/first-app-lesson-04",
|
||||
"title": "Angular interfaces",
|
||||
"tooltip": "Add an Angular interface to your app"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
# First Angular app lesson 4 - Angular interfaces
|
||||
|
||||
<div class="callout is-important">
|
||||
|
||||
<header>This topic is a work in progress</header>
|
||||
|
||||
This topic is a first draft. It is complete, but it some or all content might change before its final draft.
|
||||
|
||||
</div>
|
||||
|
||||
This tutorial lesson demonstrates how to create an Angular interface and include it in a component of your app.
|
||||
|
||||
**Time required:** expect to spend about 10 minutes to complete this lesson.
|
||||
|
||||
## Before you start
|
||||
|
||||
This lesson starts with the code from the previous lesson, so you can:
|
||||
|
||||
* Use the code that you created in Lesson 3 in your interactive development environment (IDE).
|
||||
* Start with the code example from the previous lesson. Choose the <live-example name="first-app-lesson-03"></live-example> from Lesson 3 where you can:
|
||||
* Use the *live example* in StackBlitz, where the StackBlitz interface is your IDE.
|
||||
* Use the *download example* and open it in your IDE.
|
||||
|
||||
If you haven't reviewed the introduction, visit the [Introduction to Angular tutorial](tutorial/first-app) to make sure you have everything you need to complete this lesson.
|
||||
|
||||
If you have any trouble during this lesson, you can review the completed code for this lesson, in the <live-example></live-example> for this lesson.
|
||||
|
||||
## After you finish
|
||||
|
||||
* Your app has a new interface that it can use as a data type.
|
||||
* Your app has an instance of the new interface with sample data.
|
||||
|
||||
## Conceptual preview of interfaces
|
||||
|
||||
Angular interfaces are custom data types for your app.
|
||||
|
||||
Angular uses TypeScript to take advantage of working in a strongly typed programming environment.
|
||||
Strong type checking reduces the likelihood of one element in your app sending incorrectly formatted data to another.
|
||||
Such type-mismatch errors are caught by the TypeScript compiler and many such errors can also be caught in your IDE.
|
||||
|
||||
This lesson creates an interface for the first Angular app.
|
||||
The interface defines properties that represent data about a single house.
|
||||
|
||||
## Lesson steps
|
||||
|
||||
Perform these steps on the app code in your IDE.
|
||||
|
||||
### Step 1 - Create a new Angular interface
|
||||
|
||||
This step creates a new, but empty, interface in your app.
|
||||
|
||||
In the **Terminal** pane of your IDE:
|
||||
|
||||
1. In your project directory, navigate to the `first-app` directory.
|
||||
1. In the `first-app` directory, run this command to create the new interface.
|
||||
|
||||
<code-example format="shell" language="shell">
|
||||
|
||||
ng generate interface housinglocation
|
||||
|
||||
</code-example>
|
||||
|
||||
1. Run `ng serve` to build the app and serve it to `http://localhost:4200`.
|
||||
1. In a browser, open `http://localhost:4200` to see your app.
|
||||
1. Confirm that the app builds without error.
|
||||
Correct any errors before you continue to the next step.
|
||||
|
||||
### Step 2 - Add properties to the new interface
|
||||
|
||||
This step adds the properties to the interface that your app needs to represent a housing location.
|
||||
|
||||
1. In the **Terminal** pane of your IDE, start the `ng serve` command, if it isn't already running, to build the app and serve it to `http://localhost:4200`.
|
||||
1. In the **Edit** pane of your IDE, open the `src/app/housinglocation.ts` file.
|
||||
1. In `housinglocation.ts`, replace the default content with the following code to make your new interface to look like this example.
|
||||
|
||||
<code-example header="Update src/app/housinglocation.ts to look like this" path="first-app-lesson-04/src/app/housinglocation.ts"></code-example>
|
||||
|
||||
1. Save your changes and confirm the app does not display any errors. Correct any errors before you continue to the next step.
|
||||
|
||||
### Step 3 - Create a test house for your app
|
||||
|
||||
At this point, you have an interface, but you aren't using it yet.
|
||||
|
||||
In this step, you create an instance of the interface and assign some sample data to it.
|
||||
You won't see this sample data appear in your app yet.
|
||||
There are a few more lessons to complete before that happens.
|
||||
|
||||
1. In the **Terminal** pane of your IDE, run the `ng serve` command, if it isn't already running, to build the app and serve your app to `http://localhost:4200`.
|
||||
1. In the **Edit** pane of your IDE, open `src/app/home/home.component.ts`.
|
||||
1. In `src/app/home/home.component.ts`, add this import statement after the existing `import` statements so that `HomeComponent` can use the new interface.
|
||||
|
||||
<code-example header="Add to src/app/home/home.component.ts" path="first-app-lesson-04/src/app/home/home.component.ts" region="housing-location-import"></code-example>
|
||||
|
||||
1. In `src/app/home/home.component.ts`, replace the empty `export class HomeComponent {}` definition with this code to create a single instance of the new interface in the component.
|
||||
|
||||
<code-example header="Sample data to add to src/app/home/home.component.ts" path="first-app-lesson-04/src/app/home/home.component.ts" region="only-house"></code-example>
|
||||
|
||||
1. Confirm that your `home.component.ts` file looks like this example.
|
||||
|
||||
<code-example header="src/app/home/home.component.ts" path="first-app-lesson-04/src/app/home/home.component.ts"></code-example>
|
||||
|
||||
1. Save your changes and confirm the app does not have any errors.
|
||||
1. Correct any errors before you continue to the next step.
|
||||
|
||||
## Lesson review
|
||||
|
||||
In this lesson, you created an interface that created a new data type for your app.
|
||||
This new data type makes it possible for you to specify where `HousingLocation` data is required.
|
||||
This new data type also makes it possible for your IDE and the TypeScript compiler can ensure that `HousingLocation` data is used where it's required.
|
||||
|
||||
If you are having any trouble with this lesson, you can review the completed code for it in the <live-example></live-example>.
|
||||
|
||||
## Next steps
|
||||
|
||||
* **(TODO) Link to lesson 5**
|
||||
|
||||
## More information
|
||||
|
||||
For more information about the topics covered in this lesson, visit:
|
||||
|
||||
<!-- vale Angular.Google_WordListSuggestions = NO -->
|
||||
|
||||
* [ng generate interface](cli/generate#interface-command)
|
||||
* [ng generate](cli/generate)
|
||||
Reference in New Issue
Block a user