|
1 | 1 | block includes
|
2 | 2 | include _util-fns
|
3 |
| -nter |
4 |
| -- var step = _stepInit |
| 3 | + |
5 | 4 | :marked
|
6 | 5 | The easiest way to get started with Angular is to **<live-example>try the <i>Hello Angular</i> live example</live-example>**.
|
7 | 6 | You don't need to install anything.
|
8 | 7 | Just open it and follow along with the documentation.
|
9 | 8 | If you'd rather develop in a local environment, learn how on the [Setup](guide/setup.html) page.
|
10 | 9 |
|
11 |
| - Here's "Hello World" in Angular: |
| 10 | + Here's a super-simple Angular application: |
12 | 11 |
|
13 | 12 | +makeExample('app/app.module.ts','','app/app.module.ts')(format='.')
|
14 | 13 | :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. |
16 | 27 |
|
| 28 | + ### _AppModule_ |
17 | 29 | The `AppModule` tells Angular<br>
|
18 | 30 | ***what you need*** — _imports_ the `BrowserModule` to run the application in the browser.<br>
|
19 | 31 | ***what you created*** — _declares_ the `AppComponent`.<br>
|
20 | 32 | ***what to show*** — _bootstrap_ the `AppComponent` onto the `index.html` web page within the `<my-app>` tag.
|
21 | 33 |
|
22 |
| -+makeExample('index.html','my-app','index.html (body)')(format='.') |
23 |
| -:marked |
24 | 34 | You'll find more _live code examples_ like this one on almost every documentation page.
|
25 | 35 |
|
26 | 36 | # TypeScript
|
|
32 | 42 |
|
33 | 43 | .l-sub-section
|
34 | 44 | :marked
|
35 |
| - |
36 | 45 | ### Next step
|
37 | 46 | Start [learning Angular](guide/learning-angular.html).
|
0 commit comments