| Angular builds on top of ES6, the new specification of the JavaScript language. Not all ES6 features are available in all browsers. The following es6-shim repository allows you to use ES6 in the browser today.
p
| Angular is available on npm. Configuring Angular to run ES6 in the browser requires a build process, detailed here.
p
| The es6-shim package includes Angular and dependencies needed to compile ES6 in the browser. Think of the es6-shim repository as package rather than a new project.
| Components are custom HTML elements. Angular uses components to empower HTML. Components structure and represent the UI. This quickstart demonstrates the process of creating a component. This component will have the tag of app.
| A component annotation provides meta-data about the <code>component</code>. An annotation can always identified by its at-sign — <code>@</code>.
p
| The <code>@Component</code> annotation defines the HTML tag for the component. The selector property specifies the tag. The <code>selector</code> property is a CSS selector.
p
| The <code>@Template</code> annotation defines the template to apply to the component. This component uses an inline template, but external templates are available as well. To use an external template specify a <code>url</code> property and give it the path to the html file.
pre
code
| @Component({
| selector: 'app'
| })
| @Template({
| inline: `
| <h1>Hello {{ name }}</h1>
| `
| })
p
| The component created above has a HTML tag of <code><app></app></code> and a template of <code><h1>Hello {{ name }}</h1></code>.
| The component controller is the backing of the component's template. A component controller uses ES6 <code>class</code> syntax.
pre
code
| class AppComponent {
| constructor() {
| this.name = "Alice";
| }
| }
p
| Templates read from their component controllers. Templates have access to any properties or functions placed on the component controller.
p
| The template above binds to a <code>name</code> property through the <code>{{ }}</code> syntax.The body of the constructor assigns "Alice" to the name property. When the template renders, Alice will appear instead of <code>{{ name }}</code>.
| Angular provides a <code>bootstrap</code> function that renders a component to the page. The <code>bootstrap</code> function takes a component as a parameter. Any child components inside of the parent component will render as well.
| Create an <code>index.html</code> file at the root of the project. Include the <code>es6-shim.js</code> file in the <code>head</code> tag. Now, declare the app component the <code>body</code>. The es6-shim must load before any application code.
| The last step is to load the module for the app component. The es6-shim file comes packaged with the System library. Most browsers today do not support ES6 module loading. System provides module loading functionality to these browsers.
