angular-cn/aio/content/guide/quickstart.md

80 lines
2.3 KiB
Markdown
Raw Normal View History

<h1 class="no-toc">QuickStart</h1>
2017-03-31 19:57:13 -04:00
Angular applications are made up 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:
2017-03-31 19:57:13 -04:00
<code-example path="quickstart/src/app/app.component.ts" title="src/app/app.component.ts" linenums="false">
</code-example>
2017-04-10 11:51:13 -04:00
<div class="l-sub-section">
2017-03-31 19:57:13 -04:00
Try this **<live-example noDownload>QuickStart example on Plunker</live-example>** without installing anything.
2017-03-31 19:57:13 -04:00
Try it locally with the [***QuickStart seed***](guide/guide/setup "Setup for local development with the QuickStart seed")
and prepare for development of a real Angular application.
2017-04-10 11:51:13 -04:00
</div>
2017-03-31 19:57:13 -04:00
Every component begins with an `@Component` [decorator](guide/glossary#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`.
2017-03-31 19:57:13 -04:00
<code-example path="quickstart/src/index.html" region="my-app" title="index.html (inside &lt;body&gt;)" linenums="false">
</code-example>
2017-03-31 19:57:13 -04:00
The `template` property defines a message inside an `<h1>` header.
The message starts with "Hello" and ends with `{{name}}`,
which is an Angular [interpolation binding](guide/guide/displaying-data) expression.
At runtime, Angular replaces `{{name}}` with the value of the component's `name` property.
Interpolation binding is one of many Angular features you'll discover in this documentation.
2017-03-31 19:57:13 -04:00
In the example, change the component class's `name` property from `'Angular'` to `'World'` and see what happens.
2017-04-10 11:51:13 -04:00
<div class="callout is-helpful">
<header>
A word about TypeScript
</header>
<p>
This example is written in <a href="http://www.typescriptlang.org/" title="TypeScript">TypeScript</a>, a superset of JavaScript. Angular
2017-03-31 19:57:13 -04:00
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.
</p>
2017-04-10 11:51:13 -04:00
</div>
2017-04-10 11:51:13 -04:00
<div class="l-sub-section">
2017-03-31 19:57:13 -04:00
### Next step
2017-03-31 19:57:13 -04:00
Start [**learning Angular**](guide/guide/learning-angular "Learning Angular").
2017-04-10 11:51:13 -04:00
</div>