diff --git a/aio/content/guide/architecture-components.md b/aio/content/guide/architecture-components.md index d1377ff9f3..bf7fda4691 100644 --- a/aio/content/guide/architecture-components.md +++ b/aio/content/guide/architecture-components.md @@ -1,7 +1,7 @@ # Introduction to components and templates -A *component* controls a patch of screen called a *view*. -For example, individual components define and control each of the following views from the [Tutorial](tutorial): +A *component* controls a patch of screen called a [*view*](guide/glossary#view "Definition of view"). +For example, individual components define and control each of the following views from the [Tour of Heroes tutorial](tutorial): * The app root with the navigation links. * The list of heroes. diff --git a/aio/content/guide/docs-style-guide.md b/aio/content/guide/docs-style-guide.md index 3973bb39ff..457a368e30 100644 --- a/aio/content/guide/docs-style-guide.md +++ b/aio/content/guide/docs-style-guide.md @@ -1010,21 +1010,21 @@ Callouts use the same _urgency levels_ that alerts do.
A critical point
-**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix +**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast
An important point
-**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix +**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast
A helpful or informational point
-**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix +**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast
@@ -1033,7 +1033,7 @@ Here is the markup for the first of these callouts.
A critical point
-**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix +**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast
``` diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md index a6af240ae5..f2795f4d1e 100644 --- a/aio/content/guide/router.md +++ b/aio/content/guide/router.md @@ -1,8 +1,8 @@ -# In-app navigation with routing +# In-app navigation: routing to views -You want the applications you build to be as fast and responsive as possible. -In Angular, a common best practice to improve responsiveness is to build _singe-page apps_. -With single-page apps, your users stay on a single page, but their view of that page changes depending on what the user wants to do. +In a single-page app, you change what the user sees by showing or hiding portions of the display that correspond to particular components, rather than going out to the server to get a new page. +As users perform application tasks, they need to move between the different [views](guide/glossary#view "Definition of view") that you have defined. +To implement this kind of navigation within the single page of your app, you use the Angular **`Router`**. To handle the navigation from one [view](guide/glossary#view) to the next, you use the Angular _router_. The router enables navigation by interpreting a browser URL as an instruction to change the view. diff --git a/aio/content/guide/setup-local.md b/aio/content/guide/setup-local.md index 1f7e9281c6..daaaf9c256 100644 --- a/aio/content/guide/setup-local.md +++ b/aio/content/guide/setup-local.md @@ -6,10 +6,9 @@ It includes information about prerequisites, installing the CLI, creating an ini
-
Learning Angular
- -If you are new to Angular, see [Getting Started](start). Getting Started helps you quickly learn the essentials of Angular, in the context of building a basic online store app. It leverages the [StackBlitz](https://stackblitz.com/) online development environment, so you don't need to set up your local environment until you're ready. +
Try Angular without local setup
+If you are new to Angular, you might want to start with [Try it now!](start), which introduces the essentials of Angular in the context of a ready-made basic online store app that you can examine and modify. This standalone tutorial takes advantage of the interactive [StackBlitz](https://stackblitz.com/) environment for online development. You don't need to set up your local environment until you're ready.
@@ -119,18 +118,10 @@ You will see: ## Next steps +* For a more thorough introduction to the fundamental concepts and terminology of Angular single-page app architecture and design principles, read the [Angular Concepts](guide/architecture) section. -* If you are new to Angular, see the [Getting Started](start) tutorial. Getting Started helps you quickly learn the essentials of Angular, in the context of building a basic online store app. - -
- - Getting Started assumes the [StackBlitz](https://stackblitz.com/) online development environment. - To learn how to export an app from StackBlitz to your local environment, skip ahead to the [Deployment](start/start-deployment "Getting Started: Deployment") section. - -
- +* Work through the [Tour of Heroes Tutorial](tutorial), a complete hands-on exercise that introduces you to the app development process using the Angular CLI and walks through important subsystems. * To learn more about using the Angular CLI, see the [CLI Overview](cli "CLI Overview"). In addition to creating the initial workspace and app scaffolding, you can use the CLI to generate Angular code such as components and services. The CLI supports the full development cycle, including building, testing, bundling, and deployment. - * For more information about the Angular files generated by `ng new`, see [Workspace and Project File Structure](guide/file-structure). diff --git a/aio/content/marketing/docs.md b/aio/content/marketing/docs.md index 6e84d6f2a2..61e2a382fd 100644 --- a/aio/content/marketing/docs.md +++ b/aio/content/marketing/docs.md @@ -1,28 +1,35 @@

Introduction to the Angular Docs

-Angular is an app-design framework and development platform for creating efficient and sophisticated single-page apps. +Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps. -These Angular docs help you learn and use the Angular framework and development platform, from your first app to optimizing complex single-page apps for enterprises. +These Angular docs help you learn and use the Angular framework and development platform, from your first application to optimizing complex single-page apps for enterprises. Tutorials and guides include downloadable examples to accelerate your projects.
- -
Learn
-

Play with and extend a small ready-made Angular app, without any setup

-

Getting Started

- -
Start Working
-

Set up your local environment with the Angular CLI

-

Local Setup

+
Get Started
+

Set up your local environment for development with the Angular CLI.

+

Local setup

 - -
Explore
-

Learn about the fundamental design concepts and architecture of Angular apps

+ +
Learn and Explore
+

Learn about the fundamental design concepts and architecture of Angular apps.

Introduction to Angular concepts

 + +
Take a Look
+

Examine and work with a small ready-made Angular app, without any setup.

+

Try it now

+ + +
Hello World
+

Work through a full tutorial to create your first app.

+

Tour of Heroes tutorial

+ + +
diff --git a/aio/content/marketing/index.html b/aio/content/marketing/index.html index 50b84b2a52..f6a68b4dab 100755 --- a/aio/content/marketing/index.html +++ b/aio/content/marketing/index.html @@ -15,7 +15,7 @@
One framework.
Mobile & desktop.
- Get Started + Get Started
@@ -104,10 +104,10 @@
- Getting Started with Angular + Get Started with Angular
-
Get Started
-

Start building an Angular application.

+
Try it now
+

Explore Angular's capabilities with a ready-made sample app. No setup required.

 diff --git a/aio/content/navigation.json b/aio/content/navigation.json index 6f50a13020..7164537ef8 100644 --- a/aio/content/navigation.json +++ b/aio/content/navigation.json @@ -51,52 +51,15 @@ "tooltip": "Introduction to the Angular documentation", "hidden": false }, - { - "url": "guide/docs-style-guide", - "title": "Doc authors style guide", - "tooltip": "Style guide for documentation authors.", - "hidden": true - }, { "title": "Getting Started", - "tooltip": "Learn the basics by building your first Angular application.", + "tooltip": "Set up your environment and learn basic concepts", "children": [ { - "url": "start", - "title": "Your First App", - "tooltip": "Introduction to Angular's component model, template syntax, and component communication." + "url": "guide/setup-local", + "title": "Setup", + "tooltip": "Setting up for local development with the Angular CLI." }, - { - "url": "start/start-routing", - "title": "Routing", - "tooltip": "Introduction to routing between components using the browser's URL." - }, - { - "url": "start/start-data", - "title": "Managing Data", - "tooltip": "Introduction to services and accessing external data via HTTP." - }, - { - "url": "start/start-forms", - "title": "Forms", - "tooltip": "Learn about fetching and managing data from users with forms." - }, - { - "url": "start/start-deployment", - "title": "Deployment", - "tooltip": "Move to local development, or deploy your application to Firebase or your own server." - } - ] - }, - { - "url": "guide/setup-local", - "title": "Setup", - "tooltip": "Setting up for local development with the Angular CLI." - }, - { - "title": "Fundamentals", - "tooltip": "The fundamentals of Angular", - "children": [ { "title": "Angular Concepts", "tooltip": "Introduction to basic concepts for Angular applications.", @@ -129,51 +92,93 @@ ] }, { - "title": "Tour of Heroes App", + "url": "guide/glossary", + "title": "Angular Glossary", + "tooltip": "Brief definitions of the most important words in the Angular vocabulary." + }, + { + "title": "Try it", + "tooltip": "Examine and work with a ready-made sample app, with no setup.", + "children": [ + { + "url": "start", + "title": "A Sample App", + "tooltip": "Take a look at Angular's component model, template syntax, and component communication." + }, + { + "url": "start/start-routing", + "title": "In-app Navigation", + "tooltip": "Navigate among different page views using the browser's URL." + }, + { + "url": "start/start-data", + "title": "Manage Data", + "tooltip": "Use services and access external data via HTTP." + }, + { + "url": "start/start-forms", + "title": "Forms for User Input", + "tooltip": "Learn about fetching and managing data from users with forms." + }, + { + "url": "start/start-deployment", + "title": "Deployment", + "tooltip": "Move to local development, or deploy your application to Firebase or your own server." + } + ] + }, + { + "title": "Tutorial: Tour of Heroes", "tooltip": "The Tour of Heroes app is used as a reference point in many Angular examples.", "children": [ - { - "url": "tutorial", - "title": "Introduction", - "tooltip": "Introduction to the Tour of Heroes app and tutorial" - }, - { - "url": "tutorial/toh-pt0", - "title": "Create a Project", - "tooltip": "Creating the application shell" - }, - { - "url": "tutorial/toh-pt1", - "title": "1. The Hero Editor", - "tooltip": "Part 1: Build a simple editor" - }, - { - "url": "tutorial/toh-pt2", - "title": "2. Display a List", - "tooltip": "Part 2: Build a master/detail page with a list of heroes." - }, - { - "url": "tutorial/toh-pt3", - "title": "3. Create a Feature Component", - "tooltip": "Part 3: Refactor the master/detail views into separate components." - }, - { - "url": "tutorial/toh-pt4", - "title": "4. Add Services", - "tooltip": "Part 4: Create a reusable service to manage hero data." - }, - { - "url": "tutorial/toh-pt5", - "title": "5. Add In-app Navigation", - "tooltip": "Part 5: Add the Angular router and navigate among the views." - }, - { - "url": "tutorial/toh-pt6", - "title": "6. Get Data from a Server", - "tooltip": "Part 6: Use HTTP to retrieve and save hero data." - } + { + "url": "tutorial", + "title": "Introduction", + "tooltip": "Introduction to the Tour of Heroes app and tutorial" + }, + { + "url": "tutorial/toh-pt0", + "title": "Create a Project", + "tooltip": "Creating the application shell" + }, + { + "url": "tutorial/toh-pt1", + "title": "1. The Hero Editor", + "tooltip": "Part 1: Build a simple editor" + }, + { + "url": "tutorial/toh-pt2", + "title": "2. Display a List", + "tooltip": "Part 2: Build a master/detail page with a list of heroes." + }, + { + "url": "tutorial/toh-pt3", + "title": "3. Create a Feature Component", + "tooltip": "Part 3: Refactor the master/detail views into separate components." + }, + { + "url": "tutorial/toh-pt4", + "title": "4. Add Services", + "tooltip": "Part 4: Create a reusable service to manage hero data." + }, + { + "url": "tutorial/toh-pt5", + "title": "5. Add In-app Navigation", + "tooltip": "Part 5: Add the Angular router and navigate among the views." + }, + { + "url": "tutorial/toh-pt6", + "title": "6. Get Data from a Server", + "tooltip": "Part 6: Use HTTP to retrieve and save hero data." + } ] - }, + } + ] + }, + { + "title": "Fundamentals", + "tooltip": "The fundamentals of Angular", + "children": [ { "title": "Components & Templates", "tooltip": "Building dynamic views with data binding", @@ -193,6 +198,21 @@ "title": "User Input", "tooltip": "User input triggers DOM events. Angular listens to those events with event bindings that funnel updated values back into your app's components and models." }, + { + "url": "guide/attribute-directives", + "title": "Attribute Directives", + "tooltip": "Attribute directives attach behavior to elements." + }, + { + "url": "guide/structural-directives", + "title": "Structural Directives", + "tooltip": "Structural directives manipulate the layout of the page." + }, + { + "url": "guide/pipes", + "title": "Pipes", + "tooltip": "Pipes transform displayed values within a template." + }, { "url": "guide/lifecycle-hooks", "title": "Lifecycle Hooks", @@ -217,32 +237,17 @@ "url": "guide/elements", "title": "Angular Elements", "tooltip": "Convert components to Custom Elements." - }, - { - "url": "guide/attribute-directives", - "title": "Attribute Directives", - "tooltip": "Attribute directives attach behavior to elements." - }, - { - "url": "guide/structural-directives", - "title": "Structural Directives", - "tooltip": "Structural directives manipulate the layout of the page." - }, - { - "url": "guide/pipes", - "title": "Pipes", - "tooltip": "Pipes transform displayed values within a template." } ] }, { - "title": "Forms", - "tooltip": "Angular Forms", + "title": "Forms for User Input", + "tooltip": "Forms creates a cohesive, effective, and compelling data entry experience.", "children": [ { "url": "guide/forms-overview", "title": "Introduction", - "tooltip": "A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors." + "tooltip": "An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors." }, { "url": "guide/reactive-forms", @@ -268,7 +273,7 @@ }, { "title": "Observables & RxJS", - "tooltip": "Observables & RxJS", + "tooltip": "Using observables for message passing in Angular.", "children": [ { "url": "guide/observables", @@ -278,17 +283,17 @@ { "url": "guide/rx-library", "title": "The RxJS Library", - "tooltip": "The RxJS library provides useful operators." + "tooltip": "A library for reactive programming using observables to compose asynchronous or callback-based code." }, { "url": "guide/observables-in-angular", "title": "Observables in Angular", - "tooltip": "How Angular subsystems make us of observables." + "tooltip": "How Angular subsystems use and expect observables." }, { "url": "guide/practical-observable-usage", "title": "Practical Usage", - "tooltip": "Domains in which observables are useful." + "tooltip": "Domains in which observables are particularly useful." }, { "url": "guide/comparing-observables", @@ -407,11 +412,22 @@ { "url": "guide/router", "title": "Routing & Navigation", - "tooltip": "Discover the basics of screen navigation with the Angular Router." + "tooltip": "Build in-app navigation among views using the Angular Router." }, + { + "url": "guide/security", + "title": "Security", + "tooltip": "Developing for content security in Angular applications." + } + ] + }, + { + "title": "Techniques", + "tooltip": "Techniques for putting Angular to work in your environment", + "children": [ { "title": "Animations", - "tooltip": "A guide to Angular's animation system.", + "tooltip": "Enhance the user experience with animation.", "children": [ { "url": "guide/animations", @@ -440,22 +456,6 @@ } ] }, - { - "url": "guide/zone", - "title": "NgZone", - "tooltip": "How NgZone works" - } - ] - }, - { - "title": "Techniques", - "tooltip": "Techniques for putting Angular to work in your environment", - "children": [ - { - "url": "guide/security", - "title": "Security", - "tooltip": "Developing for content security in Angular applications." - }, { "url": "guide/i18n", "title": "Internationalization (i18n)", @@ -483,7 +483,7 @@ { "url": "guide/app-shell", "title": "App Shell", - "tooltip": "Enabling the App Shell in a CLI project." + "tooltip": "Render a portion of your app quickly to improve the startup experience." }, { "url": "guide/service-worker-communications", @@ -493,7 +493,7 @@ { "url": "guide/service-worker-devops", "title": "Service Worker in Production", - "tooltip": "Running applications with service workers, managing application update, debugging, and killing applications." + "tooltip": "Running apps with service workers, managing app update, debugging, and killing apps." }, { "url": "guide/service-worker-config", @@ -502,6 +502,11 @@ } ] }, + { + "url": "guide/web-worker", + "title": "Web Workers", + "tooltip": "Using web workers for background processing." + }, { "url": "guide/universal", "title": "Server-side Rendering", @@ -592,12 +597,6 @@ "title": "Dev Workflow", "tooltip": "Build, testing, and deployment information.", "children": [ - { - "url": "guide/upgrade-setup", - "title": "Upgrade setup", - "tooltip": "How to set up the Angular QuickStart seed in the context of upgrading from AngularJS.", - "hidden": true - }, { "title": "AOT Compiler", "tooltip": "Understanding ahead-of-time compilation.", @@ -665,7 +664,7 @@ }, { "title": "Configuration", - "tooltip": "Workspace and project structure, configuration files.", + "tooltip": "Workspace and project file structure and configuration.", "children": [ { "url": "guide/file-structure", @@ -694,6 +693,59 @@ } ] }, + { + "title": "Extending Angular", + "tooltip": "Working with libraries and extending the CLI.", + "children": [ + { + "title": "Angular Libraries", + "tooltip": "Extending Angular with shared libraries.", + "children": [ + { + "url": "guide/libraries", + "title": "Libraries Overview", + "tooltip": "Understand how and when to use or create libraries." + }, + { + "url": "guide/using-libraries", + "title": "Using Published Libraries", + "tooltip": "Integrate published libraries into an app." + }, + { + "url": "guide/creating-libraries", + "title": "Creating Libraries", + "tooltip": "Extend Angular by creating, publishing, and using your own libraries." + } + ] + }, + { + "title": "Schematics", + "tooltip": "Understanding schematics.", + "children": [ + { + "url": "guide/schematics", + "title": "Schematics Overview", + "tooltip": "Extending CLI generation capabilities." + }, + { + "url": "guide/schematics-authoring", + "title": "Authoring Schematics", + "tooltip": "Understand the structure of a schematic." + }, + { + "url": "guide/schematics-for-libraries", + "title": "Schematics for Libraries", + "tooltip": "Use schematics to integrate your library with the Angular CLI." + } + ] + }, + { + "url": "guide/cli-builder", + "title": "CLI Builders", + "tooltip": "Using builders to customize Angular CLI." + } + ] + }, { "title": "Release Information", "tooltip": "Angular release practices, updating, and upgrading.", @@ -722,32 +774,58 @@ "url": "guide/ivy", "title": "Angular Ivy", "tooltip": "About the Angular Ivy compilation and rendering pipeline." + }, + { + "title": "Upgrading from AngularJS", + "tooltip": "Incrementally upgrade an AngularJS application to Angular.", + "children": [ + { + "url": "guide/upgrade", + "title": "Upgrading Instructions", + "tooltip": "Incrementally upgrade an AngularJS application to Angular." + }, + { + "url": "guide/upgrade-setup", + "title": "Setup for Upgrading from AngularJS", + "tooltip": "Use code from the Angular QuickStart seed as part of upgrading from AngularJS." + }, + { + "url": "guide/upgrade-performance", + "title": "Upgrading for Performance", + "tooltip": "Upgrade from AngularJS to Angular in a more flexible way." + }, + { + "url": "guide/ajs-quick-reference", + "title": "AngularJS-Angular Concepts", + "tooltip": "Learn how AngularJS concepts and techniques map to Angular." + } + ] } ] }, { - "title": "Quick Reference", - "tooltip": "Summaries of Angular syntax, coding, and terminology.", + "title": "Angular Style and Usage", + "tooltip": "Summaries of Angular syntax, coding, and doc styles.", "children": [ { "url": "guide/cheatsheet", - "title": "Cheat Sheet", + "title": "Quick Reference", "tooltip": "A quick guide to common Angular coding techniques." }, { "url": "guide/styleguide", - "title": "Style Guide", - "tooltip": "Write Angular with style." + "title": "Coding Style Guide", + "tooltip": "Guidelines for writing Angular code." }, { - "url": "guide/glossary", - "title": "Glossary", - "tooltip": "Brief definitions of the most important words in the Angular vocabulary." + "url": "guide/docs-style-guide", + "title": "Documentation Style Guide", + "tooltip": "Style guide for documentation authors." } ] }, { - "title": "CLI Commands", + "title": "CLI Command Reference", "tooltip": "Angular CLI command reference.", "children": [ { @@ -763,7 +841,7 @@ ] }, { - "title": "API", + "title": "API Reference", "tooltip": "Details of the Angular packages, classes, interfaces, and other types.", "url": "api" } diff --git a/aio/content/start/index.md b/aio/content/start/index.md index 045c66ff2c..26992786de 100644 --- a/aio/content/start/index.md +++ b/aio/content/start/index.md @@ -1,21 +1,20 @@ -# Getting Started with Angular: Your First App +# Part 1: Getting started with a basic Angular app Welcome to Angular! This tutorial introduces you to the essentials of Angular by walking you through a simple e-commerce site with a catalog, shopping cart, and check-out form. -To help you get started right away, this guide uses a simple ready-made application that you can examine and play with interactively. +To help you get started right away, this guide uses a simple ready-made application that you can examine and modify interactively (without having to [set up a local work environment](guide/setup-local "Setup guide")).
New to web development?
- There are many resources to complement the Angular docs. Mozilla's MDN docs include both [HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML "Learning HTML: Guides and tutorials") and [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript "JavaScript") introductions. [TypeScript's docs](https://www.typescriptlang.org/docs/home.html "TypeScript documentation") include a 5-minute tutorial. Various online course platforms, such as [Udemy](http://www.udemy.com "Udemy online courses") and [Codecademy](https://www.codecademy.com/ "Codecademy online courses"), also cover web development basics.
{@a new-project} -## Create a new project +## Create the sample project

Click here to create the ready-made sample project in StackBlitz. @@ -58,11 +57,11 @@ example apps.

-
+
If you go directly to the [StackBlitz online development environment](https://stackblitz.com/) and choose to [start a new Angular workspace](https://stackblitz.com/fork/angular), you get a generic stub application, rather than this [illustrative sample](#new-project). Once you have been introduced to the basic concepts here, this can be helpful for working interactively while you are learning Angular. -In actual development you will typically use the [Angular CLI](guide/glossary#command-line-interface-cli), a powerful command-line tool that lets you generate and modify applications. For more information, see the [CLI Overview](cli). +In actual development you will typically use the [Angular CLI](guide/glossary#command-line-interface-cli "Definition of CLI"), a powerful command-line tool that lets you generate and modify applications. For a full step-by-step guide that shows how to use the CLI to create a new project and all of its parts, see [Tutorial: Tour of Heroes](tutorial).
@@ -163,8 +162,7 @@ In the process, you've learned to use five common features of Angular's template
-For more information about the full capabilities of Angular's -template syntax, see [Template Syntax](guide/template-syntax "Template Syntax"). +For a fuller introduction to Angular's template syntax, see [Introduction to components and templates](guide/architecture-components#template-syntax "Template Syntax").
@@ -218,7 +216,7 @@ The next section expands the app's capabilities by adding a new component—
-For more information about components and how they interact with templates, see [Introduction to Components](guide/architecture-components "Architecture > Introduction to Components"). +For more information about components and how they interact with templates, see [Introduction to Components](guide/architecture-components "Concepts > Introduction to Components and Templates").
@@ -358,5 +356,5 @@ You've learned about the foundation of Angular: components and template syntax. You've also learned how the component class and template interact, and how components communicate with each other. To continue exploring Angular, choose either of the following options: -* [Continue to the "Routing" section](start/start-routing "Getting Started: Routing") to create a product details page that can be accessed by clicking a product name and that has its own URL pattern. -* [Skip ahead to the "Deployment" section](start/start-deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server. +* [Continue to the "In-app navigation" section](start/start-routing "Try it: In-app navigation") to create a product details page that can be accessed by clicking a product name and that has its own URL pattern. +* [Skip ahead to the "Deployment" section](start/start-deployment "Try it: Deployment") to move to local development, or deploy your app to Firebase or your own server. diff --git a/aio/content/start/start-data.md b/aio/content/start/start-data.md index a8f5393659..7470101693 100644 --- a/aio/content/start/start-data.md +++ b/aio/content/start/start-data.md @@ -1,18 +1,18 @@ -# Getting Started with Angular: Managing Data +# Try it: Manage data -At the end of [Routing](start/start-routing "Getting Started: Routing"), the online store application has a product catalog with two views: a product list and product details. +At the end of [In-app Navigation](start/start-routing "Try it: In-app Navigation"), the online store application has a product catalog with two views: a product list and product details. Users can click on a product name from the list to see details in a new view, with a distinct URL, or route. This page guides you through creating the shopping cart in three phases: -* Update the product details page to include a "Buy" button, which adds the current product to a list of products that a cart service manages. +* Update the product details view to include a "Buy" button, which adds the current product to a list of products that a cart service manages. * Add a cart component, which displays the items in the cart. * Add a shipping component, which retrieves shipping prices for the items in the cart by using Angular's `HttpClient` to retrieve shipping data from a `.json` file. {@a services} ## Services -Services are an integral part of Angular applications. In Angular, a service is an instance of a class that you can make available to any part of your application using Angular's [dependency injection system](guide/glossary#dependency-injection-di "dependency injection definition"). +Services are an integral part of Angular applications. In Angular, a service is an instance of a class that you can make available to any part of your application using Angular's [dependency injection system](guide/glossary#dependency-injection-di "Dependency injection definition"). Services are the place where you share data between parts of your application. For the online store, the cart service is where you store your cart data and methods. @@ -24,28 +24,28 @@ simulate sharing and being notified about product changes. They cannot, however, buy products. In this section, you add a "Buy" button to the product -details page and set up a cart service to store information +details view and set up a cart service to store information about products in the cart.
-Later, the [Forms](start/start-forms "Getting Started: Forms") part of -this tutorial guides you through accessing this cart service -from the page where the user checks out. +A later part of this tutorial, [Use forms for user input](start/start-forms "Try it: Forms for user input"), guides you through accessing this cart service from the view where the user checks out.
{@a generate-cart-service} ### Define a cart service -1. Generate a cart service. - - 1. Right click on the `app` folder, choose `Angular Generator`, and choose `Service`. Name the new service `cart`. +1. To generate a cart service, right click on the `app` folder, choose `Angular Generator`, and choose `Service`. Name the new service `cart`. - 1. StackBlitz might generate the `@Injectable()` decorator without the `{ providedIn: 'root' }` statement as above. Instead, the generator provides the cart service in `app.module.ts` by default. For the purposes - of this tutorial, either way works. The `@Injectable()` `{ providedIn: 'root' }` syntax allows [tree shaking](/guide/dependency-injection-providers#tree-shakable-providers), which is beyond the scope of this guide. +
Intro to Services and DI"). + +
1. In the `CartService` class, define an `items` property to store the array of the current products in the cart. @@ -121,18 +121,18 @@ This section walks you through using the cart service to add a product to the ca
-## Create the cart page +## Create the cart view At this point, users can put items in the cart by clicking "Buy", but they can't yet see their cart. -Create the cart page in two steps: +Create the cart view in two steps: -1. Create a cart component and configure routing to the new component. At this point, the cart page will only have default text. +1. Create a cart component and configure routing to the new component. At this point, the cart view has only default text. 1. Display the cart items. ### Set up the component - To create the cart page, begin by following the same steps you did to create the product details component and configure routing for the new component. + To create the cart view, begin by following the same steps you did to create the product details component and configure routing for the new component. 1. Generate a cart component, named `cart`. @@ -160,7 +160,7 @@ Create the cart page in two steps: 1. To see the new cart component, click the "Checkout" button. You can see the "cart works!" default text, and the URL has the pattern `https://getting-started.stackblitz.io/cart`, where `getting-started.stackblitz.io` may be different for your StackBlitz project.
- Display cart page before customizing + Display cart view before customizing
### Display the cart items @@ -206,7 +206,7 @@ You can use services to share data across components: 1. Test your cart component. - 1. Click on "My Store" to go to the product list page. + 1. Click on "My Store" to go to the product list view. 1. Click on a product name to display its details. 1. Click "Buy" to add the product to the cart. 1. Click "Checkout" to see the cart. @@ -215,7 +215,7 @@ You can use services to share data across components: Repeat to add more items to the cart.
- Cart page with products added + Cart view with products added
@@ -227,7 +227,7 @@ StackBlitz tip: Any time the preview refreshes, the cart is cleared. If you make
-For more information about services, see [Introduction to Services and Dependency Injection](guide/architecture-services "Architecture > Intro to Services and DI"). +For more information about services, see [Introduction to Services and Dependency Injection](guide/architecture-services "Concepts > Intro to Services and DI").
@@ -303,11 +303,11 @@ First, define a `get()` method.
-For more information about Angular's `HttpClient`, see [HttpClient](guide/http "HttpClient guide"). +For more information about Angular's `HttpClient`, see the [Client-Server Interaction](guide/http "Server interaction through HTTP") guide.
-## Define the shipping page +## Define the shipping view Now that your app can retrieve shipping data, create a shipping component and template. @@ -347,7 +347,7 @@ Now that your app can retrieve shipping data, create a shipping component and t The `async` pipe returns the latest value from a stream of data and continues to do so for the life of a given component. When Angular destroys that component, the `async` pipe automatically stops. For detailed information about the `async` pipe, see the [AsyncPipe API documentation](/api/common/AsyncPipe). -1. Add a link from the cart page to the shipping page: +1. Add a link from the cart view to the shipping view: @@ -371,5 +371,5 @@ Now that your app can retrieve shipping data, create a shipping component and t Congratulations! You have an online store application with a product catalog and shopping cart. You can also look up and display shipping prices. To continue exploring Angular, choose either of the following options: -* [Continue to the "Forms" section](start/start-forms "Getting Started: Forms") to finish the app by adding the shopping cart page and a checkout form. -* [Skip ahead to the "Deployment" section](start/start-deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server. +* [Continue to the "Forms" section](start/start-forms "Try it: Forms for User Input") to finish the app by adding the shopping cart view and a checkout form. +* [Skip ahead to the "Deployment" section](start/start-deployment "Try it: Deployment") to move to local development, or deploy your app to Firebase or your own server. diff --git a/aio/content/start/start-deployment.md b/aio/content/start/start-deployment.md index 5db4023203..04f2fe00ad 100644 --- a/aio/content/start/start-deployment.md +++ b/aio/content/start/start-deployment.md @@ -1,13 +1,11 @@ -# Getting Started with Angular: Deployment +# Try it: Deployment To deploy your application, you have to compile it, and then host the JavaScript, CSS, and HTML on a web server. Built Angular applications are very portable and can live in any environment or served by any technology, such as Node, Java, .NET, PHP, and many others.
- -Whether you came here directly from [Your First App](start "Getting Started: Your First App"), or completed the entire online store application through the [Routing](start/start-routing "Getting Started: Routing"), [Managing Data](start/start-data "Getting Started: Managing Data"), and [Forms](start/start-forms "Getting Started: Forms") sections, you have an application that you can deploy by following the instructions in this section. - +Whether you came here directly from [Part 1](start "Try it: A basic app"), or completed the entire online store application through the [In-app navigation](start/start-routing "Try it: In-app navigation"), [Manage data](start/start-data "Try it: Manage data"), and [Forms for user input](start/start-forms "Try it: Forms for user input") sections, you have an application that you can deploy by following the instructions in this section.
@@ -81,7 +79,7 @@ Read more about development and distribution of your application in the [Buildin ## Join the Angular community -You are now an Angular developer! [Share this moment](https://twitter.com/intent/tweet?url=https://angular.io/start&text=I%20just%20finished%20the%20Angular%20Getting%20Started%20Tutorial "Angular on Twitter"), tell us what you thought of this Getting Started, or submit [suggestions for future editions](https://github.com/angular/angular/issues/new/choose "Angular GitHub repository new issue form"). +You are now an Angular developer! [Share this moment](https://twitter.com/intent/tweet?url=https://angular.io/start&text=I%20just%20finished%20the%20Angular%20Getting%20Started%20Tutorial "Angular on Twitter"), tell us what you thought of this get-started exercise, or submit [suggestions for future editions](https://github.com/angular/angular/issues/new/choose "Angular GitHub repository new issue form"). Angular offers many more capabilities, and you now have a foundation that empowers you to build an application and explore those other capabilities: @@ -91,7 +89,3 @@ Angular offers many more capabilities, and you now have a foundation that empowe * Angular also has an extensive [network of 3rd-party tools and libraries](https://angular.io/resources "Angular resources list"). Keep current by following the [Angular blog](https://blog.angular.io/ "Angular blog"). - - - - diff --git a/aio/content/start/start-forms.md b/aio/content/start/start-forms.md index 55fe15b9c1..00f2c98191 100644 --- a/aio/content/start/start-forms.md +++ b/aio/content/start/start-forms.md @@ -1,6 +1,6 @@ -# Getting Started with Angular: Forms +# Try it: Use forms for user input -At the end of [Managing Data](start/start-data "Getting Started: Managing Data"), the online store application has a product catalog and a shopping cart. +At the end of [Managing Data](start/start-data "Try it: Managing Data"), the online store application has a product catalog and a shopping cart. This section walks you through adding a form-based checkout feature to collect user information as part of checkout. @@ -49,7 +49,7 @@ Now that you've defined the form model in the component class, you need a checko ## Create the checkout form -Use the following steps to add a checkout form at the bottom of the "Cart" page. +Use the following steps to add a checkout form at the bottom of the "Cart" view. 1. Open `cart.component.html`. @@ -73,7 +73,7 @@ Use the following steps to add a checkout form at the bottom of the "Cart" page. After putting a few items in the cart, users can now review their items, enter their name and address, and submit their purchase:
- Cart page with checkout form + Cart view with checkout form
To confirm submission, open the console where you should see an object containing the name and address you submitted. @@ -82,4 +82,4 @@ To confirm submission, open the console where you should see an object containin Congratulations! You have a complete online store application with a product catalog, a shopping cart, and a checkout function. -[Continue to the "Deployment" section](start/start-deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server. +[Continue to the "Deployment" section](start/start-deployment "Try it: Deployment") to move to local development, or deploy your app to Firebase or your own server. diff --git a/aio/content/start/start-routing.md b/aio/content/start/start-routing.md index 93c1f4adae..42a4ce2ae0 100644 --- a/aio/content/start/start-routing.md +++ b/aio/content/start/start-routing.md @@ -1,22 +1,20 @@ -# Getting Started with Angular: Routing +# In-app navigation -At the end of [Your First App](start "Getting Started: Your First App"), the online store application has a basic product catalog. +At the end of [part 1](start "Get started with a basic Angular app"), the online store application has a basic product catalog. The app doesn't have any variable states or navigation. There is one URL, and that URL always displays the "My Store" page with a list of products and their descriptions. -This guide shows you how to use the Angular Router to display full product details in separate pages, each with their own URLs. +This guide shows you how to use Angular [routing](guide/glossary#router "Router definition") to give the user in-app navigation. In a single-page app, instead of loading new pages, you show different components and data to the user based on where the user is in the application. -The Angular [Router](guide/glossary#router "Router definition") enables you to show different components and data to the user based on where the user is in the application. -The router enables navigation from one view to the next as users perform tasks such as the following: +The router lets you display full product details in separate [views](guide/glossary#view "View definition"), each with its own URL. Routing enables navigation from one view to the next (within the same page) as users perform tasks such as the following: -* Entering a URL in the address bar to navigate to a corresponding page. -* Clicking links on the page to navigate to a new page. +* Entering a URL in the address bar to navigate to a corresponding view. +* Clicking links on the page to navigate to a new view. * Clicking the browser's back and forward buttons to navigate backward and forward through the browser history. - ## Registering a route -The app is already set up to use the Angular Router and to use routing to navigate to the product list component you modified earlier. This section shows you how to define a route to show individual product details. +The app is already set up to use the Angular `Router` and to use routing to navigate to the product list component you modified earlier. This section shows you how to define a route to show individual product details. 1. Generate a new component for product details. Give the component the name `product-details`. @@ -47,7 +45,7 @@ The app is already set up to use the Angular Router and to use routing to naviga Notice that the URL in the preview window changes. The final segment is `products/#` where `#` is the number of the route you clicked.
- Product details page with updated URL + Product details view with updated URL
@@ -73,7 +71,7 @@ The product details component handles the display of each product. The Angular R The `ActivatedRoute` is specific to each routed component that the Angular Router loads. It contains information about the route, its parameters, and additional data associated with the route. - By injecting the `ActivatedRoute`, you are configuring the component to use a service. While this part of the Getting Started tutorial uses this syntax briefly, the [Managing Data](start/start-data "Getting Started: Managing Data") page covers services in more detail. + By injecting the `ActivatedRoute`, you are configuring the component to use a *service*. The [Managing Data](start/start-data "Try it: Managing Data") page covers services in more detail. 1. In the `ngOnInit()` method, subscribe to route parameters and fetch the product based on the `productId`. @@ -98,7 +96,7 @@ Now, when users click on a name in the product list, the router navigates them t
-For more information about the Angular Router, see [Routing & Navigation](guide/router "Routing & Navigation"). +For more information about the Angular Router, see [Routing & Navigation](guide/router "Routing & Navigation guide").
@@ -107,9 +105,9 @@ For more information about the Angular Router, see [Routing & Navigation](guide/ Congratulations! You have integrated routing into your online store. -* Products are linked from the product list page to individual products. +* Products are linked from the product list view to individual products. * Users can click on a product name from the list to see details in a new view, with a distinct URL/route. To continue exploring Angular, choose either of the following options: -* [Continue to the "Managing Data" section](start/start-data "Getting Started: Managing Data") to add a shopping cart feature, use a service to manage the cart data and use HTTP to retrieve external data for shipping prices. -* [Skip ahead to the Deployment section](start/start-deployment "Getting Started: Deployment") to deploy your app to Firebase or move to local development. +* [Continue to the "Managing Data" section](start/start-data "Try it: Managing Data") to add a shopping cart feature, use a service to manage the cart data and use HTTP to retrieve external data for shipping prices. +* [Skip ahead to the Deployment section](start/start-deployment "Try it: Deployment") to deploy your app to Firebase or move to local development. diff --git a/aio/content/tutorial/index.md b/aio/content/tutorial/index.md index 028766b558..307bc64043 100644 --- a/aio/content/tutorial/index.md +++ b/aio/content/tutorial/index.md @@ -1,39 +1,36 @@

Tour of Heroes app and tutorial

-
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. -If you're new to Angular, you might want to try the [**Getting Started**](start) quick-start app first. -The Getting Started 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. It uses a partially-completed StackBlitz project, so that you can make modifications and see the results in real time. +If you're completely new to Angular, you might want to try the [**Try it now**](start) quick-start app first. +It is based on a ready-made partially-completed project, which you can examine and modify in the StacBlitz interactive development environment, where you can see the results in real time. -In this tutorial, you build your own app from the ground up, providing experience with the development process as well as a more thorough introduction to basic concepts. +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 **Tour of Heroes app** that you create with this tutorial serves as the conceptual basis for many examples throughout Angular documentation. -Reading this introduction page provides sufficient context for working with those examples. -You do not need to do this tutorial to understand those other examples.
-This _Tour of Heroes_ tutorial provides an introduction to the fundamentals of Angular. -It shows you how to set up your local development environment and develop an app using the [Angular CLI tool](cli "CLI command reference"). +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. -In this _Tour of Heroes_ tutorial, you will build an app that helps a staffing agency manage its stable of heroes. +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. -This app has many of the features you'd expect to find in a data-driven application. -It 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. By the end of this tutorial you will be able to do the following: -* Use built-in Angular directives to show and hide elements and display lists of hero data. -* Create Angular components to display hero details and show an array of heroes. -* Use one-way data binding for read-only data. +* Use built-in Angular [directives](guide/glossary#directive "Directives definition") to show and hide elements and display lists of hero data. +* Create Angular [components](guide/glossary#component "Components definition") to display hero details and show an array of heroes. +* Use one-way [data binding](guide/glossary#data-binding "Data binding definition") for read-only data. * Add editable fields to update a model with two-way data binding. * Bind component methods to user events, like keystrokes and clicks. * Enable users to select a hero from a master list and edit that hero in the details view. -* Format data with pipes. -* Create a shared service to assemble the heroes. -* Use routing to navigate among different views and their components. +* Format data with [pipes](guide/glossary#pipe "Pipe definition"). +* Create a shared [service](guide/glossary#service "Service definition") to assemble the heroes. +* Use [routing](guide/glossary#router "Router definition") to navigate among different views and their components. You'll learn enough Angular to get started and gain confidence that Angular can do whatever you need it to do. @@ -45,8 +42,6 @@ After completing all tutorial steps, the final app will look like this: - - ## What you'll build Here's a visual idea of where this tutorial leads, beginning with the "Dashboard"