(docs) quickstart: remove/rename getting-started artifacts throughout

This commit is contained in:
Ward Bell 2015-10-15 21:51:13 -07:00 committed by Naomi Black
parent f0bdd09ccb
commit a90e58d313
26 changed files with 70 additions and 68 deletions

View File

@ -1,27 +0,0 @@
/*global browser, element, by */
describe('Getting Started E2E Tests', function () {
// #docregion shared
var expectedMsg = 'My First Angular 2 App';
// tests shared across languages
function sharedTests(basePath) {
beforeEach(function () {
browser.get(basePath + 'index.html');
});
it('should display: ' + expectedMsg, function () {
expect(element(by.css('h1')).getText()).toEqual(expectedMsg);
});
}
// #enddocregion
describe('Getting Started in JavaScript', function () {
sharedTests('gettingstarted/js/');
});
describe('Getting Started in TypeScript', function () {
sharedTests('gettingstarted/ts/');
});
});

View File

@ -0,0 +1,12 @@
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
});

View File

@ -1,12 +1,27 @@
describe('Protractor quick start test', function() {
/*global browser, element, by */
describe('QuickStart E2E Tests', function () {
// #docregion shared
var expectedMsg = 'My First Angular 2 App';
// tests shared across languages
function sharedTests(basePath) {
beforeEach(function () {
browser.get('quickstart/index.html');
browser.get(basePath + 'index.html');
});
// #docregion test
it('should display Alice', function() {
expect(element(by.id('output')).getText()).toEqual('Hello Alice');
it('should display: ' + expectedMsg, function () {
expect(element(by.css('h1')).getText()).toEqual(expectedMsg);
});
}
// #enddocregion
describe('QuickStart in JavaScript', function () {
sharedTests('quickstart/js/');
});
describe('QuickStart in TypeScript', function () {
sharedTests('quickstart/ts/');
});
});

View File

@ -19,15 +19,16 @@ include ../../../_includes/_util-fns
1. Run it
.l-main-section
:markdown
## Create a project folder
**Create a new folder** to hold our application project, perhaps like this:
```
mkdir angular2-getting-started
cd angular2-getting-started
mkdir angular2-quickstart
cd angular2-quickstart
```
.l-main-section
:markdown
## Install essential libraries
We'll use the **npm package manager** to install packages for
@ -58,12 +59,12 @@ include ../../../_includes/_util-fns
file named `package.json`.
The essence of our `package.json` should look like this:
+makeJson('gettingstarted/js/package.json', { paths: 'name, version, dependencies, devDependencies'})
+makeJson('quickstart/js/package.json', { paths: 'name, version, dependencies, devDependencies'})
:markdown
There is also a `scripts` section. **Find and replace** it with the following:
+makeJson('gettingstarted/js/package.json', { paths: 'scripts'})
+makeJson('quickstart/js/package.json', { paths: 'scripts'})
:markdown
We've just extended our project world with a script command that we'll be running very soon.
@ -74,7 +75,7 @@ include ../../../_includes/_util-fns
Add a new file called *app.js* and paste the following lines:
+makeExample('gettingstarted/js/app.js', 'class-w-annotations')
+makeExample('quickstart/js/app.js', 'class-w-annotations')
:markdown
We're creating a visual component named **`AppComponent`** by chaining the
@ -111,7 +112,7 @@ include ../../../_includes/_util-fns
We need to do something to put our application in motion.
Add the following to the bottom of the `app.js` file:
+makeExample('gettingstarted/js/app.js', 'bootstrap')
+makeExample('quickstart/js/app.js', 'bootstrap')
:markdown
We'll wait for the browser to tell us that it has finished loading
@ -130,7 +131,7 @@ include ../../../_includes/_util-fns
wrapper.
Here is the entire file:
+makeExample('gettingstarted/js/app.js', 'dsl')
+makeExample('quickstart/js/app.js', 'dsl')
.l-main-section
:markdown
@ -138,7 +139,7 @@ include ../../../_includes/_util-fns
**Add a new `index.html`** file to the project folder and enter the following HTML
+makeExample('gettingstarted/js/index.html', null, 'index.html')(format="")
+makeExample('quickstart/js/index.html', null, 'index.html')(format="")
.l-sub-section
:markdown
Our app loads two script files in the `<head>` element:
@ -179,7 +180,7 @@ include ../../../_includes/_util-fns
In a few moments, a browser tab should open and display
figure.image-display
img(src='/resources/images/devguide/getting-started/my-first-app.png' alt="Output of getting started app")
img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of quickstart app")
:markdown
### Make some changes

View File

@ -10,9 +10,8 @@ include ../../../_includes/_util-fns
in JavaScript and Dart by selecting either of those languages from the combo-box in the banner.
.l-main-section
:markdown
# The shortest, quickest ...
## The shortest, quickest ...
Let's put something on the screen in Angular 2 as quickly as we can.
@ -29,15 +28,16 @@ include ../../../_includes/_util-fns
:markdown
**Create a new folder** to hold our application project, perhaps like this:
```
mkdir angular2-getting-started
cd angular2-getting-started
mkdir angular2-quickstart
cd angular2-quickstart
```
.l-main-section
:markdown
## Our first Angular component
**Add a new file** called **`app.ts`** and paste the following lines:
+makeExample('gettingstarted/ts/src/app/app.ts', null, 'app.ts')
+makeExample('quickstart/ts/src/app/app.ts', null, 'app.ts')
:markdown
We've just defined an Angular 2 **component**,
@ -80,13 +80,15 @@ include ../../../_includes/_util-fns
We no longer expect to find our code or any library code in a global namespace.
We `import` exactly what we need, as we need it, from named file and library resources.
.l-main-section
:markdown
## Add `index.html`
**Create** an `index.html` file.
**Paste** the following lines into it ... and we'll discuss them:
+makeExample('gettingstarted/ts/src/index.1.html', null, 'index.html')
+makeExample('quickstart/ts/src/index.1.html', null, 'index.html')
:markdown
We see three noteworthy sections of HTML:
@ -107,6 +109,8 @@ include ../../../_includes/_util-fns
That's the custom HTML element we identified in the `@Component` decoration
adorning our `AppComponent` class.
.l-main-section
:markdown
## Run it!
We need a static file server to serve our application to the browser.
@ -135,13 +139,12 @@ include ../../../_includes/_util-fns
In a few moments, a browser tab should open and display
figure.image-display
img(src='/resources/images/devguide/getting-started/my-first-app.png' alt="Output of getting started app")
img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of quickstart app")
:markdown
Congratulations! We are in business.
.l-main-section
:markdown
## What's wrong with this?
@ -169,9 +172,8 @@ include ../../../_includes/_util-fns
We have tools and procedures for that.
.l-main-section
:markdown
# Upping our game
## Upping our game
Let's take a few more steps to put our development on a better foundation. We will
1. Revise the application project structure for future growth
@ -185,7 +187,7 @@ include ../../../_includes/_util-fns
:markdown
## Revise the application project structure
At the moment we're dumping everything into the "angular2-getting-started" **root folder**.
At the moment we're dumping everything into the "angular2-quickstart" **root folder**.
Not bad when there are only two files. Not good as our application evolves.
Let's give our project a little structure.
@ -211,7 +213,7 @@ include ../../../_includes/_util-fns
Our project folders should look like this.
```
angular2-getting-started
angular2-quickstart
└── src
├── app
│ └── app.ts
@ -219,7 +221,6 @@ include ../../../_includes/_util-fns
```
.l-main-section
:markdown
## Install npm packages locally
@ -253,12 +254,12 @@ include ../../../_includes/_util-fns
help us develop and maintain our application in future.
The essence of our `package.json` should look like this:
+makeJson('gettingstarted/ts/package.json', { paths: 'name, version, dependencies, devDependencies'})
+makeJson('quickstart/ts/package.json', { paths: 'name, version, dependencies, devDependencies'})
:markdown
There is also a `scripts` section. **Find and replace** it with the following:
+makeJson('gettingstarted/ts/package.json', { paths: 'scripts'})
+makeJson('quickstart/ts/package.json', { paths: 'scripts'})
:markdown
We've just extended our project world with script commands
@ -271,12 +272,12 @@ include ../../../_includes/_util-fns
**Replace** the library scripts section with references to
scripts in the packages we just installed.
+makeExample('gettingstarted/ts/src/index.html', 'libraries')
+makeExample('quickstart/ts/src/index.html', 'libraries')
:markdown
**Update** the `System` configuration script as follows.
+makeExample('gettingstarted/ts/src/index.html', 'systemjs')
+makeExample('quickstart/ts/src/index.html', 'systemjs')
.l-sub-section
:markdown
@ -300,7 +301,7 @@ include ../../../_includes/_util-fns
:markdown
Here's the final version
+makeExample('gettingstarted/ts/src/index.html', null, 'index.html')
+makeExample('quickstart/ts/src/index.html', null, 'index.html')
.l-main-section
:markdown
@ -313,7 +314,7 @@ include ../../../_includes/_util-fns
to simplify the TypeScript compilation command that we'll run very soon.
**Change to the `src` folder and create a `tsconfig.json`** file with the following content:
+makeJson('gettingstarted/ts/src/tsconfig.json', null, 'tsconfig.json')
+makeJson('quickstart/ts/src/tsconfig.json', null, 'tsconfig.json')
.alert.is-helpful
:markdown
@ -325,7 +326,7 @@ include ../../../_includes/_util-fns
## Final structure
Our final project folder structure should look like this:
```
angular2-getting-started
angular2-quickstart
├── node_modules
├── src
│ ├── app
@ -377,7 +378,7 @@ include ../../../_includes/_util-fns
and displays our application message once more:
figure.image-display
img(src='/resources/images/devguide/getting-started/my-first-app.png' alt="Output of getting started app")
img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of quickstart app")
:markdown
### Make some changes

View File

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB