| For the sake of this quickstart we recommend using the <code>es6-shim</code> GitHub repository for a faster start. The <code>es6-shim</code> repository includes all of the dependencies needed to write ES6 that compiles in the browser. Think of this repository as package rather than a new project. Clone the repository inside of aleady existing project.
| Create a new file named <code>app.es6</code>. The <code>.es6</code> extension signifies that the file uses ES6 syntax. Using the ES6 module syntax you can import the required modules from Angular2.
pre
code
| import {Component, Template, bootstrap} from 'angular2/angular2';
p
| The above import statement will import the three basic pieces needed to create an Angular app. The import statement loads the modules dynamically at runtime.
| Angular allows you to create custom HTML elements through components. Components are used to structure and represent the UI. This quickstart demonstrates the process of creating a <code>Component</code> with the HTML tag of <code>app</code>.
| The annotation section is where you can describe meta-data about your
code component
| You can always identify an annotation by its
code @
| sign. The <code>Component</code> annotation tells Angular what the HTML tag will be for your component. The tag is specified by using the <code>selector</code> property. The <code>selector</code> property is just a CSS selector.
p
| The <code>Template</code> annotations tells Angular what template to apply to your 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 template.
pre
code
| @Component({
| selector: 'app'
| })
| @Template({
| inline: `
| <h1>Hello {{ name }}</h1>
| `
| })
p
| The <code>Component</code> created above will have a HTML tag of <code><app></app></code> and a template of <code><h1>Hello {{ name }}</h1></code>.
.clear
section.docs-sub-section
h4 Component Controller
.c6
p
| The component controller is defined using the ES6 <code>class</code> syntax. This <code>class</code> is the backing of the component's template.
pre
code
| class AppComponent {
| constructor() {
| this.name = "Alice";
| }
| }
p
| Templates read directly from their component controllers. Any properties or functions placed on the component controller can be directly accessed from the template.
p
| In the template above binds to a <code>name</code> property through the <code>{{ }}</code> syntax. In the component's constructor the name property is being set to Alice. When the template is rendered, Alice will appear instead of <code>{{ name }}</code>.
| The last step to get the component to load on the page.
section.docs-sub-section
h4 The <code>bootstrap</code> function
.c6
p
| Angular provides a <code>bootstrap</code> function that renders your component to the page. The <code>bootstrap</code> function takes a component as a parameter. Any child components inside of the parent component will be rendered as well.
h3#section-angular-create-account Declare the HTML
p
| Create a <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. Once the shim is included the <code>app</code> component can be declared in the HTML.
| <!-- The app component created in app.es6 -->
| <app></app>
| <!-- -->
| </body>
| </html>
section.docs-sub-section
h4 Load the component module
.c6
p
| The last step is to load the module for the <code>app</code> component. The <code>es6-shim</code> file comes packaged with the <code>System</code> library. <code>System</code> will allow you to load modules in browsers that do not support ES6 module loading.
p
| To load the needed modules, <code>System</code> needs to know where to dynamically load the files. The <code>paths</code> property in <code>System</code> allows you to specify where the location of the files.
p
| Using <code>System.paths</code> specify paths for Angular, runtime assertions, and the <code>app</code> component created above.
