docs(devguide): First pass through chapter 1

This commit is contained in:
Naomi Black 2015-04-19 18:12:19 -07:00
parent 054d3655cb
commit e4df43dea1
4 changed files with 149 additions and 14 deletions

View File

@ -2,7 +2,7 @@
"_listtype": "ordered",
"setup": {
"title": "Setup"
"title": "Getting Started"
},
"displaying-data": {

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

View File

@ -1,26 +1,161 @@
p.
<strong>Angular is still unpackaged and in alpha</strong>. 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.
.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-create-project 1. Create a project
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.
The goal of this quickstart is to create a component that renders "Hello Alice" to the page.
To get started, create a new directory.
You can edit and test out your apps either though serving local files through a web server or through a service like
Plunker.
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
.l-main-section
h2#section-add-es6-shim 2. Clone the quickstart repository
h2#section-create-an-entry-point Create an entry point
p.
Create an <code>index.html</code> file and add the Angular library tags and a <code>main.js</code> file where
you'll build your first component.
p Within your project, clone the quickstart repository:
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
application.
pre.prettyprint
code git clone https://github.com/angular/quickstart.git
pre.prettyprint.lang-html
code.
//ES5
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.19/angular2.sfx.dev.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
pre.prettyprint.lang-html
code.
//TypeScript
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
&lt;script src=&quot;https://jspm.io/system@0.16.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;my-app&gt;&lt;/my-app&gt;
&lt;script&gt;
System.config({
paths: {
&#39;*&#39;: &#39;*.js&#39;,
&#39;angular2/*&#39;: &#39;angular2/*&#39;,
}
});
System.import(&#39;main&#39;);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
.callout.is-helpful
header Don't use code.angularjs.org in a live app
p.
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.
// WHAT'S NEXT... ##########################
.l-main-section
h2#section-transpile Great job! We'll have the next steps out soon.
h2#section-set-up-the-starting-component Set up the starting component
p.
In <code>main.js</code>, create a class called <code>AppComponent</code>, configure it to bind to the
<code>&lt;my-app&gt;</code> element in <code>index.html</code>, and call Angular's <code>bootstrap()</code> to kick
it all off like this:
pre.prettyprint.lang-javascript
code.
//ES5
function AppComponent() {}
AppComponent.annotations = [
new angular.Component({
selector: 'my-app'
}),
new angular.View({
template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
})
];
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: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
})
class AppComponent {
}
bootstrap(AppComponent);
.l-main-section
h2#section-run-it Run it!
p.
Open <code>index.html</code> through your web server or hit the <strong>Run</strong> 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.
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
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 <code>index.html</code> file where your application will
render through it's element, in this case <code>&lt;my-app&gt;</code>. 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.
p Exciting! Not excited yet? Let's move on to <a href="displaying-data.html">Displaying Data</a>.

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB