From 57413af54cbd30ce681d9cd8a95353958acb8f48 Mon Sep 17 00:00:00 2001 From: Naomi Black Date: Tue, 22 Nov 2016 17:44:34 -0800 Subject: [PATCH] quickstart(copyedits): copyedits to the QS text for style --- public/docs/ts/latest/_data.json | 4 +- public/docs/ts/latest/quickstart.jade | 59 ++++++++++----------------- 2 files changed, 24 insertions(+), 39 deletions(-) diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json index 79251b6ade..c29362ead2 100644 --- a/public/docs/ts/latest/_data.json +++ b/public/docs/ts/latest/_data.json @@ -19,8 +19,8 @@ "icon": "query-builder", "title": "Quickstart", "subtitle": "TypeScript", - "description": "Discover Angular", - "banner": "Discover Angular in a live-coding environment." + "description": "A quick look at Angular basics", + "banner": "A quick look at Angular basics" }, "tutorial": { diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade index 8444d81ff7..d8d73dba4a 100644 --- a/public/docs/ts/latest/quickstart.jade +++ b/public/docs/ts/latest/quickstart.jade @@ -1,21 +1,17 @@ include _util-fns :marked - The **QuickStart playground** is the easiest way to discover Angular. - You don't need to install anything. - Just click the image below, launch the live-coding environment, and start entering code. - - - - The QuickStart displays a super-simple Angular component, written in [TypeScript](#typescript): + Angular applications are made of _components_. + A _component_ is the combination of an HTML template and a component class that controls a portion of the screen. Here is an example of a component that displays a simple string: +makeExample('app/app.component.ts','','app/app.component.ts')(format='.') -:marked - Angular applications are made of _components_. - A _component_ is the combination of an HTML template and a component class that controls a portion of the screen. - Every component begins with a `@Component` [_decorator_](glossary.html#decorator '"Decorator" explained') function - that takes a _metadata_ object. The metadata describe how the HTML template and component class work together. +:marked + You can try this out without installing anything. Open the QuickStart example on Plunkr in another tab + and follow along. + + Every component begins with a `@Component` [_decorator_](glossary.html#decorator '"Decorator" explained') function + that takes a _metadata_ object. The metadata object describes how the HTML template and component class work together. The `selector` property tells Angular to display the component inside a custom `` tag in the `index.html`. +makeExample('index.html','my-app','index.html (inside )')(format='.') @@ -25,32 +21,21 @@ include _util-fns which is an Angular [interpolation binding](guide/displaying-data.html) expression. At runtime, Angular replaces `{{name}}` with the value of the component's `name` property. - Change the component class's `name` property from `'Angular'` to `'World'` and see what happens. - - Binding is one of many Angular features you'll discover in this documentation. + In the example, change the component class's `name` property from `'Angular'` to `'World'` and see what happens. + Interpolation binding is one of many Angular features you'll discover in this documentation. + +.callout.is-helpful + header A word about TypeScript + p. + This example is written in TypeScript, a superset of JavaScript. Angular + uses TypeScript because its types make it easy to support developer productivity with tooling. You can also write Angular code in JavaScript; this guide explains how. + .l-sub-section - :marked - ### Next step + :marked + ### Next step - This QuickStart playground is fine for exploring Angular - but you won't develop a real application there. - - You'll want to develop locally on your own machine. - Visit the [**setup guide**](guide/setup.html "Install Angular for local development") to learn how. - -.l-main-section -a#typescript -:marked - ## TypeScript - This example is written in TypeScript, - a typed super-set of the latest JavaScript. - TypeScript compiles into JavaScript that runs on any modern browser. - Most developers find it delightful which is why most Angular developers write applications in TypeScript. - You can write your application in - [other versions of JavaScript](cookbook/ts-to-js.html "TypeScript to JavaScript") - if you prefer. -// - [Dart](../../dart/latest) - or Dart if you prefer. + To learn how to write a real application, your next step is to set up a local development + environment and begin exploring with code. The [**Developer Guide**](guide/index.html) + shows you how.