honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

(docs) Remove all mentions of quickstart-old across examples and languages (PR 355)

Browse Source
This commit is contained in:
Ward Bell 2015-11-06 11:01:58 -08:00
parent 48fc5b931b
commit 551f35bed3
12 changed files with 0 additions and 758 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/docs/_examples/quickstart-old/.gitignore vendored
View File

@ -1 +0,0 @@
src/**/*.js

12
public/docs/_examples/quickstart-old/e2e-spec.js
View File

@ -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
});

16
public/docs/_examples/quickstart-old/index.html
View File

@ -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>

21
public/docs/_examples/quickstart-old/package.json
View File

@ -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"
}
}

68
public/docs/_examples/quickstart-old/src/app.spec.ts
View File

@ -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));
});
}

22
public/docs/_examples/quickstart-old/src/app.ts
View File

@ -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

9
public/docs/_examples/quickstart-old/src/dummy.spec.ts
View File

@ -1,9 +0,0 @@
describe("Jasmine sample test", function() {
it("1+1 should be 2", function() {
var result = 1 + 1;
expect(result).toBe(2);
});
});

9
public/docs/_examples/quickstart-old/src/tsconfig.json
View File

@ -1,9 +0,0 @@
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true
}
}

24
public/docs/_examples/quickstart-old/src/tsd.json
View File

@ -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"
}
}
}

55
public/docs/_examples/quickstart-old/unit-tests.html
View File

@ -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>

261
public/docs/js/latest/quickstart-old.jade
View File

@ -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.
/// &lt;reference path="typings/angular2/angular2.d.ts" /&gt;
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>&lt;my-app&gt;</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: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
})
// 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 &lt;my-app&gt;&lt;/my-app&gt; tag
})
@View({
template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' // Defines the inline template for the component
})
p.
The annotations above specify an HTML tag of <code>&lt;my-app&gt;</code>
and a template of <code ng-non-bindable>&lt;h1&gt;Hello &#123;&#123; name }}&lt;/h1&gt;</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").
&lt;!-- index.html --&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
&lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt;
&lt;script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- The app component created in app.ts --&gt;
&lt;my-app&gt;&lt;/my-app&gt;
&lt;/body&gt;
&lt;/html&gt;
// 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>&lt;head&gt;</code> tag, so that
it looks like:
code-example(language="html" format="linenums").
&lt;head&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
&lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt;
&lt;script src="https://jspm.io/system@0.16.js"&gt;&lt;/script&gt;
&lt;script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"&gt;&lt;/script&gt;
&lt;/head&gt;
p.
Add the following module-loading code:
code-example(language="html" format="linenums").
&lt;my-app&gt;&lt;/my-app&gt;
&lt;script&gt;System.import('app');&lt;/script&gt;
// 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.

260
public/docs/ts/latest/quickstart-old.jade
View File

@ -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.
/// &lt;reference path="typings/angular2/angular2.d.ts" /&gt;
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>&lt;my-app&gt;</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: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
})
// 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 &lt;my-app&gt;&lt;/my-app&gt; tag
})
@View({
template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' // Defines the inline template for the component
})
p.
The annotations above specify an HTML tag of <code>&lt;my-app&gt;</code>
and a template of <code ng-non-bindable>&lt;h1&gt;Hello &#123;&#123; name }}&lt;/h1&gt;</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").
&lt;!-- index.html --&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
&lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt;
&lt;script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- The app component created in app.ts --&gt;
&lt;my-app&gt;&lt;/my-app&gt;
&lt;/body&gt;
&lt;/html&gt;
// 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>&lt;head&gt;</code> tag, so that
it looks like:
code-example(language="html" format="linenums").
&lt;head&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
&lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt;
&lt;script src="https://jspm.io/system@0.16.js"&gt;&lt;/script&gt;
&lt;script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"&gt;&lt;/script&gt;
&lt;/head&gt;
p.
Add the following module-loading code:
code-example(language="html" format="linenums").
&lt;my-app&gt;&lt;/my-app&gt;
&lt;script&gt;System.import('app');&lt;/script&gt;
// 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.