From 81209a1d0b922a3fad0c3e22db9d86299d6ea751 Mon Sep 17 00:00:00 2001 From: Foxandxss Date: Tue, 3 May 2016 17:43:03 +0200 Subject: [PATCH] docs(quickstart): update to new world --- .../quickstart/ts/systemjs.config.1.js | 7 +--- public/docs/ts/latest/quickstart.jade | 37 +++++++++++-------- 2 files changed, 23 insertions(+), 21 deletions(-) diff --git a/public/docs/_examples/quickstart/ts/systemjs.config.1.js b/public/docs/_examples/quickstart/ts/systemjs.config.1.js index e7230083fb..94d139e8c2 100644 --- a/public/docs/_examples/quickstart/ts/systemjs.config.1.js +++ b/public/docs/_examples/quickstart/ts/systemjs.config.1.js @@ -1,10 +1,4 @@ // #docregion -/** - * System configuration for Angular 2 samples - * Adjust as necessary for your application needs. - * Override at the last minute with global.filterSystemConfig (as plunkers do) - */ -// #docregion (function(global) { // map tells the System loader where to look for things @@ -30,6 +24,7 @@ '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', + '@angular/router-deprecated', '@angular/testing', '@angular/upgrade', ]; diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade index 5ec5c81ed6..400b1d0d11 100644 --- a/public/docs/ts/latest/quickstart.jade +++ b/public/docs/ts/latest/quickstart.jade @@ -57,6 +57,7 @@ a(id="devenv") * add a [tsconfig.json](#tsconfig) to guide the TypeScript compiler * add a [typings.json](#typings) that identifies missing TypeScript definition files * add a [package.json](#package-json) that defines the packages and scripts we need + * add a [systemjs.config.js](#systemjs) that configures system.js * install the npm packages and typings files a(id="install-npm") @@ -318,12 +319,13 @@ code-example(format=""). +makeExample('quickstart/ts/index.html', null, 'index.html')(format=".") .l-verbose-section :marked - There are three noteworthy sections of HTML + There are four noteworthy sections of HTML 1. The JavaScript [libraries](#libraries) - 2. Configuration of [SystemJS](#systemjs) where we also import and run the - `main` file that we just wrote. //TODO reword this a bit + 2. Configuration file for [SystemJS](#systemjs). + + 3. Where we import and run the `main` file that we just wrote. 3. The [<my-app>](#my-app) tag in the `` which is *where our app lives!* @@ -333,21 +335,11 @@ code-example(format=""). We loaded the following scripts +makeExample('quickstart/ts/index.html', 'libraries', 'index.html')(format=".") :marked - We began with Internet Explorer polyfills. - IE requires polyfills to run - an application that relies on ES2015 promises and dynamic module loading. - Most applications need those capabilities and most applications - should run in Internet Explorer. //TODO es6-shim are not IE polyfills or they are? + We began with es6-shim which monkey patches the global context (window) with essential features of ES2015 (ES6). Next are the polyfills for Angular2, `zone.js` and `reflect-metadata`. Then the [SystemJS](#systemjs) library for module loading. - .l-sub-section - :marked - Our QuickStart doesn't use the Reactive Extensions - but any substantial application will want them - when working with observables. - We added the library here in QuickStart so we don't forget later.//TODO this subsection needs to be moved for when we cover the systemjs.config.js :marked We'll make different choices as we gain experience and become more concerned about production qualities such as @@ -374,12 +366,27 @@ code-example(format=""). With those cautions in mind, what are we doing in this QuickStart configuration? +makeExample('quickstart/ts/systemjs.config.1.js', null, 'systemjs.config.js')(format=".") :marked + First, we create a map to tell SystemJS where to look when we import some module. + + Then, we give all our packages to SystemJS. That means all the project dependencies and our application package, `app`. + + .l-sub-section + :marked + Our QuickStart doesn't use the Reactive Extensions + but any substantial application will want them + when working with observables. + We added the library here in QuickStart so we don't forget later. + + :marked + The `app` package tells SystemJS what to do when it sees a request for a + module from the `app/` folder. + Our QuickStart makes such requests when one of its application TypeScript files has an import statement like this: +makeExample('quickstart/ts/app/main.ts', 'app-component', 'main.ts (excerpt)')(format=".") :marked Notice that the module name (after `from`) does not mention a filename extension. - The `packages:` configuration tells SystemJS to default the extension to 'js', a JavaScript file. + In the configuration we tell SystemJS to default the extension to 'js', a JavaScript file. That makes sense because we transpile TypeScript to JavaScript before running the application.