.l-main-section
h2#section-install-or-plunker Install Angular or Use Plunker
p There are four steps to create any Angular app:
ol
li Create an entry point HTML file where users will start
li Load the Angular library at the top of the file
li Make a root component for your application
li Bootstrap Angular
p.
You can edit and test out your apps either though serving local files through a web server or through a service like
Plunker.
.callout.is-helpful
header Plunker is the fastest setup
p.
Plunker is a free online text editor. You can use the starter template for Angular 2 to get going without any setup.
p.
For Plunker, just use the starter template to get going. If you're serving local files, edit and save them and start a web server that serves files in that directory. If you have Python installed, you can run a basic HTTP server from the root of your code directory with:
pre.prettyprint.lang-bash
code python -m SimpleHTTPServer 8000
p.
If you want to skip the working examples you can check out these links on Plunker. TypeScript Example or
ES5 Example.
.l-main-section
h2#section-create-an-entry-point Create an entry point
p.
Create an index.html file and add the Angular library tags and a main.js file where
you'll build your first component.
p.
In the <body>, add an element called <my-app> that will be the root of your
application.
p.
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. System requires mapping the code file paths to understand what to be load.
pre.prettyprint.lang-html
code.
//ES5
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.sfx.dev.js"></script>
<script src="main.js"></script>
</head>
<body>
</body>
</html>
pre.prettyprint.lang-html
code.
//TypeScript
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://jspm.io/system@0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js"></script>
</head>
<body>
<my-app></my-app>
<script>
System.config({
paths: {
'*': '*.js',
'angular2/*': 'angular2/*',
}
});
System.import('main');
</script>
</body>
</html>
.callout.is-helpful
header Don't use code.angularjs.org in a live app
p.
This example serves the Angular library from code.angularjs.org. This is
fine for examples, but you'd want to serve it yourself or use a CDN for real deployment.
.l-main-section
h2#section-set-up-the-starting-component Set up the starting component
p.
In main.js, 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:
.code-box
nav.code-box-nav
a(href="#")
pre.prettyprint.lang-javascript
code.
//ES5
function AppComponent() {}
AppComponent.annotations = [
new angular.Component({
selector: 'my-app'
}),
new angular.View({
template: '<h1>My first Angular 2 App</h1>'
})
];
document.addEventListener('DOMContentLoaded', function() {
angular.bootstrap(AppComponent);
});
pre.prettyprint.lang-typescript
code.
//TypeScript
import {Component, View, bootstrap} from 'angular2/angular2';
@Component({
selector: 'my-app'
})
@View({
template: '<h1>My first Angular 2 App</h1>'
})
class AppComponent {
}
bootstrap(AppComponent);
.l-main-section
h2#section-run-it Run it!
p.
Open index.html through your web server or hit the Run button if using Plunker and
you should see:
div(align='center')
img(src='setup-example1.png')
.l-main-section
h2#section-explanations Explanations
p This basic Angular app contains the structure for any app you'll build.
.l-sub-section
h3 It's all a tree
p.
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.
p.
The root component's job is to give a location in the index.html file where your application will
render through it's element, in this case <my-app>. There is also nothing special about this
element name and you can pick it as you like.
p.
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
h3 @Component and @View annotations
p.
A component annotation describes details about the component. An annotation can be identified by its at-sign (@).
p.
The @Component annotation defines the HTML tag for the component by specifying the component's CSS selector.
p.
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 templateUrl property and give it the path to the HTML file.
.l-sub-section
h3 import vs. window.angular
p.
The main difference between the ES5 and TypeScript versions is the loading of modules.
strong TypeScript
p.
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.
pre.prettyprint.lang-typescript
code.
import {Component, View, bootstrap} from 'angular2/angular2';
...
// bootstrap is available for use because it was imported from angular core
bootstrap(AppComponent);
strong ES5
p.
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.
pre.prettyprint.lang-typescript
code.
// window.angular is available because the script file attaches the angular property to the window
document.addEventListener('DOMContentLoaded', function() {
angular.bootstrap(AppComponent);
});