Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 7a6c2e7

Browse files
committed
docs(QuickStart): update to describe {{title}} binding
1 parent 7e2eb6e commit 7a6c2e7

File tree

2 files changed

+18
-9
lines changed

2 files changed

+18
-9
lines changed

public/docs/_examples/quickstart/ts/app/app.module.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { Component, NgModule } from '@angular/core';
33
import { BrowserModule } from '@angular/platform-browser';
44

55
@Component({
6-
template: `<h1>Hello {{title}}</h1>`,
7-
selector: 'my-app'
6+
selector: 'my-app',
7+
template: `<h1>Hello {{title}}</h1>`
88
})
99
class AppComponent { title = 'Angular'; }
1010

public/docs/ts/latest/quickstart.jade

+16-7
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,36 @@
11
block includes
22
include _util-fns
3-
nter
4-
- var step = _stepInit
3+
54
:marked
65
The easiest way to get started with Angular is to **<live-example>try the <i>Hello Angular</i> live example</live-example>**.
76
You don't need to install anything.
87
Just open it and follow along with the documentation.
98
If you'd rather develop in a local environment, learn how on the [Setup](guide/setup.html) page.
109

11-
Here's "Hello World" in Angular:
10+
Here's a super-simple Angular application:
1211

1312
+makeExample('app/app.module.ts','','app/app.module.ts')(format='.')
1413
:marked
15-
The `AppComponent` template renders a "Hello Angular" header into a custom `<my-app>` element.
14+
### _AppComponent_
15+
Angular applications are made of _components_.
16+
A _component_ is the combination of an HTML template and JavaScript class that controls a portion of the screen.
17+
18+
According to the `selector`, this `AppComponent` displays its content inside a custom `<my-app>` tag in the `index.html`.
19+
+makeExample('index.html','my-app','index.html (body)')(format='.')
20+
:marked
21+
The `AppComponent` template renders the message, "Hello Angular", inside an `<h1>` header.
22+
The word "Angular" appears thanks to an [interpolation binding](guide/displaying-data.html)
23+
that projects the component's `title` property into the `{{title}}` slot.
24+
Change the property value from `'Angular'` to `'World'` and see what happens.
25+
26+
Binding is one of many Angular features you'll discover in this documentation.
1627

28+
### _AppModule_
1729
The `AppModule` tells Angular<br>
1830
&nbsp;&nbsp;***what you need*** &mdash; _imports_ the `BrowserModule` to run the application in the browser.<br>
1931
&nbsp;&nbsp;***what you created*** &mdash; _declares_ the `AppComponent`.<br>
2032
&nbsp;&nbsp;***what to show*** &mdash; _bootstrap_ the `AppComponent` onto the `index.html` web page within the `<my-app>` tag.
2133

22-
+makeExample('index.html','my-app','index.html (body)')(format='.')
23-
:marked
2434
You'll find more _live code examples_ like this one on almost every documentation page.
2535

2636
# TypeScript
@@ -32,6 +42,5 @@ nter
3242

3343
.l-sub-section
3444
:marked
35-
3645
### Next step
3746
Start [learning Angular](guide/learning-angular.html).

0 commit comments

Comments
 (0)