(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 */
beforeEach(function() { describe('QuickStart E2E Tests', function () {
browser.get('quickstart/index.html');
});
// #docregion test // #docregion shared
it('should display Alice', function() { var expectedMsg = 'My First Angular 2 App';
expect(element(by.id('output')).getText()).toEqual('Hello Alice');
}); // 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 // #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 1. Run it
.l-main-section .l-main-section
:markdown :markdown
## Create a project folder ## Create a project folder
**Create a new folder** to hold our application project, perhaps like this: **Create a new folder** to hold our application project, perhaps like this:
``` ```
mkdir angular2-getting-started mkdir angular2-quickstart
cd angular2-getting-started cd angular2-quickstart
``` ```
.l-main-section
:markdown
## Install essential libraries ## Install essential libraries
We'll use the **npm package manager** to install packages for We'll use the **npm package manager** to install packages for
@ -58,12 +59,12 @@ include ../../../_includes/_util-fns
file named `package.json`. file named `package.json`.
The essence of our `package.json` should look like this: 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 :markdown
There is also a `scripts` section. **Find and replace** it with the following: 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 :markdown
We've just extended our project world with a script command that we'll be running very soon. 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: 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 :markdown
We're creating a visual component named **`AppComponent`** by chaining the 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. We need to do something to put our application in motion.
Add the following to the bottom of the `app.js` file: Add the following to the bottom of the `app.js` file:
+makeExample('gettingstarted/js/app.js', 'bootstrap') +makeExample('quickstart/js/app.js', 'bootstrap')
:markdown :markdown
We'll wait for the browser to tell us that it has finished loading We'll wait for the browser to tell us that it has finished loading
@ -130,7 +131,7 @@ include ../../../_includes/_util-fns
wrapper. wrapper.
Here is the entire file: Here is the entire file:
+makeExample('gettingstarted/js/app.js', 'dsl') +makeExample('quickstart/js/app.js', 'dsl')
.l-main-section .l-main-section
:markdown :markdown
@ -138,7 +139,7 @@ include ../../../_includes/_util-fns
**Add a new `index.html`** file to the project folder and enter the following HTML **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 .l-sub-section
:markdown :markdown
Our app loads two script files in the `<head>` element: 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 In a few moments, a browser tab should open and display
figure.image-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 :markdown
### Make some changes ### 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. in JavaScript and Dart by selecting either of those languages from the combo-box in the banner.
.l-main-section .l-main-section
:markdown :markdown
# The shortest, quickest ... ## The shortest, quickest ...
Let's put something on the screen in Angular 2 as quickly as we can. Let's put something on the screen in Angular 2 as quickly as we can.
@ -29,15 +28,16 @@ include ../../../_includes/_util-fns
:markdown :markdown
**Create a new folder** to hold our application project, perhaps like this: **Create a new folder** to hold our application project, perhaps like this:
``` ```
mkdir angular2-getting-started mkdir angular2-quickstart
cd angular2-getting-started cd angular2-quickstart
``` ```
.l-main-section
:markdown
## Our first Angular component ## Our first Angular component
**Add a new file** called **`app.ts`** and paste the following lines: **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 :markdown
We've just defined an Angular 2 **component**, 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 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. We `import` exactly what we need, as we need it, from named file and library resources.
.l-main-section
:markdown
## Add `index.html` ## Add `index.html`
**Create** an `index.html` file. **Create** an `index.html` file.
**Paste** the following lines into it ... and we'll discuss them: **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 :markdown
We see three noteworthy sections of HTML: 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 That's the custom HTML element we identified in the `@Component` decoration
adorning our `AppComponent` class. adorning our `AppComponent` class.
.l-main-section
:markdown
## Run it! ## Run it!
We need a static file server to serve our application to the browser. 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 In a few moments, a browser tab should open and display
figure.image-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 :markdown
Congratulations! We are in business. Congratulations! We are in business.
.l-main-section .l-main-section
:markdown :markdown
## What's wrong with this? ## What's wrong with this?
@ -169,9 +172,8 @@ include ../../../_includes/_util-fns
We have tools and procedures for that. We have tools and procedures for that.
.l-main-section .l-main-section
:markdown :markdown
# Upping our game ## Upping our game
Let's take a few more steps to put our development on a better foundation. We will 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 1. Revise the application project structure for future growth
@ -185,7 +187,7 @@ include ../../../_includes/_util-fns
:markdown :markdown
## Revise the application project structure ## 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. Not bad when there are only two files. Not good as our application evolves.
Let's give our project a little structure. Let's give our project a little structure.
@ -211,7 +213,7 @@ include ../../../_includes/_util-fns
Our project folders should look like this. Our project folders should look like this.
``` ```
angular2-getting-started angular2-quickstart
└── src └── src
├── app ├── app
│ └── app.ts │ └── app.ts
@ -219,7 +221,6 @@ include ../../../_includes/_util-fns
``` ```
.l-main-section .l-main-section
:markdown :markdown
## Install npm packages locally ## Install npm packages locally
@ -253,12 +254,12 @@ include ../../../_includes/_util-fns
help us develop and maintain our application in future. help us develop and maintain our application in future.
The essence of our `package.json` should look like this: 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 :markdown
There is also a `scripts` section. **Find and replace** it with the following: 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 :markdown
We've just extended our project world with script commands 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 **Replace** the library scripts section with references to
scripts in the packages we just installed. scripts in the packages we just installed.
+makeExample('gettingstarted/ts/src/index.html', 'libraries') +makeExample('quickstart/ts/src/index.html', 'libraries')
:markdown :markdown
**Update** the `System` configuration script as follows. **Update** the `System` configuration script as follows.
+makeExample('gettingstarted/ts/src/index.html', 'systemjs') +makeExample('quickstart/ts/src/index.html', 'systemjs')
.l-sub-section .l-sub-section
:markdown :markdown
@ -300,7 +301,7 @@ include ../../../_includes/_util-fns
:markdown :markdown
Here's the final version 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 .l-main-section
:markdown :markdown
@ -313,7 +314,7 @@ include ../../../_includes/_util-fns
to simplify the TypeScript compilation command that we'll run very soon. 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: **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 .alert.is-helpful
:markdown :markdown
@ -325,7 +326,7 @@ include ../../../_includes/_util-fns
## Final structure ## Final structure
Our final project folder structure should look like this: Our final project folder structure should look like this:
``` ```
angular2-getting-started angular2-quickstart
├── node_modules ├── node_modules
├── src ├── src
│ ├── app │ ├── app
@ -377,7 +378,7 @@ include ../../../_includes/_util-fns
and displays our application message once more: and displays our application message once more:
figure.image-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 :markdown
### Make some changes ### Make some changes

View File

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB