angular-cn/aio/content/guide/quickstart.md
Stefanie Fluin e9db74f937 fix(aio): style mods and content udpates (#16138)
Fixed capitalization in sidenav menu items
Add min height property to sidenav-content for better viewing on short pages or high resolution screens
Add dividier between change log items as before to h2
Table adjustments to reduce off-screen items
Update home page banner text and icon change, and fix banner img and mobile alignment
Fix and add links in doc landing page and change card footer text to reflect correct name
Removed docs landing page to rebase with master

PR Close #16138
2017-04-19 22:35:12 -05:00

2.3 KiB

@title QuickStart

@description

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:

Try this QuickStart example on Plunker without installing anything. Try it locally with the QuickStart seed and prepare for development of a real Angular application.

Every component begins with an @Component decorator function that takes a metadata object. The metadata object 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.

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 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.

In the example, change the component class's name property from 'Angular' to 'World' and see what happens.

A word about TypeScript

This example is written in TypeScript, 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; this guide explains how.

Next step

Start learning Angular.