127 lines
5.3 KiB
Plaintext
127 lines
5.3 KiB
Plaintext
include ../../../../_includes/_util-fns
|
|
|
|
.l-main-section
|
|
:markdown
|
|
## Install Angular2
|
|
There are four steps to create any Angular app:
|
|
|
|
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>.)
|
|
|
|
For example:
|
|
|
|
pre.prettyprint.lang-bash
|
|
code.
|
|
# From the directory that contains index.html:
|
|
npm install -g http-server # Or sudo npm install -g http-server
|
|
http-server # Creates a server at localhost:8080
|
|
# In a browser, visit localhost:8080/index.html
|
|
|
|
.callout.is-helpful
|
|
header Typescript vs ES5
|
|
:markdown
|
|
Although we work through the examples in TypeScript, you can also use
|
|
regular ES5. Click the ES5 link in any code box to see the ES5 JavaScript
|
|
version. Note that in ES5, you'd want to name your files `.js` rather than
|
|
`.ts`.
|
|
|
|
.l-main-section
|
|
:markdown
|
|
## Create an entry point
|
|
Create an `index.html` file and add the Angular library tags and a `main.ts` file where
|
|
you'll build your first component.
|
|
|
|
In the `<body>`, add an element called `<my-app>` that will be the root of your
|
|
application.
|
|
|
|
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.
|
|
|
|
+makeTabs('gettingstarted', 'ts/index.html,js/index.html', 'TypeScript, JavaScript')
|
|
|
|
.callout.is-helpful
|
|
header Don't use code.angularjs.org in a live app
|
|
:markdown
|
|
This example serves the Angular library from <a href="http://code.angularjs.org">code.angularjs.org</a>. This is
|
|
fine for examples, but you'd want to serve it yourself or use a CDN for real deployment.
|
|
|
|
.l-main-section
|
|
:markdown
|
|
## Set up the starting component
|
|
|
|
In `main.ts`, create a class called `AppComponent`, configure it to bind to the
|
|
`<my-app>` element in `index.html`, and call Angular's `bootstrap()` to kick
|
|
it all off like this:
|
|
|
|
+makeTabs("gettingstarted", "ts/main.ts, js/main.js", "TypeScript, JavaScript")
|
|
|
|
.callout.is-helpful
|
|
header Annotations vs Decorators
|
|
:markdown
|
|
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.
|
|
|
|
+makeTabs('gettingstarted', 'ts/main-import.ts', 'TypeScript')
|
|
|
|
+makeExample('gettingstarted/js', 'main-bootstrap.js', 'JavaScript')
|