(docs) Remove all mentions of quickstart-old across examples and languages (PR 355)
This commit is contained in:
parent
48fc5b931b
commit
551f35bed3
|
@ -1 +0,0 @@
|
|||
src/**/*.js
|
|
@ -1,12 +0,0 @@
|
|||
describe('Protractor quick start test', function() {
|
||||
beforeEach(function() {
|
||||
browser.get('quickstart/index.html');
|
||||
});
|
||||
|
||||
// #docregion test
|
||||
it('should display Alice', function() {
|
||||
expect(element(by.id('output')).getText()).toEqual('Hello Alice');
|
||||
});
|
||||
// #enddocregion
|
||||
});
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<html>
|
||||
<head>
|
||||
<!-- #docregion head -->
|
||||
<title>Angular 2 Quickstart</title>
|
||||
<script src="node_modules/traceur/bin/traceur-runtime.js"></script>
|
||||
<script src="node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||
<!-- #enddocregion -->
|
||||
</head>
|
||||
<body>
|
||||
<app></app>
|
||||
<script>System.import('src/app');</script>
|
||||
</body>
|
||||
</html>
|
|
@ -1,21 +0,0 @@
|
|||
{
|
||||
"name": "ng2-quickstart",
|
||||
"version": "0.0.1",
|
||||
"license": "ICS",
|
||||
"repository": {},
|
||||
"dependencies": {
|
||||
"angular2": "2.0.0-alpha.35",
|
||||
"es6-module-loader": "^0.16",
|
||||
"systemjs": "^0.16",
|
||||
"traceur": "0.0.91"
|
||||
},
|
||||
"devDependencies": {
|
||||
"jasmine-core": "^2.3.4",
|
||||
"zone.js": "^0.5.3"
|
||||
},
|
||||
"scripts": {
|
||||
"postinstall": "cd src && tsd reinstall -r -o && cd ..",
|
||||
"tsc": "tsc -p src -w",
|
||||
"start": "live-server"
|
||||
}
|
||||
}
|
|
@ -1,68 +0,0 @@
|
|||
///// Boiler Plate ////
|
||||
import {bind} from 'angular2/angular2';
|
||||
|
||||
import {
|
||||
beforeEachBindings, DebugElement, RootTestComponent as RTC,
|
||||
// Jasmine overrides
|
||||
beforeEach, ddescribe, xdescribe, describe, iit, it, xit, //expect,
|
||||
AsyncTestCompleter, inject, RootTestComponent, TestComponentBuilder,
|
||||
} from 'angular2/test';
|
||||
|
||||
//// Testing this component ////
|
||||
import {AppComponent} from './app';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
|
||||
describe('(no DOM)', () => {
|
||||
|
||||
it('component has name == "Alice"', () => {
|
||||
let app = new AppComponent;
|
||||
expect(app.name).toEqual('Alice');
|
||||
});
|
||||
});
|
||||
|
||||
describe('(in DOM)', () => {
|
||||
|
||||
it('component has name == "Alice"', injectTcb((tcb, done) => {
|
||||
tcb
|
||||
.createAsync(AppComponent)
|
||||
.then((rootTC:RTC) => {
|
||||
let ac:AppComponent = rootTC.componentInstance;
|
||||
expect(ac.name).toEqual('Alice');
|
||||
})
|
||||
.catch(fail).then(done,done);
|
||||
}));
|
||||
|
||||
it('DOM has name == "Alice"', injectTcb((tcb, done) => {
|
||||
tcb
|
||||
.createAsync(AppComponent)
|
||||
.then((rootTC:RTC) => {
|
||||
rootTC.detectChanges();
|
||||
let domName = rootTC.componentViewChildren[0].nativeElement.innerHTML;
|
||||
expect(domName).toMatch('Alice');
|
||||
})
|
||||
.catch(fail).then(done,done);
|
||||
}));
|
||||
//rootTC.nativeElement.getElementsByTagName('h1')[0].innerHTML
|
||||
it('DOM has name == "Alice" (2)', injectTcb((tcb, done) => {
|
||||
tcb
|
||||
.createAsync(AppComponent)
|
||||
.then((rootTC:RTC) => {
|
||||
rootTC.detectChanges();
|
||||
let domName = rootTC.nativeElement
|
||||
// jQuery goes here
|
||||
.getElementsByTagName('h1')[0].innerHTML;
|
||||
expect(domName).toMatch('Alice');
|
||||
})
|
||||
.catch(fail).then(done,done);
|
||||
}));
|
||||
});
|
||||
});
|
||||
|
||||
///////// test.helpers.ts: here for now ////////
|
||||
|
||||
function injectTcb(testFn: (tcb: TestComponentBuilder, done: ()=>void) => void) {
|
||||
return inject([TestComponentBuilder, AsyncTestCompleter], function injectWrapper(tcb: TestComponentBuilder, async: AsyncTestCompleter) {
|
||||
testFn(tcb, async.done.bind(async));
|
||||
});
|
||||
}
|
|
@ -1,22 +0,0 @@
|
|||
// #docregion
|
||||
// #docregion import
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
// #enddocregion
|
||||
|
||||
@Component({
|
||||
selector: 'app'
|
||||
})
|
||||
@View({
|
||||
template: '<h1 id="output">Hello {{ name }}</h1>'
|
||||
})
|
||||
export class AppComponent {
|
||||
name : string;
|
||||
|
||||
constructor() {
|
||||
this.name = 'Alice';
|
||||
}
|
||||
}
|
||||
|
||||
// #docregion bootstrap
|
||||
bootstrap(AppComponent);
|
||||
// #enddocregion
|
|
@ -1,9 +0,0 @@
|
|||
describe("Jasmine sample test", function() {
|
||||
|
||||
it("1+1 should be 2", function() {
|
||||
|
||||
var result = 1 + 1;
|
||||
|
||||
expect(result).toBe(2);
|
||||
});
|
||||
});
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES5",
|
||||
"module": "commonjs",
|
||||
"sourceMap": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true
|
||||
}
|
||||
}
|
|
@ -1,24 +0,0 @@
|
|||
{
|
||||
"version": "v4",
|
||||
"repo": "borisyankov/DefinitelyTyped",
|
||||
"ref": "master",
|
||||
"path": "typings",
|
||||
"bundle": "typings/tsd.d.ts",
|
||||
"installed": {
|
||||
"angular2/angular2.d.ts": {
|
||||
"commit": "cd2e71bb1f0459197e733be66fdeafaec600514d"
|
||||
},
|
||||
"es6-promise/es6-promise.d.ts": {
|
||||
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
|
||||
},
|
||||
"jasmine/jasmine.d.ts": {
|
||||
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
|
||||
},
|
||||
"rx/rx.d.ts": {
|
||||
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
|
||||
},
|
||||
"rx/rx-lite.d.ts": {
|
||||
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,55 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
||||
<title>QuickStart Tests</title>
|
||||
<link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
|
||||
|
||||
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
|
||||
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
|
||||
<script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
|
||||
|
||||
<script src="node_modules/traceur/bin/traceur-runtime.js"></script>
|
||||
<script src="node_modules/es6-module-loader/dist/es6-module-loader.src.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||
<script src="node_modules/angular2/bundles/http.dev.js"></script>
|
||||
<script src="node_modules/angular2/bundles/test_lib.dev.js"></script>
|
||||
<script src="node_modules/zone.js/dist/long-stack-trace-zone.js"></script>
|
||||
<script src="node_modules/zone.js/dist/jasmine-patch.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<app><!--placeholder--></app>
|
||||
<script>
|
||||
(function() {
|
||||
Error.stackTraceLimit=Infinity;
|
||||
jasmine.DEFAULT_TIMEOUT_INTERVAL = 100;
|
||||
|
||||
var imports = [
|
||||
'src/dummy.spec',
|
||||
'src/app.spec',
|
||||
'@empty' // placeholder makes it easier to comment-out specs above
|
||||
].map(System.import.bind(System));
|
||||
|
||||
Promise.all(imports)
|
||||
.then( function() {
|
||||
// Must designate a BrowserDomAdapter or else DOM testing bombs
|
||||
// (e.g. when testing component and call `tcb.createAsync`) for lack of `DOM` object
|
||||
// Igor's recommended approach based on
|
||||
// https://github.com/angular/angular/blob/master/test-main.js
|
||||
//
|
||||
// TODO: BrowserDomAdapter should be exposed through 'angular2/test' instead
|
||||
var DomAdapterModule = System.get('angular2/src/dom/browser_adapter');
|
||||
if (DomAdapterModule) {
|
||||
DomAdapterModule.BrowserDomAdapter.makeCurrent();
|
||||
}
|
||||
})
|
||||
.then( function() { window.onload();} ) // re-execute Jasmine's buildup
|
||||
.catch( function(err) { console.log(err);} );
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -1,261 +0,0 @@
|
|||
.callout.is-helpful
|
||||
header Angular is in developer preview
|
||||
p.
|
||||
This quickstart does not reflect the final development process for writing apps with Angular.
|
||||
The following setup is for those who want to try out Angular while it is in developer preview.
|
||||
|
||||
// STEP 1 - Create a project ##########################
|
||||
.l-main-section
|
||||
h2#section-create-project 1. Create a project
|
||||
|
||||
p.
|
||||
This quickstart shows how to write your Angular components in TypeScript. You could instead choose
|
||||
another language such as <a href="/docs/dart/latest/quickstart.html">Dart</a>, ES5, or ES6.
|
||||
|
||||
p.
|
||||
The goal of this quickstart is to write a component in TypeScript that prints a string.
|
||||
We assume you have already installed <a href="https://docs.npmjs.com/getting-started/installing-node">Node and npm</a>.
|
||||
|
||||
p.
|
||||
To get started, create a new empty project directory. All the following commands should be run
|
||||
from this directory.
|
||||
|
||||
p.
|
||||
To get the benefits of TypeScript, we want to have the type definitions available for the compiler and the editor.
|
||||
TypeScript type definitions are typically published in a repo called <a href="http://definitelytyped.org/">DefinitelyTyped</a>.
|
||||
To fetch one of the type definitions to the local directory, we use the <a href="https://www.npmjs.com/package/tsd">tsd package manager</a>.
|
||||
|
||||
code-example.
|
||||
$ npm install -g tsd@^0.6.0
|
||||
$ tsd install angular2 es6-promise rx rx-lite
|
||||
|
||||
p.
|
||||
Next, create two empty files, <code>index.html</code> and <code>app.ts</code>, both at the root of the project:
|
||||
|
||||
code-example.
|
||||
$ touch app.ts index.html
|
||||
|
||||
// STEP 2 - Start the TypeScript compiler ##########################
|
||||
.l-main-section
|
||||
h2#start-tsc 2. Run the TypeScript compiler
|
||||
|
||||
p.
|
||||
Since the browser doesn't understand TypeScript code, we need to run a compiler to translate
|
||||
your code to browser-compliant JavaScript as you work. This quickstart uses the TypeScript
|
||||
compiler in <code>--watch</code> mode, but it is also possible to do the translation in the browser as files
|
||||
are loaded, or configure your editor or IDE to do it.
|
||||
|
||||
code-example.
|
||||
$ npm install -g typescript@^1.5.0
|
||||
$ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts
|
||||
|
||||
.callout.is-helpful
|
||||
p.
|
||||
Windows users: if you get an error that an option is unknown, you are probably running
|
||||
an older version of TypeScript.
|
||||
See <a href="http://stackoverflow.com/questions/23267858/how-do-i-install-typescript">
|
||||
Stack Overflow: How do I install Typescript</a>
|
||||
|
||||
// STEP 3 - Import Angular ##########################
|
||||
.l-main-section
|
||||
h2#section-transpile 3. Import Angular
|
||||
|
||||
p Inside of <code>app.ts</code>, import the type definitions from Angular:
|
||||
code-example.
|
||||
/// <reference path="typings/angular2/angular2.d.ts" />
|
||||
|
||||
p Now your editor should be able to complete the available imports:
|
||||
code-example.
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
|
||||
p.
|
||||
The above import statement uses ES6 module syntax to import three symbols from the Angular module.
|
||||
The module will load at runtime.
|
||||
|
||||
|
||||
// STEP 4 - Create a component ##########################
|
||||
.l-main-section
|
||||
|
||||
h2#section-angular-create-account 4. Define a component
|
||||
|
||||
p.
|
||||
Components structure and represent the UI. This quickstart demonstrates the process of creating a component
|
||||
that has an HTML tag named <strong><code><my-app></code></strong>.
|
||||
|
||||
p.
|
||||
A component consists of two parts, the <strong>component controller</strong>
|
||||
which is an ES6 class, and the <strong>decorators</strong> which tell Angular
|
||||
how to place the component into the page.
|
||||
|
||||
code-example(language="javascript" format="linenums").
|
||||
// Annotation section
|
||||
@Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: '<h1>Hello {{ name }}</h1>'
|
||||
})
|
||||
// Component controller
|
||||
class MyAppComponent {
|
||||
name: string;
|
||||
|
||||
constructor() {
|
||||
this.name = 'Alice';
|
||||
}
|
||||
}
|
||||
|
||||
.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.
|
||||
|
||||
code-example(language="javascript" format="linenums").
|
||||
@Component({
|
||||
selector: 'my-app' // Defines the <my-app></my-app> tag
|
||||
})
|
||||
@View({
|
||||
template: '<h1>Hello {{ name }}</h1>' // Defines the inline template for the component
|
||||
})
|
||||
|
||||
p.
|
||||
The annotations above specify an HTML tag of <code><my-app></code>
|
||||
and a template of <code ng-non-bindable><h1>Hello {{ name }}</h1></code>.
|
||||
|
||||
.l-sub-section
|
||||
h3 The template and the component controller
|
||||
|
||||
p.
|
||||
The component controller is the backing of the component's template. This component
|
||||
controller uses TypeScript <code>class</code> syntax.
|
||||
|
||||
code-example(language="javascript" format="linenums").
|
||||
class MyAppComponent {
|
||||
name: string;
|
||||
constructor() {
|
||||
this.name = 'Alice';
|
||||
}
|
||||
}
|
||||
|
||||
p.
|
||||
Templates read from their component controllers. Templates have access to any properties
|
||||
or functions placed on the component controller.
|
||||
|
||||
p.
|
||||
The template above binds to a <code>name</code> property through
|
||||
the double-mustache syntax (<code ng-non-bindable>{{ ... }}</code>).
|
||||
The body of the constructor assigns "Alice" to the name property. When the
|
||||
template renders, "Hello Alice" appears instead of
|
||||
<span ng-non-bindable>"Hello {{ name }}"</span>.
|
||||
|
||||
|
||||
|
||||
// STEP 5 - Bootstrap ##########################
|
||||
.l-main-section
|
||||
h2#section-transpile 5. Bootstrap
|
||||
|
||||
p.
|
||||
At the bottom of <code>app.ts</code>, call the <code>bootstrap()</code> function
|
||||
to load your new component into its page:
|
||||
|
||||
code-example(language="javaScript").
|
||||
bootstrap(MyAppComponent);
|
||||
|
||||
|
||||
p.
|
||||
The <code>bootstrap()</code> function takes a
|
||||
component as a parameter, enabling the component
|
||||
(as well as any child components it contains) to render.
|
||||
|
||||
|
||||
// STEP 6 - Declare the HTML ##########################
|
||||
.l-main-section
|
||||
|
||||
h2#section-angular-create-account 6. Declare the HTML
|
||||
|
||||
p.
|
||||
Inside the <code>head</code> tag of <code>index.html</code>,
|
||||
include the traceur-runtime and the Angular bundle.
|
||||
Instantiate the <code>my-app</code> component in the <code>body</code>.
|
||||
|
||||
code-example(language="html" format="linenums").
|
||||
<!-- index.html -->
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Quickstart</title>
|
||||
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- The app component created in app.ts -->
|
||||
<my-app></my-app>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
// STEP 7 - Declare the HTML ##########################
|
||||
.l-main-section
|
||||
|
||||
h2#section-load-component-module 7. Load the component
|
||||
|
||||
p.
|
||||
The last step is to load the module for the <code>my-app</code> component.
|
||||
To do this, we'll use the System library.
|
||||
|
||||
.l-sub-section
|
||||
h3 System.js
|
||||
|
||||
p.
|
||||
<a href="https://github.com/systemjs/systemjs">System</a> is a third-party open-source library that
|
||||
adds ES6 module loading functionality to browsers.
|
||||
|
||||
p.
|
||||
Add the System.js dependency in the <code><head></code> tag, so that
|
||||
it looks like:
|
||||
|
||||
code-example(language="html" format="linenums").
|
||||
<head>
|
||||
<title>Angular 2 Quickstart</title>
|
||||
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
|
||||
<script src="https://jspm.io/system@0.16.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
|
||||
</head>
|
||||
|
||||
p.
|
||||
Add the following module-loading code:
|
||||
|
||||
code-example(language="html" format="linenums").
|
||||
<my-app></my-app>
|
||||
<script>System.import('app');</script>
|
||||
|
||||
|
||||
// STEP 8 - Run a local server ##########################
|
||||
.l-main-section
|
||||
|
||||
h2#section-load-component-module 8. Run a local server
|
||||
|
||||
p Run a local HTTP server, and view <code>index.html</code>.
|
||||
|
||||
p.
|
||||
If you don't already have an HTTP server,
|
||||
you can install one using <code>npm install -g http-server</code>.
|
||||
(If that results in an access error, then you might need to use
|
||||
<code><b>sudo</b> npm ...</code>.)
|
||||
|
||||
p For example:
|
||||
|
||||
code-example.
|
||||
# From the directory that contains index.html:
|
||||
npm install -g http-server # Or sudo npm install -g http-server
|
||||
http-server # Creates a server at localhost:8080
|
||||
# In a browser, visit localhost:8080/index.html
|
||||
|
||||
|
||||
// WHAT'S NEXT... ##########################
|
||||
.l-main-section
|
||||
h2#section-transpile Great job! We'll have the next steps out soon.
|
|
@ -1,260 +0,0 @@
|
|||
.callout.is-helpful
|
||||
header Angular is in developer preview
|
||||
p.
|
||||
This quickstart does not reflect the final development process for writing apps with Angular.
|
||||
The following setup is for those who want to try out Angular while it is in developer preview.
|
||||
|
||||
// STEP 1 - Create a project ##########################
|
||||
.l-main-section
|
||||
h2#section-create-project 1. Create a project
|
||||
|
||||
p.
|
||||
This quickstart shows how to write your Angular components in TypeScript. You could instead choose
|
||||
another language such as <a href="/docs/dart/latest/quickstart.html">Dart</a>, ES5, or ES6.
|
||||
|
||||
p.
|
||||
The goal of this quickstart is to write a component in TypeScript that prints a string.
|
||||
We assume you have already installed <a href="https://docs.npmjs.com/getting-started/installing-node">Node and npm</a>.
|
||||
|
||||
p.
|
||||
To get started, create a new empty project directory. All the following commands should be run
|
||||
from this directory.
|
||||
|
||||
p.
|
||||
To get the benefits of TypeScript, we want to have the type definitions available for the compiler and the editor.
|
||||
TypeScript type definitions are typically published in a repo called <a href="http://definitelytyped.org/">DefinitelyTyped</a>.
|
||||
To fetch one of the type definitions to the local directory, we use the <a href="https://www.npmjs.com/package/tsd">tsd package manager</a>.
|
||||
|
||||
code-example.
|
||||
$ npm install -g tsd@^0.6.0
|
||||
$ tsd install angular2 es6-promise rx rx-lite
|
||||
|
||||
p.
|
||||
Next, create two empty files, <code>index.html</code> and <code>app.ts</code>, both at the root of the project:
|
||||
|
||||
code-example.
|
||||
$ touch app.ts index.html
|
||||
|
||||
// STEP 2 - Start the TypeScript compiler ##########################
|
||||
.l-main-section
|
||||
h2#start-tsc 2. Run the TypeScript compiler
|
||||
|
||||
p.
|
||||
Since the browser doesn't understand TypeScript code, we need to run a compiler to translate
|
||||
your code to browser-compliant JavaScript as you work. This quickstart uses the TypeScript
|
||||
compiler in <code>--watch</code> mode, but it is also possible to do the translation in the browser as files
|
||||
are loaded, or configure your editor or IDE to do it.
|
||||
|
||||
code-example.
|
||||
$ npm install -g typescript@^1.5.0-beta
|
||||
$ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts
|
||||
|
||||
.callout.is-helpful
|
||||
p.
|
||||
Windows users: if you get an error that an option is unknown, you are probably running
|
||||
an older version of TypeScript.
|
||||
See <a href="http://stackoverflow.com/questions/23267858/how-do-i-install-typescript">
|
||||
Stack Overflow: How do I install Typescript</a>
|
||||
|
||||
// STEP 3 - Import Angular ##########################
|
||||
.l-main-section
|
||||
h2#section-transpile 3. Import Angular
|
||||
|
||||
p Inside of <code>app.ts</code>, import the type definitions from Angular:
|
||||
code-example.
|
||||
/// <reference path="typings/angular2/angular2.d.ts" />
|
||||
|
||||
p Now your editor should be able to complete the available imports:
|
||||
code-example.
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
|
||||
p.
|
||||
The above import statement uses ES6 module syntax to import three symbols from the Angular module.
|
||||
The module will load at runtime.
|
||||
|
||||
|
||||
// STEP 4 - Create a component ##########################
|
||||
.l-main-section
|
||||
|
||||
h2#section-angular-create-account 4. Define a component
|
||||
|
||||
p.
|
||||
Components structure and represent the UI. This quickstart demonstrates the process of creating a component
|
||||
that has an HTML tag named <strong><code><my-app></code></strong>.
|
||||
|
||||
p.
|
||||
A component consists of two parts, the <strong>component controller</strong>
|
||||
which is an ES6 class, and the <strong>decorators</strong> which tell Angular
|
||||
how to place the component into the page.
|
||||
|
||||
code-example(language="javascript" format="linenums").
|
||||
// Annotation section
|
||||
@Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: '<h1>Hello {{ name }}</h1>'
|
||||
})
|
||||
// Component controller
|
||||
class MyAppComponent {
|
||||
name: string;
|
||||
|
||||
constructor() {
|
||||
this.name = 'Alice';
|
||||
}
|
||||
}
|
||||
|
||||
.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.
|
||||
|
||||
code-example(language="javascript" format="linenums").
|
||||
@Component({
|
||||
selector: 'my-app' // Defines the <my-app></my-app> tag
|
||||
})
|
||||
@View({
|
||||
template: '<h1>Hello {{ name }}</h1>' // Defines the inline template for the component
|
||||
})
|
||||
|
||||
p.
|
||||
The annotations above specify an HTML tag of <code><my-app></code>
|
||||
and a template of <code ng-non-bindable><h1>Hello {{ name }}</h1></code>.
|
||||
|
||||
.l-sub-section
|
||||
h3 The template and the component controller
|
||||
|
||||
p.
|
||||
The component controller is the backing of the component's template. This component
|
||||
controller uses TypeScript <code>class</code> syntax.
|
||||
|
||||
code-example(language="javascript" format="linenums").
|
||||
class MyAppComponent {
|
||||
name: string;
|
||||
constructor() {
|
||||
this.name = 'Alice';
|
||||
}
|
||||
}
|
||||
|
||||
p.
|
||||
Templates read from their component controllers. Templates have access to any properties
|
||||
or functions placed on the component controller.
|
||||
|
||||
p.
|
||||
The template above binds to a <code>name</code> property through
|
||||
the double-mustache syntax (<code ng-non-bindable>{{ ... }}</code>).
|
||||
The body of the constructor assigns "Alice" to the name property. When the
|
||||
template renders, "Hello Alice" appears instead of
|
||||
<span ng-non-bindable>"Hello {{ name }}"</span>.
|
||||
|
||||
|
||||
|
||||
// STEP 5 - Bootstrap ##########################
|
||||
.l-main-section
|
||||
h2#section-transpile 5. Bootstrap
|
||||
|
||||
p.
|
||||
At the bottom of <code>app.ts</code>, call the <code>bootstrap()</code> function
|
||||
to load your new component into its page:
|
||||
|
||||
code-example(language="javaScript").
|
||||
bootstrap(MyAppComponent);
|
||||
|
||||
|
||||
p.
|
||||
The <code>bootstrap()</code> function takes a
|
||||
component as a parameter, enabling the component
|
||||
(as well as any child components it contains) to render.
|
||||
|
||||
|
||||
// STEP 6 - Declare the HTML ##########################
|
||||
.l-main-section
|
||||
|
||||
h2#section-angular-create-account 6. Declare the HTML
|
||||
|
||||
p.
|
||||
Inside the <code>head</code> tag of <code>index.html</code>,
|
||||
include the traceur-runtime and the Angular bundle.
|
||||
Instantiate the <code>my-app</code> component in the <code>body</code>.
|
||||
|
||||
code-example(language="html" format="linenums").
|
||||
<!-- index.html -->
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Quickstart</title>
|
||||
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- The app component created in app.ts -->
|
||||
<my-app></my-app>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
// STEP 7 - Declare the HTML ##########################
|
||||
.l-main-section
|
||||
|
||||
h2#section-load-component-module 7. Load the component
|
||||
|
||||
p.
|
||||
The last step is to load the module for the <code>my-app</code> component.
|
||||
To do this, we'll use the System library.
|
||||
|
||||
.l-sub-section
|
||||
h3 System.js
|
||||
|
||||
p.
|
||||
<a href="https://github.com/systemjs/systemjs">System</a> is a third-party open-source library that
|
||||
adds ES6 module loading functionality to browsers.
|
||||
|
||||
p.
|
||||
Add the System.js dependency in the <code><head></code> tag, so that
|
||||
it looks like:
|
||||
|
||||
code-example(language="html" format="linenums").
|
||||
<head>
|
||||
<title>Angular 2 Quickstart</title>
|
||||
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
|
||||
<script src="https://jspm.io/system@0.16.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
|
||||
</head>
|
||||
|
||||
p.
|
||||
Add the following module-loading code:
|
||||
|
||||
code-example(language="html" format="linenums").
|
||||
<my-app></my-app>
|
||||
<script>System.import('app');</script>
|
||||
|
||||
|
||||
// STEP 8 - Run a local server ##########################
|
||||
.l-main-section
|
||||
|
||||
h2#section-load-component-module 8. Run a local server
|
||||
|
||||
p Run a local HTTP server, and view <code>index.html</code>.
|
||||
|
||||
p.
|
||||
If you don't already have an HTTP server,
|
||||
you can install one using <code>npm install -g http-server</code>.
|
||||
(If that results in an access error, then you might need to use
|
||||
<code><b>sudo</b> npm ...</code>)
|
||||
For example:
|
||||
|
||||
code-example.
|
||||
# From the directory that contains index.html:
|
||||
npm install -g http-server # Or sudo npm install -g http-server
|
||||
http-server # Creates a server at localhost:8080
|
||||
# In a browser, visit localhost:8080/index.html
|
||||
|
||||
|
||||
// WHAT'S NEXT... ##########################
|
||||
.l-main-section
|
||||
h2#section-transpile Great job! We'll have the next steps out soon.
|
Loading…
Reference in New Issue