(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() {
|
||||
beforeEach(function() {
|
||||
browser.get('quickstart/index.html');
|
||||
/*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(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/');
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.4 KiB |
Loading…
Reference in New Issue