Setup updates.
This commit is contained in:
parent
bacc83cde7
commit
8752fffe2e
|
@ -1,16 +1,3 @@
|
|||
.l-main-section
|
||||
p.
|
||||
<strong>Mission:</strong> By the end of this chapter, you should be able to get an Angular 2 component to appear on
|
||||
the page.
|
||||
|
||||
.l-sub-section
|
||||
h3#section-examples Examples:
|
||||
ul
|
||||
li
|
||||
a(href='http://plnkr.co/edit/MRz2i7sjupzxERPAa3SF?p=preview') TypeScript
|
||||
li
|
||||
a(href='http://plnkr.co/edit/wzzKo4etk24t0oAnL6ep?p=preview') ES5
|
||||
|
||||
.l-main-section
|
||||
h2#section-install-or-plunker Install Angular or Use Plunker
|
||||
p There are four steps to create any Angular app:
|
||||
|
@ -24,10 +11,13 @@
|
|||
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.
|
||||
For Plunker, just use the <a href="http://plnkr.co/edit/?p=preview">starter template</a> 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:
|
||||
Plunker is a free online text editor. You can use the <a href="http://plnkr.co/edit/?p=preview">starter template</a> for Angular 2 to get going without any setup.
|
||||
|
||||
p.
|
||||
For Plunker, just use the <a href="http://plnkr.co/edit/?p=preview">starter template</a> 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
|
||||
|
@ -42,6 +32,9 @@
|
|||
In the <code><body></code>, add an element called <code><my-app></code> 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
|
||||
|
@ -141,6 +134,8 @@
|
|||
|
||||
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 <code>AppComponent</code>, but there's
|
||||
|
@ -156,6 +151,41 @@
|
|||
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 (<code>@</code>).
|
||||
p.
|
||||
The <code>@Component</code> annotation defines the HTML tag for the component by specifying the component's CSS selector.
|
||||
p.
|
||||
The <code>@View</code> 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
|
||||
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);
|
||||
});
|
||||
|
||||
p Exciting! Not excited yet? Let's move on to <a href="displaying-data.html">Displaying Data</a>.
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue