diff --git a/public/docs/_examples/quickstart/ts/styles.1.css b/public/docs/_examples/quickstart/ts/styles.1.css new file mode 100644 index 0000000000..c1bd2cfec6 --- /dev/null +++ b/public/docs/_examples/quickstart/ts/styles.1.css @@ -0,0 +1,25 @@ +/* #docregion */ +/* Master Styles */ +h1 { + color: #369; + font-family: Arial, Helvetica, sans-serif; + font-size: 250%; +} +h2, h3 { + color: #444; + font-family: Arial, Helvetica, sans-serif; + font-weight: lighter; +} +body { + margin: 2em; +} +body, input[text], button { + color: #888; + font-family: Cambria, Georgia; +} + +/* + * See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css + * for the full set of master styles used by the documentation samples + */ + \ No newline at end of file diff --git a/public/docs/ts/latest/_quickstart_repo.jade b/public/docs/ts/latest/_quickstart_repo.jade new file mode 100644 index 0000000000..d6182be501 --- /dev/null +++ b/public/docs/ts/latest/_quickstart_repo.jade @@ -0,0 +1,4 @@ +.l-sub-section + :marked + Alternatively, begin with a + [download of the QuickStart source](https://github.com/IdeaBlade/angular2-quickstart/blob/master/README.md). \ No newline at end of file diff --git a/public/docs/ts/latest/guide/attribute-directives.jade b/public/docs/ts/latest/guide/attribute-directives.jade index b8531aba82..b9bc22fcf9 100644 --- a/public/docs/ts/latest/guide/attribute-directives.jade +++ b/public/docs/ts/latest/guide/attribute-directives.jade @@ -57,8 +57,9 @@ include ../_util-fns :marked ### Our first draft Create a new project folder (`attribute-directives`) and follow the steps in the [QuickStart](../quickstart.html). - As an alternative, you can clone the QuickStart from this [repository](https://github.com/IdeaBlade/angular2-quickstart). - + +include ../_quickstart_repo +:marked Add a new file to the `app` folder called `highlight.directive.ts` and add the following code: +makeExample('attribute-directives/ts/app/highlight.directive.1.ts', null, 'app/highlight.directive.ts') diff --git a/public/docs/ts/latest/guide/displaying-data.jade b/public/docs/ts/latest/guide/displaying-data.jade index c140e526c9..ccfeab8483 100644 --- a/public/docs/ts/latest/guide/displaying-data.jade +++ b/public/docs/ts/latest/guide/displaying-data.jade @@ -31,6 +31,8 @@ figure.image-display Create a new project folder (`displaying-data`) and follow the steps in the [QuickStart](../quickstart.html). As an alternative, you can clone the QuickStart from this [repository](https://github.com/IdeaBlade/angular2-quickstart). +include ../_quickstart_repo +:marked Then modify the `app.component.ts` file by changing the template and the body of the component. When we're done, it should look like this: diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade index e673c55f78..08ae389397 100644 --- a/public/docs/ts/latest/guide/forms.jade +++ b/public/docs/ts/latest/guide/forms.jade @@ -87,6 +87,8 @@ figure.image-display Create a new project folder (`angular2-forms`) and follow the steps in the [QuickStart](../quickstart.html). As an alternative, you can clone the QuickStart from this [repository](https://github.com/IdeaBlade/angular2-quickstart). +include ../_quickstart_repo +:marked ## Create the Hero Model Class As users enter form data, we capture their changes and update an instance of a model. diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade index be92abffe5..b0603b1680 100644 --- a/public/docs/ts/latest/quickstart.jade +++ b/public/docs/ts/latest/quickstart.jade @@ -3,7 +3,12 @@ include _util-fns :marked Our QuickStart goal is to build and run a super-simple Angular 2 application in TypeScript. - ## See It Run! + # Download the code + In a hurray? + [Download the QuickStart source](https://github.com/IdeaBlade/angular2-quickstart/blob/master/README.md) + and start coding. + + # See it run Try this live example which loads the sample app in plunker @@ -11,7 +16,9 @@ include _util-fns figure.image-display img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of QuickStart app") + :marked + # Learn Of course we don't build apps to run in plunker. The following steps establish a development environment for the documentation samples that also can be the foundation for our real world applications. At a high level, we will @@ -422,6 +429,15 @@ code-example(format=""). metadata, finds the `my-app` selector, locates an element tag named `my-app`, and loads our application between those tags. +.l-main-section +:marked + ## Add some style + Styles aren't essential but they're nice and the `index.html` assumes we have + a stylesheet called `styles.css`. + + Create a `styles.css` in the root folder and start styling, perhaps with this set: ++makeExample('quickstart/ts/styles.1.css', null, 'styles.css (excerpt)')(format=".") + .l-main-section :marked ## Compile and run! @@ -470,6 +486,7 @@ figure.image-display .file typings ... .file index.html .file package.json + .file styles.css .file tsconfig.json .file typings.json :marked @@ -480,9 +497,15 @@ figure.image-display quickstart/ts/index.html, quickstart/ts/package.1.json, quickstart/ts/tsconfig.1.json, - quickstart/ts/typings.1.json + quickstart/ts/typings.1.json, + quickstart/ts/styles.1.css `,null, - `app/app.component.ts, app/main.ts, index.html,package.json, tsconfig.json, typings.json`) + `app/app.component.ts, + app/main.ts, + index.html,package.json, + tsconfig.json, + typings.json, + styles.css`) :marked .l-main-section diff --git a/public/docs/ts/latest/tutorial/toh-pt1.jade b/public/docs/ts/latest/tutorial/toh-pt1.jade index d62ab19c00..0cc7b6271c 100644 --- a/public/docs/ts/latest/tutorial/toh-pt1.jade +++ b/public/docs/ts/latest/tutorial/toh-pt1.jade @@ -7,12 +7,12 @@ include ../_util-fns [Run the live example for part 1](/resources/live-examples/toh-1/ts/plnkr.html) - Follow the "QuickStart" steps. They provide the prerequisites, the folder structure, - and the core files for our Tour of Heroes. + Create a folder called `angular2-tour-of-heroes` and follow the [QuickStart](../quickstart.html) steps + which provide the prerequisites, the folder structure, and the core files for our Tour of Heroes. - Copy the "QuickStart" code to a new folder and rename the folder `angular2-tour-of-heroes`. - - You can also "QuickStart" from this [repository](https://github.com/IdeaBlade/angular2-quickstart). We should have the following structure: +include ../_quickstart_repo +:marked + We should have the following structure: .filetree .file angular2-tour-of-heroes @@ -25,6 +25,7 @@ include ../_util-fns .file typings ... .file index.html .file package.json + .file styles.css .file tsconfig.json .file typings.json :marked diff --git a/public/resources/images/devguide/quickstart/my-first-app.png b/public/resources/images/devguide/quickstart/my-first-app.png index c67857149f..77a660ad77 100644 Binary files a/public/resources/images/devguide/quickstart/my-first-app.png and b/public/resources/images/devguide/quickstart/my-first-app.png differ