2016-11-23 09:58:21 -08:00
block includes
include _util-fns
2016-03-13 20:50:50 +01:00
2015-12-10 18:29:14 -08:00
:marked
2016-11-28 16:31:06 -05:00
Angular applications are made up of _components_.
2016-11-22 17:44:34 -08:00
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:
2015-10-14 20:25:19 -07:00
2017-02-02 18:38:17 +00:00
+makeExample('src/app/app.component.ts')(format='.')
2016-11-22 17:44:34 -08:00
2016-12-20 14:16:15 -08:00
block qs-src-online-and-local
.l-sub-section
:marked
2017-02-28 23:31:24 +01:00
Try this **<live-example noDownload>QuickStart example on Plunker</live-example>** without installing anything.
2016-12-20 14:16:15 -08:00
Try it locally with the [***QuickStart seed***](guide/setup.html "Setup for local development with the QuickStart seed")
and prepare for development of a real Angular application.
2016-12-15 11:53:45 -08:00
:marked
2017-03-31 01:13:42 +02:00
Every component begins with an `@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.
2016-11-28 16:31:06 -05:00
2016-11-21 17:13:21 -08:00
The `selector` property tells Angular to display the component inside a custom `<my-app>` tag in the `index.html`.
2017-02-02 18:38:17 +00:00
+makeExample('src/index.html','my-app','index.html (inside <body>)')(format='.')
2016-07-27 00:24:54 -07:00
:marked
2016-11-21 17:13:21 -08:00
The `template` property defines a message inside an `<h1>` header.
2016-11-28 16:31:06 -05:00
The message starts with "Hello" and ends with `{{name}}`,
2016-11-21 17:13:21 -08:00
which is an Angular [interpolation binding](guide/displaying-data.html) expression.
2016-11-28 16:31:06 -05:00
At runtime, Angular replaces `{{name}}` with the value of the component's `name` property.
2016-11-22 17:44:34 -08:00
Interpolation binding is one of many Angular features you'll discover in this documentation.
2016-02-12 17:54:22 -08:00
2017-03-31 01:13:42 +02:00
:marked
In the example, change the component class's `name` property from `'Angular'` to `'World'` and see what happens.
2016-11-30 10:10:12 -08:00
2017-03-31 01:13:42 +02:00
.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.
2016-11-18 13:23:38 -08:00
2016-11-22 17:44:34 -08:00
.l-sub-section
2017-03-31 01:13:42 +02:00
:marked
### Next step
2016-11-22 17:44:34 -08:00
2017-03-31 01:13:42 +02:00
Start [**learning Angular**](guide/learning-angular.html "Learning Angular").
2016-08-09 17:38:25 +01:00
