1101f07ef2
* boilerplate, gulpfile, quickstart * move ts files up to cookbooks * move rest of ts files * fix tsconfig, default build task, json file * fix js examples * fix webpack example * remove a2docs.css references * fix aot examples * fix webpack run task * fix cb-i18n * fix upgrade examples * fix unit tests * fix comment in deployment index * removed unused typings.json * fix plunkers * fix js example paths * fix ts quickstart/setup prose * add src folder note to setup * broadly replace app/ -> src/app/ * broadly replace main.ts * broadly replaced index.html * broadly replace tsconfig * replace systemjs * fix filetrees * Minor prose fixes to aot, i18n cookbooks * remove char harp was complaining about * update new reactive forms example * fix quickstart jade error * fix mistakes uncovered by CI * fix bad filename errors * edit style guide 04-06 rule to use src * add changelog * Incorporate Jesus's feedback * fix snippet headers in toh1/2 * chore: tweak changelog and setup text
47 lines
2.3 KiB
Plaintext
47 lines
2.3 KiB
Plaintext
block includes
|
|
include _util-fns
|
|
|
|
:marked
|
|
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:
|
|
|
|
+makeExample('src/app/app.component.ts')(format='.')
|
|
|
|
block qs-src-online-and-local
|
|
.l-sub-section
|
|
:marked
|
|
Try this **<live-example>QuickStart example on Plunker</live-example>** without installing anything.
|
|
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.
|
|
|
|
:marked
|
|
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('src/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.
|
|
Interpolation binding is one of many Angular features you'll discover in this documentation.
|
|
|
|
+ifDocsFor('ts')
|
|
:marked
|
|
In the example, change the component class's `name` property from `'Angular'` to `'World'` and see what happens.
|
|
|
|
.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
|
|
|
|
Start [**learning Angular**](guide/learning-angular.html "Learning Angular").
|
|
|