iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

quickstart(copyedits): copyedits to the QS text for style

This commit is contained in:
Naomi Black 2016-11-22 17:44:34 -08:00
parent a1bc22b595
commit 57413af54c
2 changed files with 24 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/docs/ts/latest/_data.json
View File

@ -19,8 +19,8 @@
"icon": "query-builder", "icon": "query-builder",
"title": "Quickstart", "title": "Quickstart",
"subtitle": "TypeScript", "subtitle": "TypeScript",
"description": "Discover Angular", "description": "A quick look at Angular basics",
"banner": "Discover Angular in a live-coding environment." "banner": "A quick look at Angular basics"
}, },
"tutorial": { "tutorial": {

59
public/docs/ts/latest/quickstart.jade
View File

@ -1,21 +1,17 @@
include _util-fns include _util-fns
:marked :marked
The **QuickStart playground** is the easiest way to discover Angular. Angular applications are made of _components_.
You don't need to install anything. 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:
Just click the image below, launch the live-coding environment, and start entering code.
<live-example embedded img="devguide/quickstart/quickstart-plnkr-big.png"><live-example>
The QuickStart displays a super-simple Angular component, written in [TypeScript](#typescript):
+makeExample('app/app.component.ts','','app/app.component.ts')(format='.') +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 :marked
that takes a _metadata_ object. The metadata describe how the HTML template and component class work together. You can try this out without installing anything. Open the <a href="/resources/live-examples/quickstart/ts/plnkr.html" target="_blank">QuickStart example on Plunkr</a> 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 `<my-app>` tag in the `index.html`. The `selector` property tells Angular to display the component inside a custom `<my-app>` tag in the `index.html`.
+makeExample('index.html','my-app','index.html (inside <body>)')(format='.') +makeExample('index.html','my-app','index.html (inside <body>)')(format='.')
@ -25,32 +21,21 @@ include _util-fns
which is an Angular [interpolation binding](guide/displaying-data.html) expression. 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. 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. In the example, 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.
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 <a href="http://www.typescriptlang.org/" target="_blank" title="TypeScript">TypeScript</a>, 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; <a href="cookbook/ts-to-js.html">this guide</a> explains how.
.l-sub-section .l-sub-section
:marked :marked
### Next step ### Next step
This QuickStart playground is fine for exploring Angular To learn how to write a real application, your next step is to set up a local development
but you won't develop a real application there. environment and begin exploring with code. The [**Developer Guide**](guide/index.html)
shows you how.
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 <a href="http://www.typescriptlang.org/" target="_blank" title="TypeScript">TypeScript</a>,
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 <a href="https://github.com/angular/dart/latest" target="_blank" title="Dart">Dart</a> if you prefer.