2016-11-21 20:13:21 -05:00
|
|
|
include _util-fns
|
2016-03-13 15:50:50 -04:00
|
|
|
|
2015-12-10 21:29:14 -05:00
|
|
|
:marked
|
2016-11-21 20:13:21 -05:00
|
|
|
The **QuickStart playground** is the easiest way to discover Angular.
|
|
|
|
|
You don't need to install anything.
|
|
|
|
|
Just click the image below, launch the live-coding environment, and start entering code.
|
2016-07-27 03:24:54 -04:00
|
|
|
|
2016-11-21 20:13:21 -05:00
|
|
|
<live-example embedded img="devguide/quickstart/quickstart-plnkr-big.png"><live-example>
|
2016-05-16 20:10:19 -04:00
|
|
|
|
2016-11-21 20:13:21 -05:00
|
|
|
The QuickStart displays a super-simple Angular component, written in [TypeScript](#typescript):
|
2015-10-14 23:25:19 -04:00
|
|
|
|
2016-11-21 20:13:21 -05:00
|
|
|
+makeExample('app/app.component.ts','','app/app.component.ts')(format='.')
|
2015-12-10 21:29:14 -05:00
|
|
|
:marked
|
2016-11-21 20:13:21 -05:00
|
|
|
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.
|
2016-05-14 20:40:52 -04:00
|
|
|
|
2016-11-21 20:13:21 -05:00
|
|
|
Every component begins with a `@Component` [_decorator_](glossary.html#decorator '"Decorator" explained') function
|
|
|
|
|
that takes a _metadata_ object. The metadata describe 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='.')
|
2016-07-27 03:24:54 -04:00
|
|
|
:marked
|
2016-11-21 20:13:21 -05: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/displaying-data.html) expression.
|
|
|
|
|
At runtime, Angular replaces `{{name}}` with the value of the component's `name` property.
|
|
|
|
|
|
|
|
|
|
Change the component class's `name` property from `'Angular'` to `'World'` and see what happens.
|
|
|
|
|
|
|
|
|
|
Binding is one of many Angular features you'll discover in this documentation.
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
2016-07-27 03:24:54 -04:00
|
|
|
:marked
|
2016-11-21 20:13:21 -05:00
|
|
|
### Next step
|
2016-02-12 20:54:22 -05:00
|
|
|
|
2016-11-21 20:13:21 -05:00
|
|
|
This QuickStart playground is fine for exploring Angular
|
|
|
|
|
but you won't develop a real application there.
|
|
|
|
|
|
|
|
|
|
You'll want to develop locally on your own machine.
|
|
|
|
|
Visit the [**setup guide**](guide/setup.html "Install Angular for local development") to learn how.
|
2016-11-18 16:23:38 -05:00
|
|
|
|
|
|
|
|
.l-main-section
|
2016-11-21 20:13:21 -05:00
|
|
|
a#typescript
|
|
|
|
|
:marked
|
|
|
|
|
## TypeScript
|
|
|
|
|
This example is written in <a href="http://www.typescriptlang.org/" target="_blank" title="TypeScript">TypeScript</a>,
|
|
|
|
|
a typed super-set of the latest JavaScript.
|
|
|
|
|
TypeScript compiles into JavaScript that runs on any modern browser.
|
|
|
|
|
Most developers find it delightful which is why most Angular developers write applications in TypeScript.
|
|
|
|
|
You can write your application in
|
|
|
|
|
[other versions of JavaScript](cookbook/ts-to-js.html "TypeScript to JavaScript")
|
|
|
|
|
if you prefer.
|
|
|
|
|
//
|
|
|
|
|
[Dart](../../dart/latest)
|
2016-11-21 20:37:10 -05:00
|
|
|
or <a href="https://github.com/angular/dart/latest" target="_blank" title="Dart">Dart</a> if you prefer.
|
2016-08-09 12:38:25 -04:00
|
|
|
|
