2017-04-27 18:32:46 -04:00
< h1 class = "no-toc" > QuickStart< / h1 >
2017-03-31 19:57:13 -04:00
2017-03-30 16:01:15 -04:00
Angular applications are made up of _components_ .
2017-04-27 18:32:46 -04: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:
2017-03-30 16:01:15 -04:00
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" >
2017-03-30 16:01:15 -04:00
< / code-example >
2017-04-10 11:51:13 -04:00
< div class = "l-sub-section" >
2017-03-30 16:01:15 -04:00
2017-03-31 19:57:13 -04:00
2017-03-30 16:01:15 -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" )
2017-03-30 16:01:15 -04:00
and prepare for development of a real Angular application.
2017-04-10 11:51:13 -04:00
< / div >
2017-03-30 16:01:15 -04:00
2017-03-31 19:57:13 -04:00
Every component begins with an `@Component` [decorator ](guide/glossary#decorator '"decorator" explained' )
2017-03-31 07:23:16 -04:00
function that takes a _metadata_ object. The metadata object describes how the HTML template and component class work together.
2017-03-30 16:01:15 -04:00
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 <body>)" linenums = "false" >
2017-03-30 16:01:15 -04:00
< / code-example >
2017-03-31 19:57:13 -04:00
2017-03-30 16:01:15 -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
2017-03-31 07:23:16 -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" >
2017-03-31 07:23:16 -04:00
< header >
A word about TypeScript
< / header >
< p >
2017-04-24 14:23:45 -04:00
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.
2017-03-31 07:23:16 -04:00
< / p >
2017-04-10 11:51:13 -04:00
< / div >
2017-03-31 07:23:16 -04:00
2017-03-30 16:01:15 -04:00
2017-04-10 11:51:13 -04:00
< div class = "l-sub-section" >
2017-03-30 16:01:15 -04:00
2017-03-31 19:57:13 -04:00
2017-03-30 16:01:15 -04:00
### Next step
2017-03-31 19:57:13 -04:00
Start [**learning Angular** ](guide/guide/learning-angular "Learning Angular" ).
2017-03-30 16:01:15 -04:00
2017-04-10 11:51:13 -04:00
< / div >
2017-03-30 16:01:15 -04:00