From a90e58d31301bdac4cbd8630375d269f6c55bbd2 Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Thu, 15 Oct 2015 21:51:13 -0700 Subject: [PATCH] (docs) quickstart: remove/rename getting-started artifacts throughout --- .../docs/_examples/gettingstarted/e2e-spec.js | 27 ----------- .../ts => quickstart-old}/.gitignore | 0 .../docs/_examples/quickstart-old/e2e-spec.js | 12 +++++ .../{quickstart => quickstart-old}/index.html | 0 .../package.json | 0 .../src/app.spec.ts | 0 .../{quickstart => quickstart-old}/src/app.ts | 0 .../src/dummy.spec.ts | 0 .../src/tsconfig.json | 0 .../src/tsd.json | 0 .../unit-tests.html | 0 public/docs/_examples/quickstart/e2e-spec.js | 33 +++++++++---- .../{gettingstarted => quickstart}/js/app.js | 0 .../js/index.html | 0 .../js/package.json | 0 .../{gettingstarted => quickstart}/js/spec.js | 0 .../_examples/quickstart/{ => ts}/.gitignore | 0 .../ts/package.json | 0 .../ts/src/app.ts | 0 .../ts/src/app/app.ts | 0 .../ts/src/index.1.html | 0 .../ts/src/index.html | 0 .../ts/src/tsconfig.json | 0 public/docs/js/latest/quickstart.jade | 21 ++++---- public/docs/ts/latest/quickstart.jade | 45 +++++++++--------- .../my-first-app.png | Bin 26 files changed, 70 insertions(+), 68 deletions(-) delete mode 100644 public/docs/_examples/gettingstarted/e2e-spec.js rename public/docs/_examples/{gettingstarted/ts => quickstart-old}/.gitignore (100%) create mode 100644 public/docs/_examples/quickstart-old/e2e-spec.js rename public/docs/_examples/{quickstart => quickstart-old}/index.html (100%) rename public/docs/_examples/{quickstart => quickstart-old}/package.json (100%) rename public/docs/_examples/{quickstart => quickstart-old}/src/app.spec.ts (100%) rename public/docs/_examples/{quickstart => quickstart-old}/src/app.ts (100%) rename public/docs/_examples/{quickstart => quickstart-old}/src/dummy.spec.ts (100%) rename public/docs/_examples/{quickstart => quickstart-old}/src/tsconfig.json (100%) rename public/docs/_examples/{quickstart => quickstart-old}/src/tsd.json (100%) rename public/docs/_examples/{quickstart => quickstart-old}/unit-tests.html (100%) rename public/docs/_examples/{gettingstarted => quickstart}/js/app.js (100%) rename public/docs/_examples/{gettingstarted => quickstart}/js/index.html (100%) rename public/docs/_examples/{gettingstarted => quickstart}/js/package.json (100%) rename public/docs/_examples/{gettingstarted => quickstart}/js/spec.js (100%) rename public/docs/_examples/quickstart/{ => ts}/.gitignore (100%) rename public/docs/_examples/{gettingstarted => quickstart}/ts/package.json (100%) rename public/docs/_examples/{gettingstarted => quickstart}/ts/src/app.ts (100%) rename public/docs/_examples/{gettingstarted => quickstart}/ts/src/app/app.ts (100%) rename public/docs/_examples/{gettingstarted => quickstart}/ts/src/index.1.html (100%) rename public/docs/_examples/{gettingstarted => quickstart}/ts/src/index.html (100%) rename public/docs/_examples/{gettingstarted => quickstart}/ts/src/tsconfig.json (100%) rename public/resources/images/devguide/{getting-started => quickstart}/my-first-app.png (100%) diff --git a/public/docs/_examples/gettingstarted/e2e-spec.js b/public/docs/_examples/gettingstarted/e2e-spec.js deleted file mode 100644 index e479cea085..0000000000 --- a/public/docs/_examples/gettingstarted/e2e-spec.js +++ /dev/null @@ -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/'); - }); - -}); diff --git a/public/docs/_examples/gettingstarted/ts/.gitignore b/public/docs/_examples/quickstart-old/.gitignore similarity index 100% rename from public/docs/_examples/gettingstarted/ts/.gitignore rename to public/docs/_examples/quickstart-old/.gitignore diff --git a/public/docs/_examples/quickstart-old/e2e-spec.js b/public/docs/_examples/quickstart-old/e2e-spec.js new file mode 100644 index 0000000000..a866771ab6 --- /dev/null +++ b/public/docs/_examples/quickstart-old/e2e-spec.js @@ -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 +}); + diff --git a/public/docs/_examples/quickstart/index.html b/public/docs/_examples/quickstart-old/index.html similarity index 100% rename from public/docs/_examples/quickstart/index.html rename to public/docs/_examples/quickstart-old/index.html diff --git a/public/docs/_examples/quickstart/package.json b/public/docs/_examples/quickstart-old/package.json similarity index 100% rename from public/docs/_examples/quickstart/package.json rename to public/docs/_examples/quickstart-old/package.json diff --git a/public/docs/_examples/quickstart/src/app.spec.ts b/public/docs/_examples/quickstart-old/src/app.spec.ts similarity index 100% rename from public/docs/_examples/quickstart/src/app.spec.ts rename to public/docs/_examples/quickstart-old/src/app.spec.ts diff --git a/public/docs/_examples/quickstart/src/app.ts b/public/docs/_examples/quickstart-old/src/app.ts similarity index 100% rename from public/docs/_examples/quickstart/src/app.ts rename to public/docs/_examples/quickstart-old/src/app.ts diff --git a/public/docs/_examples/quickstart/src/dummy.spec.ts b/public/docs/_examples/quickstart-old/src/dummy.spec.ts similarity index 100% rename from public/docs/_examples/quickstart/src/dummy.spec.ts rename to public/docs/_examples/quickstart-old/src/dummy.spec.ts diff --git a/public/docs/_examples/quickstart/src/tsconfig.json b/public/docs/_examples/quickstart-old/src/tsconfig.json similarity index 100% rename from public/docs/_examples/quickstart/src/tsconfig.json rename to public/docs/_examples/quickstart-old/src/tsconfig.json diff --git a/public/docs/_examples/quickstart/src/tsd.json b/public/docs/_examples/quickstart-old/src/tsd.json similarity index 100% rename from public/docs/_examples/quickstart/src/tsd.json rename to public/docs/_examples/quickstart-old/src/tsd.json diff --git a/public/docs/_examples/quickstart/unit-tests.html b/public/docs/_examples/quickstart-old/unit-tests.html similarity index 100% rename from public/docs/_examples/quickstart/unit-tests.html rename to public/docs/_examples/quickstart-old/unit-tests.html diff --git a/public/docs/_examples/quickstart/e2e-spec.js b/public/docs/_examples/quickstart/e2e-spec.js index a866771ab6..c113291c91 100644 --- a/public/docs/_examples/quickstart/e2e-spec.js +++ b/public/docs/_examples/quickstart/e2e-spec.js @@ -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 test - it('should display Alice', function() { - expect(element(by.id('output')).getText()).toEqual('Hello Alice'); - }); + // #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('QuickStart in JavaScript', function () { + sharedTests('quickstart/js/'); + }); + + describe('QuickStart in TypeScript', function () { + sharedTests('quickstart/ts/'); + }); + +}); diff --git a/public/docs/_examples/gettingstarted/js/app.js b/public/docs/_examples/quickstart/js/app.js similarity index 100% rename from public/docs/_examples/gettingstarted/js/app.js rename to public/docs/_examples/quickstart/js/app.js diff --git a/public/docs/_examples/gettingstarted/js/index.html b/public/docs/_examples/quickstart/js/index.html similarity index 100% rename from public/docs/_examples/gettingstarted/js/index.html rename to public/docs/_examples/quickstart/js/index.html diff --git a/public/docs/_examples/gettingstarted/js/package.json b/public/docs/_examples/quickstart/js/package.json similarity index 100% rename from public/docs/_examples/gettingstarted/js/package.json rename to public/docs/_examples/quickstart/js/package.json diff --git a/public/docs/_examples/gettingstarted/js/spec.js b/public/docs/_examples/quickstart/js/spec.js similarity index 100% rename from public/docs/_examples/gettingstarted/js/spec.js rename to public/docs/_examples/quickstart/js/spec.js diff --git a/public/docs/_examples/quickstart/.gitignore b/public/docs/_examples/quickstart/ts/.gitignore similarity index 100% rename from public/docs/_examples/quickstart/.gitignore rename to public/docs/_examples/quickstart/ts/.gitignore diff --git a/public/docs/_examples/gettingstarted/ts/package.json b/public/docs/_examples/quickstart/ts/package.json similarity index 100% rename from public/docs/_examples/gettingstarted/ts/package.json rename to public/docs/_examples/quickstart/ts/package.json diff --git a/public/docs/_examples/gettingstarted/ts/src/app.ts b/public/docs/_examples/quickstart/ts/src/app.ts similarity index 100% rename from public/docs/_examples/gettingstarted/ts/src/app.ts rename to public/docs/_examples/quickstart/ts/src/app.ts diff --git a/public/docs/_examples/gettingstarted/ts/src/app/app.ts b/public/docs/_examples/quickstart/ts/src/app/app.ts similarity index 100% rename from public/docs/_examples/gettingstarted/ts/src/app/app.ts rename to public/docs/_examples/quickstart/ts/src/app/app.ts diff --git a/public/docs/_examples/gettingstarted/ts/src/index.1.html b/public/docs/_examples/quickstart/ts/src/index.1.html similarity index 100% rename from public/docs/_examples/gettingstarted/ts/src/index.1.html rename to public/docs/_examples/quickstart/ts/src/index.1.html diff --git a/public/docs/_examples/gettingstarted/ts/src/index.html b/public/docs/_examples/quickstart/ts/src/index.html similarity index 100% rename from public/docs/_examples/gettingstarted/ts/src/index.html rename to public/docs/_examples/quickstart/ts/src/index.html diff --git a/public/docs/_examples/gettingstarted/ts/src/tsconfig.json b/public/docs/_examples/quickstart/ts/src/tsconfig.json similarity index 100% rename from public/docs/_examples/gettingstarted/ts/src/tsconfig.json rename to public/docs/_examples/quickstart/ts/src/tsconfig.json diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index 89b3eb4525..6a47feee1c 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/public/docs/js/latest/quickstart.jade @@ -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 `` 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 diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade index 57b8b353ce..167fc1d677 100644 --- a/public/docs/ts/latest/quickstart.jade +++ b/public/docs/ts/latest/quickstart.jade @@ -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 diff --git a/public/resources/images/devguide/getting-started/my-first-app.png b/public/resources/images/devguide/quickstart/my-first-app.png similarity index 100% rename from public/resources/images/devguide/getting-started/my-first-app.png rename to public/resources/images/devguide/quickstart/my-first-app.png