diff --git a/aio/content/tutorial/index.md b/aio/content/tutorial/index.md index e988eae0c8..174c908a48 100644 --- a/aio/content/tutorial/index.md +++ b/aio/content/tutorial/index.md @@ -3,22 +3,22 @@
Getting Started
-In this tutorial, you build your own app from the ground up, providing experience with the typical development process, as well as an introduction to basic app-design concepts, tools, and terminology. +In this tutorial, you build your own application from the ground up, providing experience with the typical development process, as well as an introduction to basic app-design concepts, tools, and terminology. -If you're completely new to Angular, you might want to try the [**Try it now**](start) quick-start app first. +If you're completely new to Angular, you might want to try the [**Try it now**](start) quick-start application first. It is based on a ready-made partially-completed project, which you can examine and modify in the StackBlitz interactive development environment, where you can see the results in real time. -The "Try it" tutorial covers the same major topics—components, template syntax, routing, services, and accessing data via HTTP—in a condensed format, following the most current best practices. +The "Try it" tutorial covers the same major topics—components, template syntax, routing, services, and accessing data using HTTP—in a condensed format, following the most current best practices.
-This _Tour of Heroes_ tutorial shows you how to set up your local development environment and develop an app using the [Angular CLI tool](cli "CLI command reference"), and provides an introduction to the fundamentals of Angular. +This _Tour of Heroes_ tutorial shows you how to set up your local development environment and develop an application using the [Angular CLI tool](cli "CLI command reference"), and provides an introduction to the fundamentals of Angular. -The _Tour of Heroes_ app that you build helps a staffing agency manage its stable of heroes. -The app has many of the features you'd expect to find in any data-driven application. -The finished app acquires and displays a list of heroes, edits a selected hero's detail, and navigates among different views of heroic data. +The _Tour of Heroes_ application that you build helps a staffing agency manage its stable of heroes. +The application has many of the features you'd expect to find in any data-driven application. +The finished application acquires and displays a list of heroes, edits a selected hero's detail, and navigates among different views of heroic data. -You will find references to and expansions of this app domain in many of the examples used throughout the Angular documentation, but you don't necessarily need to work through this tutorial to understand those examples. +You will find references to and expansions of this application domain in many of the examples used throughout the Angular documentation, but you don't necessarily need to work through this tutorial to understand those examples. By the end of this tutorial you will be able to do the following: @@ -38,7 +38,7 @@ Angular can do whatever you need it to do.
Solution
-After completing all tutorial steps, the final app will look like this: . +After completing all tutorial steps, the final application will look like this: .
@@ -63,7 +63,7 @@ where you can change the hero's name. Clicking the "Back" button returns you to the Dashboard. Links at the top take you to either of the main views. -If you click "Heroes," the app displays the "Heroes" master list view. +If you click "Heroes," the application displays the "Heroes" master list view.
@@ -81,7 +81,7 @@ The following diagram captures all of the navigation options. View navigations
-Here's the app in action: +Here's the application in action:
Tour of Heroes in Action diff --git a/aio/content/tutorial/toh-pt0.md b/aio/content/tutorial/toh-pt0.md index 6ae60f5e57..57f33fb5e6 100644 --- a/aio/content/tutorial/toh-pt0.md +++ b/aio/content/tutorial/toh-pt0.md @@ -1,17 +1,17 @@ # Create a new project -You begin by creating an initial application using the Angular CLI. Throughout this tutorial, you’ll modify and extend that starter application to create the Tour of Heroes app. +You begin by creating an initial application using the Angular CLI. Throughout this tutorial, you’ll modify and extend that starter application to create the Tour of Heroes application. In this part of the tutorial, you'll do the following: 1. Set up your environment. -2. Create a new workspace and initial app project. +2. Create a new workspace and initial application project. 3. Serve the application. 4. Make changes to the application.
- For the sample app that this page describes, see the . + For the sample application that this page describes, see the .
@@ -22,9 +22,9 @@ To set up your development environment, follow the instructions in [Local Enviro ## Create a new workspace and an initial application -You develop apps in the context of an Angular [workspace](guide/glossary#workspace). A workspace contains the files for one or more [projects](guide/glossary#project). A project is the set of files that comprise an app, a library, or end-to-end (e2e) tests. For this tutorial, you will create a new workspace. +You develop applications in the context of an Angular [workspace](guide/glossary#workspace). A workspace contains the files for one or more [projects](guide/glossary#project). A project is the set of files that comprise an app, a library, or end-to-end (e2e) tests. For this tutorial, you will create a new workspace. -To create a new workspace and an initial app project: +To create a new workspace and an initial application project: 1. Ensure that you are not already in an Angular workspace folder. For example, if you have previously created the Getting Started workspace, change to the parent of that folder. 2. Run the CLI command `ng new` and provide the name `angular-tour-of-heroes`, as shown here: @@ -33,7 +33,7 @@ To create a new workspace and an initial app project: ng new angular-tour-of-heroes - 3. The `ng new` command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key. + 3. The `ng new` command prompts you for information about features to include in the initial application project. Accept the defaults by pressing the Enter or Return key. The Angular CLI installs the necessary Angular `npm` packages and other dependencies. This can take a few minutes. @@ -43,7 +43,7 @@ It also creates the following workspace and starter project files: * An initial skeleton app project in the `src/app` subfolder. * Related configuration files. -The initial app project contains a simple Welcome app, ready to run. +The initial app project contains a simple Welcome application, ready to run. ## Serve the application @@ -57,13 +57,13 @@ Go to the workspace directory and launch the application.
The `ng serve` command builds the app, starts the development server, -watches the source files, and rebuilds the app as you make changes to those files. +watches the source files, and rebuilds the application as you make changes to those files. The `--open` flag opens a browser to `http://localhost:4200/`.
-You should see the app running in your browser. +You should see the application running in your browser. ## Angular components @@ -75,7 +75,7 @@ They display data on the screen, listen for user input, and take action based on ## Make changes to the application -Open the project in your favorite editor or IDE and navigate to the `src/app` folder to make some changes to the starter app. +Open the project in your favorite editor or IDE and navigate to the `src/app` folder to make some changes to the starter application. You'll find the implementation of the shell `AppComponent` distributed over three files: @@ -137,4 +137,4 @@ Here are the code files discussed on this page. * You created the initial application structure using the Angular CLI. * You learned that Angular components display data. -* You used the double curly braces of interpolation to display the app title. +* You used the double curly braces of interpolation to display the application title. diff --git a/aio/content/tutorial/toh-pt1.md b/aio/content/tutorial/toh-pt1.md index 70ba9e7e8e..df49309bc2 100644 --- a/aio/content/tutorial/toh-pt1.md +++ b/aio/content/tutorial/toh-pt1.md @@ -6,7 +6,7 @@ and place that component in the application shell.
- For the sample app that this page describes, see the . + For the sample application that this page describes, see the .
@@ -141,7 +141,7 @@ Here it binds the `hero.name` property to the HTML textbox so that data can flow ### The missing _FormsModule_ -Notice that the app stopped working when you added `[(ngModel)]`. +Notice that the application stopped working when you added `[(ngModel)]`. To see the error, open the browser development tools and look in the console for a message like @@ -158,7 +158,7 @@ It belongs to the optional `FormsModule` and you must _opt-in_ to using it. ## _AppModule_ Angular needs to know how the pieces of your application fit together -and what other files and libraries the app requires. +and what other files and libraries the application requires. This information is called _metadata_. Some of the metadata is in the `@Component` decorators that you added to your component classes. @@ -177,13 +177,13 @@ Open `AppModule` (`app.module.ts`) and import the `FormsModule` symbol from the region="formsmodule-js-import"> -Then add `FormsModule` to the `@NgModule` metadata's `imports` array, which contains a list of external modules that the app needs. +Then add `FormsModule` to the `@NgModule` metadata's `imports` array, which contains a list of external modules that the application needs. -When the browser refreshes, the app should work again. You can edit the hero's name and see the changes reflected immediately in the `

` above the textbox. +When the browser refreshes, the application should work again. You can edit the hero's name and see the changes reflected immediately in the `

` above the textbox. ### Declare `HeroesComponent` diff --git a/aio/content/tutorial/toh-pt2.md b/aio/content/tutorial/toh-pt2.md index ec26344771..310e0da722 100644 --- a/aio/content/tutorial/toh-pt2.md +++ b/aio/content/tutorial/toh-pt2.md @@ -205,7 +205,7 @@ To apply the `.selected` class to the `
  • ` when the user clicks it, use class

    • Angular's [class binding](guide/attribute-binding#class-binding) can add and remove a CSS class conditionally. -Just add `[class.some-css-class]="some-condition"` to the element you want to style. +Add `[class.some-css-class]="some-condition"` to the element you want to style. Add the following `[class.selected]` binding to the `
  • ` in the `HeroesComponent` template: diff --git a/aio/content/tutorial/toh-pt4.md b/aio/content/tutorial/toh-pt4.md index 349807cd61..c51d7f973b 100644 --- a/aio/content/tutorial/toh-pt4.md +++ b/aio/content/tutorial/toh-pt4.md @@ -175,7 +175,7 @@ as if heroes could be fetched synchronously. -This will not work in a real app. +This will not work in a real application. You're getting away with it now because the service currently returns _mock heroes_. But soon the application will fetch heroes from a remote server, which is an inherently _asynchronous_ operation. @@ -434,7 +434,7 @@ Here are the code files discussed on this page. ## Summary * You refactored data access to the `HeroService` class. -* You registered the `HeroService` as the _provider_ of its service at the root level so that it can be injected anywhere in the app. +* You registered the `HeroService` as the _provider_ of its service at the root level so that it can be injected anywhere in the application. * You used [Angular Dependency Injection](guide/dependency-injection) to inject it into a component. * You gave the `HeroService` _get data_ method an asynchronous signature. * You discovered `Observable` and the RxJS _Observable_ library. diff --git a/aio/content/tutorial/toh-pt5.md b/aio/content/tutorial/toh-pt5.md index 46bc0034b5..d5afd80d40 100644 --- a/aio/content/tutorial/toh-pt5.md +++ b/aio/content/tutorial/toh-pt5.md @@ -93,7 +93,7 @@ configures it with the `routes` in one step by calling -Next, `AppRoutingModule` exports `RouterModule` so it will be available throughout the app. +Next, `AppRoutingModule` exports `RouterModule` so it will be available throughout the application. @@ -313,7 +313,7 @@ At this point, all application routes are in place. The `DashboardComponent` hero links do nothing at the moment. Now that the router has a route to `HeroDetailComponent`, -fix the dashboard hero links to navigate via the _parameterized_ dashboard route. +fix the dashboard hero links to navigate using the _parameterized_ dashboard route. @@ -82,7 +82,7 @@ Replace the default contents of `in-memory-data.service.ts` with the following: The `in-memory-data.service.ts` file will take over the function of `mock-heroes.ts`. However, don't delete `mock-heroes.ts` yet, as you still need it for a few more steps of this tutorial. -When the server is ready, you'll detach the In-memory Web API, and the app's requests will go through to the server. +When the server is ready, you'll detach the In-memory Web API, and the application's requests will go through to the server. {@a import-heroes} @@ -205,7 +205,7 @@ Because each service method returns a different kind of `Observable` result, ### Tap into the Observable The `HeroService` methods will **tap** into the flow of observable values -and send a message, via the `log()` method, to the message area at the bottom of the page. +and send a message, using the `log()` method, to the message area at the bottom of the page. They'll do that with the RxJS `tap()` operator, which looks at the observable values, does something with those values, @@ -286,7 +286,7 @@ The hero now appears in the list with the changed name. To add a hero, this application only needs the hero's name. You can use an `` element paired with an add button. -Insert the following into the `HeroesComponent` template, just after +Insert the following into the `HeroesComponent` template, after the heading: