edda524d0d
# Conflicts: # .travis.yml # public/_includes/_footer.jade # public/_includes/_hero-home.jade # public/_includes/_next-item.jade # public/_includes/_util-fns.jade # public/_includes/_version-dropdown.jade # public/docs/_examples/package.json # public/docs/_examples/quickstart/dart/lib/app_component.dart # public/docs/_examples/quickstart/e2e-spec.ts # public/docs/_examples/quickstart/js/app/app.component.js # public/docs/_examples/quickstart/ts/app/app.component.ts # public/docs/_examples/quickstart/ts/index.html # public/docs/_examples/toh-5/dart/lib/dashboard_component.html # public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart # public/docs/dart/latest/_util-fns.jade # public/docs/dart/latest/guide/_data.json # public/docs/dart/latest/guide/index.jade # public/docs/dart/latest/quickstart.jade # public/docs/index.jade # public/docs/js/latest/quickstart.jade # public/docs/ts/_cache/glossary.jade # public/docs/ts/_cache/guide/dependency-injection.jade # public/docs/ts/_cache/guide/index.jade # public/docs/ts/_cache/quickstart.jade # public/docs/ts/_cache/tutorial/toh-pt5.jade # public/docs/ts/latest/_data.json # public/docs/ts/latest/_quickstart_repo.jade # public/docs/ts/latest/cli-quickstart.jade # public/docs/ts/latest/cookbook/_data.json # public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade # public/docs/ts/latest/cookbook/aot-compiler.jade # public/docs/ts/latest/cookbook/dynamic-form.jade # public/docs/ts/latest/glossary.jade # public/docs/ts/latest/guide/_data.json # public/docs/ts/latest/guide/architecture.jade # public/docs/ts/latest/guide/attribute-directives.jade # public/docs/ts/latest/guide/browser-support.jade # public/docs/ts/latest/guide/change-log.jade # public/docs/ts/latest/guide/dependency-injection.jade # public/docs/ts/latest/guide/displaying-data.jade # public/docs/ts/latest/guide/forms.jade # public/docs/ts/latest/guide/index.jade # public/docs/ts/latest/guide/lifecycle-hooks.jade # public/docs/ts/latest/guide/ngmodule.jade # public/docs/ts/latest/guide/npm-packages.jade # public/docs/ts/latest/guide/router.jade # public/docs/ts/latest/guide/server-communication.jade # public/docs/ts/latest/guide/style-guide.jade # public/docs/ts/latest/guide/template-syntax.jade # public/docs/ts/latest/guide/testing.jade # public/docs/ts/latest/guide/typescript-configuration.jade # public/docs/ts/latest/guide/upgrade.jade # public/docs/ts/latest/guide/user-input.jade # public/docs/ts/latest/quickstart.jade # public/docs/ts/latest/tutorial/_data.json # public/docs/ts/latest/tutorial/index.jade # public/docs/ts/latest/tutorial/toh-pt1.jade # public/docs/ts/latest/tutorial/toh-pt3.jade # public/docs/ts/latest/tutorial/toh-pt5.jade # public/docs/ts/latest/tutorial/toh-pt6.jade # public/events.jade # public/resources/images/devguide/quickstart/hello-angular.png # scripts/cache.sh # tools/plunker-builder/indexHtmlTranslator.js
46 lines
2.2 KiB
Plaintext
46 lines
2.2 KiB
Plaintext
block includes
|
|
include _util-fns
|
|
- var _on_Plunkr = 'on Plunkr';
|
|
|
|
: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. Here is an example of a component that displays a simple string:
|
|
|
|
+makeExample('app/app.component.ts')(format='.')
|
|
|
|
:marked
|
|
You can try this out without installing anything. Open the <live-example>QuickStart example !{_on_Plunkr}</live-example> in another tab
|
|
and follow along.
|
|
|
|
Every component begins with an `@Component` [!{_decorator}](glossary.html#!{_decorator} '"!{_decorator}" explained')
|
|
<span if-docs="ts">function</span> that
|
|
<span if-docs="ts">takes a _metadata_ object. The metadata object</span> 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`.
|
|
+makeExample('index.html','my-app','index.html (inside <body>)')(format='.')
|
|
:marked
|
|
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/displaying-data.html) expression.
|
|
At runtime, Angular replaces `{{name}}` with the value of the component's `name` property.
|
|
|
|
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.
|
|
|
|
+ifDocsFor('ts')
|
|
.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
|
|
:marked
|
|
### Next step
|
|
|
|
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.
|
|
|