From 2a4061a3fd7e2ef477a625f5031ed304e29cd252 Mon Sep 17 00:00:00 2001 From: Judy Bogart Date: Mon, 4 Nov 2019 08:27:42 -0800 Subject: [PATCH] docs: clarify status of sample app in stackblitz (#33574) PR Close #33574 --- .../images/guide/start/new-app-all.gif | Bin 0 -> 19042 bytes aio/content/start/index.md | 40 +++++++++--------- 2 files changed, 21 insertions(+), 19 deletions(-) create mode 100644 aio/content/images/guide/start/new-app-all.gif diff --git a/aio/content/images/guide/start/new-app-all.gif b/aio/content/images/guide/start/new-app-all.gif new file mode 100644 index 0000000000000000000000000000000000000000..cfe78dbf477014b278432d27612b7b44587f9ff3 GIT binary patch literal 19042 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 e*w!rIJp0$wZd - -This guide uses the StackBlitz Generator to show you a ready-made, simple application that you can examine and play with interactively. 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). - - +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.
New to web development?
@@ -17,29 +11,29 @@ This guide uses the StackBlitz Generator to show you a ready-made, simple applic 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

-Click here to create a new project in StackBlitz. +Click here to create the ready-made sample project in StackBlitz.

-StackBlitz creates a starter Angular app with a top -bar—containing the store name and -checkout icon—and the title for a product list. - - +* The preview pane on the right shows the starting state of the sample Angular app. +It defines a frame with a top bar (containing the store name and checkout icon) and the title for a product list (which will be populated and dynamically updated with data from the application). + +* The project pane on the left shows the source files that make up the application, including all of the infrastructure and configuration files. The currently selected file shows up in the editor pane in the middle. + +Before going into the source structure, the next section shows how to fill out the HTML *template* for the product list, using the provided sample data. +This should give you an idea how easy it is to modify and update the page dynamically.
StackBlitz tips
@@ -61,6 +55,15 @@ behavior will be the same.
+
+ +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). + +
+ + {@a template-syntax} ## Template syntax @@ -73,8 +76,7 @@ To help you get going, the following steps use predefined product data and metho -1. In the `product-list` folder, open the template -file `product-list.component.html`. +1. In the `product-list` folder, open the template file `product-list.component.html`. 1. Modify the product list template to display a list of product names.