cleanup for setup file

This commit is contained in:
Alex Wolfe 2015-04-21 23:48:47 -07:00
parent 09307dec5f
commit 8b730d23b3
4 changed files with 33 additions and 33 deletions

View File

@ -10,27 +10,21 @@
p. p.
You can edit and test out your apps either though serving local files through a web server or through a service like You can edit and test out your apps either though serving local files through a web server or through a service like
Plunker. Plunker.
.callout.is-helpful .callout.is-helpful
header Plunker is the fastest setup header Plunker is the fastest setup
p. p.
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. 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. 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: 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 pre.prettyprint.lang-bash
code python -m SimpleHTTPServer 8000 code python -m SimpleHTTPServer 8000
.l-sub-section p.
h3#section-examples Live Examples If you want to skip the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/MRz2i7sjupzxERPAa3SF?p=preview')> TypeScript Example</a> or
p. <a href='http://plnkr.co/edit/wzzKo4etk24t0oAnL6ep?p=preview'> ES5 Example</a>.
If you want to skip the working examples you can check out these links on Plunker.
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 .l-main-section
h2#section-create-an-entry-point Create an entry point h2#section-create-an-entry-point Create an entry point
@ -41,7 +35,7 @@
p. p.
In the <code>&lt;body&gt;</code>, add an element called <code>&lt;my-app&gt;</code> that will be the root of your In the <code>&lt;body&gt;</code>, add an element called <code>&lt;my-app&gt;</code> that will be the root of your
application. application.
p. 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. 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.
@ -129,7 +123,7 @@
} }
bootstrap(AppComponent); bootstrap(AppComponent);
.l-main-section .l-main-section
h2#section-run-it Run it! h2#section-run-it Run it!
@ -170,32 +164,30 @@
The <code>@Component</code> annotation defines the HTML tag for the component by specifying the component's CSS selector. The <code>@Component</code> annotation defines the HTML tag for the component by specifying the component's CSS selector.
p. 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. 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 .l-sub-section
h3 import vs. window.angular h3 import vs. window.angular
p. p.
The main difference between the ES5 and TypeScript versions is the loading of modules. The main difference between the ES5 and TypeScript versions is the loading of modules.
strong TypeScript strong TypeScript
p. 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. 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 pre.prettyprint.lang-typescript
code. code.
import {Component, View, bootstrap} from 'angular2/angular2'; import {Component, View, bootstrap} from 'angular2/angular2';
... ...
// bootstrap is available for use because it was imported from angular core // bootstrap is available for use because it was imported from angular core
bootstrap(AppComponent); bootstrap(AppComponent);
strong ES5 strong ES5
p. 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. 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 pre.prettyprint.lang-typescript
code. code.
// window.angular is available because the script file attaches the angular property to the window // window.angular is available because the script file attaches the angular property to the window
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
angular.bootstrap(AppComponent); angular.bootstrap(AppComponent);
}); });
p Exciting! Not excited yet? Let's move on to <a href="displaying-data.html">Displaying Data</a>.

View File

@ -1,7 +1,9 @@
p. .callout.is-helpful
<strong>Angular is still unpackaged and in alpha</strong>. This quickstart does not header Angular is still unpackaged and in alpha
reflect the final build process for Angular. The following setup is for those who p.
want to try out Angular while it is in alpha. This quickstart does not
reflect the final build process for Angular. The following setup is for those who
want to try out Angular while it is in alpha.
// STEP 1 - Create a project ########################## // STEP 1 - Create a project ##########################
.l-main-section .l-main-section

View File

@ -10,12 +10,18 @@ body {
color: $platinum; color: $platinum;
} }
a { a {
color: $blueberry; color: $blueberry;
} }
code {
background: $mist;
border-radius: 2px;
font-family: $mono-font;
color: $metal;
padding: 0px 2px;
}
.text-center { .text-center {
text-align: center; text-align: center;
} }

View File

@ -29,7 +29,7 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
padding: 0px; padding: 0px;
font-size: 14px; font-size: 15px;
font-weight: 600; font-weight: 600;
line-height: 24px; line-height: 24px;
margin-bottom: $unit * 3; margin-bottom: $unit * 3;
@ -54,7 +54,7 @@
overflow: auto; overflow: auto;
border-radius: 3px; border-radius: 3px;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 15px;
li { li {
color: $metal; color: $metal;
@ -70,7 +70,7 @@
code { code {
background: none; background: none;
font-size: 14px; font-size: 15px;
} }
} }
} }