docs(devguide): First pass through chapter 1
This commit is contained in:
Naomi Black
parent
054d3655cb
commit
5b5f1776f3
|
|
@ -0,0 +1,9 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectCodeStyleSettingsManager">
|
||||
<option name="PER_PROJECT_SETTINGS">
|
||||
<value />
|
||||
</option>
|
||||
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default (1)" />
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -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 |
|
|
@ -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:
|
||||
ul
|
||||
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><body></code>, add an element called <code><my-app></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
|
||||
<!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 <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><my-app></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: '<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 <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><my-app></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 |
Loading…
Reference in New Issue