1. Create an entry point HTML file where users will start
1. Load the Angular library at the top of the file
1. Make a root component for your application
1. Bootstrap Angular
You can edit and test out your apps by serving local files with a web server. Follow the steps in the <a href="../quickstart.html">quickstart</a> to get Typescript setup.
If you don't already have an HTTP server, you can install one using <code>npm install -g http-server</code>. (If that results in an access error, then you might need to use <code><b>sudo</b> npm ...</code>.)
The TypeScript setup includes System.js, a third-party open-source library that adds ES6 module loading functionality to browsers. This step isn't needed for the ES5 version.
If you are transpiling using a tool that translates the `@` symbols to
annotations (for example Traceur), you will need to import the annotation versions of
Component and View. That can be easily achieved using
`import {ComponentAnnotation as Component, ViewAnnotation as View}`.
.l-main-section
:markdown
## Run it!
Open `index.html` through your web server and you should see:
figure.image-display
img(src='/resources/images/examples/setup-example1.png' alt="Example of Todo App")
.l-main-section
:markdown
## Explanations
This basic Angular app contains the structure for any app you'll build.
.l-sub-section
:markdown
### It's all a tree
You can think of Angular apps as a tree of components. This root component we've been talking about acts as the top
level container for the rest of your application. You've named this one `AppComponent`, but there's
nothing special about the name and you can use whatever makes sense to you.
The root component's job is to give a location in the `index.html` file where your application will
render through its element, in this case `<my-app>`. There is also nothing special about this
element name; you can pick it as you like.
The root component loads the initial template for the application that will load other components to perform
whatever functions your application needs - menu bars, views, forms, etc. We'll walk through examples of all of
these in the following pages.
.l-sub-section
:markdown
### @Component and @View annotations
A component annotation describes details about the component. An annotation can be identified by its at-sign (`@`).
The `@Component` annotation defines the HTML tag for the component by specifying the component's CSS selector.
The `@View` annotation defines the HTML that represents the component. The component you wrote uses an inline template, but you can also have an external template. To use an external template, specify a <code>templateUrl</code> property and give it the path to the HTML file.
.l-sub-section
:markdown
### import vs. window.angular
The main difference between the ES5 and TypeScript versions is the loading of modules.
**TypeScript**<br/>
TypeScript supports ES6 module loading syntax. ES6 modules allow for modular loading of JavaScript code. Using ES6 modules you can cherry-pick only what you need for your app.
**Javascript**<br/>
In ES5 the script file creates an angular property on the window of the browser. This property contains every piece of Angular core, whether you need it or not.
