docs: update QuickStart and plunker generator to a.55; set QS to appear to use beta.0
closes #526
This commit is contained in:
Filipe Silva
Ward Bell
@@ -17,13 +17,13 @@
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"angular2": "2.0.0-alpha.53",
|
||||
"angular2": "2.0.0-alpha.55",
|
||||
"systemjs": "0.19.6",
|
||||
"es6-promise": "^3.0.2",
|
||||
"es6-shim": "^0.33.3",
|
||||
"reflect-metadata": "0.1.2",
|
||||
"rxjs": "5.0.0-alpha.14",
|
||||
"zone.js": "0.5.8",
|
||||
"rxjs": "5.0.0-beta.0",
|
||||
"zone.js": "0.5.10",
|
||||
"bootstrap": "^3.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
// #docregion
|
||||
// #docregion iife
|
||||
(function(app) {
|
||||
// #enddocregion iife
|
||||
// #docregion ng-namespace-funcs, export
|
||||
app.AppComponent = ng.core
|
||||
// #enddocregion export
|
||||
// #docregion component
|
||||
.Component({
|
||||
// #enddocregion ng-namespace-funcs
|
||||
selector: 'my-app',
|
||||
template: '<h1>My First Angular 2 App</h1>'
|
||||
// #docregion ng-namespace-funcs
|
||||
})
|
||||
// #enddocregion component
|
||||
// #docregion class
|
||||
.Class({
|
||||
// #enddocregion ng-namespace-funcs
|
||||
constructor: function() {}
|
||||
// #docregion ng-namespace-funcs
|
||||
});
|
||||
// #enddocregion class
|
||||
// #enddocregion ng-namespace-funcs
|
||||
// #docregion iife
|
||||
})(window.app || (window.app = {}));
|
||||
// #enddocregion iife
|
||||
@@ -0,0 +1,8 @@
|
||||
// #docregion
|
||||
(function(app) {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// #docregion import
|
||||
ng.platform.browser.bootstrap(app.AppComponent);
|
||||
// #enddocregion import
|
||||
});
|
||||
})(window.app || (window.app = {}));
|
||||
@@ -1,12 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- #docregion -->
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Angular 2 QuickStart</title>
|
||||
<script src="node_modules/angular2/bundles/angular2.sfx.dev.js"></script>
|
||||
<script src="app.js"></script>
|
||||
|
||||
<!-- 1. Load libraries -->
|
||||
<!-- #docregion libraries -->
|
||||
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
|
||||
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
|
||||
<script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
|
||||
<!-- #enddocregion libraries -->
|
||||
|
||||
<!-- 2. Load our 'modules' -->
|
||||
<!-- #docregion modules -->
|
||||
<script src='app/app.component.js'></script>
|
||||
<script src='app/boot.js'></script>
|
||||
<!-- #enddocregion modules -->
|
||||
|
||||
</head>
|
||||
|
||||
<!-- 3. Display the application -->
|
||||
<!-- #docregion my-app -->
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
<my-app>Loading...</my-app>
|
||||
</body>
|
||||
<!-- #enddocregion my-app -->
|
||||
|
||||
</html>
|
||||
|
||||
@@ -1,14 +1,20 @@
|
||||
{
|
||||
"name": "angular2-getting-started",
|
||||
"name": "angular2-quickstart",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"start": "npm run lite",
|
||||
"lite": "lite-server"
|
||||
},
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"angular2": "2.0.0-alpha.44"
|
||||
"angular2": "2.0.0-beta.0",
|
||||
"systemjs": "0.19.6",
|
||||
"es6-promise": "^3.0.2",
|
||||
"es6-shim": "^0.33.3",
|
||||
"reflect-metadata": "0.1.2",
|
||||
"rxjs": "5.0.0-beta.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"live-server": "^0.8.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "live-server"
|
||||
"lite-server": "^1.3.1"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -7,7 +7,9 @@
|
||||
|
||||
<!-- 1. Load libraries -->
|
||||
<!-- #docregion libraries -->
|
||||
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
<script src="node_modules/rxjs/bundles/Rx.js"></script>
|
||||
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||
<!-- #enddocregion libraries -->
|
||||
|
||||
@@ -30,4 +32,4 @@
|
||||
</body>
|
||||
<!-- #enddocregion my-app -->
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -9,13 +9,13 @@
|
||||
},
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"angular2": "2.0.0-alpha.53",
|
||||
"angular2": "2.0.0-beta.0",
|
||||
"systemjs": "0.19.6",
|
||||
"es6-promise": "^3.0.2",
|
||||
"es6-shim": "^0.33.3",
|
||||
"reflect-metadata": "0.1.2",
|
||||
"rxjs": "5.0.0-alpha.14",
|
||||
"zone.js": "0.5.8"
|
||||
"rxjs": "5.0.0-beta.0",
|
||||
"zone.js": "0.5.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
"concurrently": "^1.0.0",
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -82,16 +82,15 @@ code-example(format="").
|
||||
:marked
|
||||
Itching to know the details? We explain in the [appendix below](#package-json)
|
||||
:marked
|
||||
Install these packages by opening a terminal window (command window in Windows) and
|
||||
running this npm command.
|
||||
Install these packages. Open a terminal window (command window in Windows) and
|
||||
run this npm command.
|
||||
code-example(format="").
|
||||
npm install
|
||||
:marked
|
||||
.l-sub-section
|
||||
:marked
|
||||
A few scary messages in red may appear in the console. Ignore them.
|
||||
What matters is is if it finishes cleanly. If it does, continue on.
|
||||
If it doesn't, time to stop and find out why.
|
||||
Scary <span style="color:red; font-weight: bold">error messages in red</span> may appear **during** install.
|
||||
Ignore them. The install will succeed. See the [appendix below](#npm-errors) for more information.
|
||||
:marked
|
||||
### Configure TypeScript
|
||||
|
||||
@@ -236,7 +235,7 @@ code-example(format="").
|
||||
:marked
|
||||
There are three noteworthy sections of HTML:
|
||||
|
||||
1. We load the JavaScript libraries we need.<br/>
|
||||
1. We load the JavaScript libraries we need. `angular2-polyfills.js` and `Rx.js` are needed by Angular 2.<br/>
|
||||
|
||||
2. We configure something called `System` and ask it to import the
|
||||
boot file we just wrote.
|
||||
@@ -402,6 +401,21 @@ code-example(format="").
|
||||
with excellent support for Angular apps that use routing.
|
||||
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
<a id="npm-errors"></a>
|
||||
### Appendix: Npm errors and warnings
|
||||
|
||||
All is well if there are no console messages starting with `npm ERR!` *at the end* of an **npm install**.
|
||||
There might be a few `npm WARN` messages along the way — and that is perfectly fine.
|
||||
|
||||
We often see an `npm WARN` message after a series of `gyp ERR!` messages.
|
||||
Ignore them. A package may try to re-compile itself using `node-gyp`.
|
||||
If the re-compile fails, the package recovers (typically with a pre-built version)
|
||||
and everything works.
|
||||
|
||||
We are in good shape as long as there are no `npm ERR!` messages at the very end of `npm install`.
|
||||
|
||||
<!-- Move this to the Style Guide when we have one -->
|
||||
.l-main-section
|
||||
:marked
|
||||
@@ -577,4 +591,4 @@ code-example(format="").
|
||||
|
||||
While writing a separate `boot.ts` file we learned an essential Angular skill:
|
||||
how to export from one module and import into another.
|
||||
We'll do a lot of that as we learn more Angular.
|
||||
We'll do a lot of that as we learn more Angular.
|
||||
|
||||
@@ -34,28 +34,49 @@ var _rxData = [
|
||||
{
|
||||
pattern: 'script',
|
||||
from: 'node_modules/systemjs/dist/system.src.js',
|
||||
to: ['https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js', 'https://code.angularjs.org/tools/typescript.js']
|
||||
to: ['https://code.angularjs.org/tools/system.js', 'https://code.angularjs.org/tools/typescript.js']
|
||||
//to: ['https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js', 'https://code.angularjs.org/tools/typescript.js']
|
||||
// to: ['https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js', 'https://code.angularjs.org/tools/typescript.js' ]
|
||||
},
|
||||
{
|
||||
pattern: 'script',
|
||||
from: 'node_modules/angular2/bundles/angular2.dev.js',
|
||||
to: 'https://code.angularjs.org/2.0.0-alpha.53/angular2.dev.js'
|
||||
to: 'https://code.angularjs.org/2.0.0-alpha.55/angular2.dev.js'
|
||||
},
|
||||
{
|
||||
pattern: 'script',
|
||||
from: 'node_modules/angular2/bundles/angular2-all.umd.dev.js',
|
||||
to: 'https://code.angularjs.org/2.0.0-alpha.55/angular2-all.umd.dev.js'
|
||||
},
|
||||
{
|
||||
pattern: 'script',
|
||||
from: 'node_modules/angular2/bundles/angular2-polyfills.js',
|
||||
to: 'https://code.angularjs.org/2.0.0-alpha.55/angular2-polyfills.js'
|
||||
},
|
||||
{
|
||||
pattern: 'script',
|
||||
from: 'node_modules/rxjs/bundles/Rx.js',
|
||||
to: 'https://code.angularjs.org/2.0.0-alpha.55/Rx.js'
|
||||
},
|
||||
{
|
||||
pattern: 'script',
|
||||
from: 'node_modules/rxjs/bundles/rx.umd.js',
|
||||
to: 'https://code.angularjs.org/2.0.0-alpha.55/Rx.umd.js'
|
||||
},
|
||||
{
|
||||
pattern: 'script',
|
||||
from: 'node_modules/angular2/bundles/router.dev.js',
|
||||
to: 'https://code.angularjs.org/2.0.0-alpha.53/router.dev.js'
|
||||
to: 'https://code.angularjs.org/2.0.0-alpha.55/router.dev.js'
|
||||
},
|
||||
{
|
||||
pattern: 'script',
|
||||
from: 'node_modules/angular2/bundles/http.dev.js',
|
||||
to: 'https://code.angularjs.org/2.0.0-alpha.53/http.dev.js'
|
||||
to: 'https://code.angularjs.org/2.0.0-alpha.55/http.dev.js'
|
||||
},
|
||||
{
|
||||
pattern: 'script',
|
||||
from: 'node_modules/angular2/bundles/testing.js',
|
||||
to: 'https://code.angularjs.org/2.0.0-alpha.53/testing.js'
|
||||
from: 'node_modules/angular2/bundles/testing.dev.js',
|
||||
to: 'https://code.angularjs.org/2.0.0-alpha.55/testing.dev.js'
|
||||
},
|
||||
{
|
||||
pattern: 'link',
|
||||
|
||||
Reference in New Issue
Block a user