(docs) quickstart: remove/rename getting-started artifacts throughout
This commit is contained in:
parent
f0bdd09ccb
commit
a90e58d313
|
@ -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/');
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
|
@ -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
|
||||||
|
});
|
||||||
|
|
|
@ -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 () {
|
beforeEach(function () {
|
||||||
browser.get('quickstart/index.html');
|
browser.get(basePath + 'index.html');
|
||||||
});
|
});
|
||||||
|
|
||||||
// #docregion test
|
it('should display: ' + expectedMsg, function () {
|
||||||
it('should display Alice', function() {
|
expect(element(by.css('h1')).getText()).toEqual(expectedMsg);
|
||||||
expect(element(by.id('output')).getText()).toEqual('Hello Alice');
|
|
||||||
});
|
});
|
||||||
|
}
|
||||||
// #enddocregion
|
// #enddocregion
|
||||||
|
|
||||||
|
describe('QuickStart in JavaScript', function () {
|
||||||
|
sharedTests('quickstart/js/');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('QuickStart in TypeScript', function () {
|
||||||
|
sharedTests('quickstart/ts/');
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.4 KiB |
Loading…
Reference in New Issue