From c25314a2c474bb878205b351e847b81f6113f97f Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Thu, 15 Oct 2015 00:51:24 -0700 Subject: [PATCH] (docs) Move ToH-pt2 to Jade and break toh-pt1 out of the tutorial index --- .../docs/ts/latest/guide/template-syntax.jade | 7 + public/docs/ts/latest/tutorial/_data.json | 10 +- public/docs/ts/latest/tutorial/index.jade | 318 +------------ public/docs/ts/latest/tutorial/toh-pt1.jade | 314 +++++++++++++ public/docs/ts/latest/tutorial/toh-pt2.jade | 441 ++++++++++++++++++ .../images/devguide/toh/heroes-list-2.png | Bin 0 -> 53416 bytes .../devguide/toh/heroes-list-selected.png | Bin 0 -> 8313 bytes 7 files changed, 776 insertions(+), 314 deletions(-) create mode 100644 public/docs/ts/latest/guide/template-syntax.jade create mode 100644 public/docs/ts/latest/tutorial/toh-pt1.jade create mode 100644 public/docs/ts/latest/tutorial/toh-pt2.jade create mode 100644 public/resources/images/devguide/toh/heroes-list-2.png create mode 100644 public/resources/images/devguide/toh/heroes-list-selected.png diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade new file mode 100644 index 0000000000..1b9b8e3811 --- /dev/null +++ b/public/docs/ts/latest/guide/template-syntax.jade @@ -0,0 +1,7 @@ +include ../../../../_includes/_util-fns + +.l-main-section + :markdown + # Template Syntax + +

Coming Soon

\ No newline at end of file diff --git a/public/docs/ts/latest/tutorial/_data.json b/public/docs/ts/latest/tutorial/_data.json index 80a37282f7..a897a3cb68 100644 --- a/public/docs/ts/latest/tutorial/_data.json +++ b/public/docs/ts/latest/tutorial/_data.json @@ -2,7 +2,15 @@ "_listtype": "ordered", "index": { - "title": "Tutorial", + "title": "Tutorial: Tour of Heroes", "intro": "The Tour of Heroes tutorial takes us through the steps of creating an Angular application in TypeScript." + }, + "toh-pt1": { + "title": "The Hero Editor", + "intro": "We build a simple hero editor" + }, + "toh-pt2": { + "title": "Master/Detail", + "intro": "We build a master/detail page with a list of heroes " } } \ No newline at end of file diff --git a/public/docs/ts/latest/tutorial/index.jade b/public/docs/ts/latest/tutorial/index.jade index 24ae74ed2f..bfbb32ee64 100644 --- a/public/docs/ts/latest/tutorial/index.jade +++ b/public/docs/ts/latest/tutorial/index.jade @@ -1,11 +1,10 @@ include ../../../../_includes/_util-fns .l-main-section - :markdown - # Tour of Heroes + # Tour of Heroes: the vision - Our grand vision is to build an app to help a staffing agency manage its stable of heroes. + Our grand plan is to build an app to help a staffing agency manage its stable of heroes. Even heroes need to find work. Of course we'll only make a little progress in this tutorial. What we do build will @@ -28,7 +27,7 @@ include ../../../../_includes/_util-fns ## The End Game - Let's get a visual idea of where we're going in this tour, beginning with the "Heroes" + Here's a visual idea of where we're going in this tour, beginning with the "Heroes" view and its list of heroes: figure.image-display @@ -56,312 +55,5 @@ include ../../../../_includes/_util-fns met in countless applications. Everything has a reason. And we’ll meet many of the core fundamentals of Angular along the way. - -.l-main-section - - :markdown - # Once Upon a Time - - Every story starts somewhere. Our story starts where the [QuickStart](../quickstart) ends. - - Follow the "QuickStart" steps. They 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`. - We should have the following structure: - - code-example. - angular2-tour-of-heroes - ├── node_modules - ├── src - | ├── app - | | └── app.ts - | ├── index.html - | └── tsconfig.json - └── package.json - - :markdown - ## Keep the App Running - Start the TypeScript compiler and have it watch for changes in one terminal window by typing - - pre.prettyprint.lang-bash - code tsc -p src -w - - :markdown - Now open another terminal window and start the server by typing - - pre.prettyprint.lang-bash - code live-server --open=src - - :markdown - This command starts the server, launches the app in a browser, - and keeps the app running while we continue to build the Tour of Heroes. - - .alert.is-helpful - :markdown - These two steps watch all project files. They recompile TypeScript files and re-run - the app when any file changes. - If the watchers fail to detect renamed or new files, - stop these commands in each terminal by typing `CTRL+C` and then re-run them. - -.l-main-section - - :markdown - # Show our Hero - We want to display Hero data in our app - - Let's add two properties to our `AppComponent`, a `title` property for the application name and a `hero` property - for a hero named "Windstorm". - - ``` - class AppComponent { - public title = 'Tour of Heroes'; - public hero = 'Windstorm'; - } - ``` - - :markdown - Now we update the template in the `@Component` decoration with data bindings to these new properties. - - code-example(format="linenums"). - template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>' - :markdown - The browser should refresh and display our title and hero. - - The double curly braces tell our app to read the `title` and `hero` properties from the component and render them. - This is the "interpolation" form of one-way data binding; - we can learn more about interpolation in the [Displaying Data chapter](displaying-data). - - ## Hero Object - - At the moment, our hero is just a name. Our hero needs more properties. - Let's convert the `hero` from a literal string to a class. - - Create a `Hero` class with `id` and `name` properties. - Keep this near the top of hte `app.ts` file for now. - - ``` - class Hero { - id: number; - name: string; - } - ``` - - Now that we have a `Hero` class, let’s refactor our component’s `hero` property to be of type `Hero`. - Then initialize it with an id of `1` and the name, "Windstorm". - - ``` - public hero: Hero = { - id: 1, - name: 'Windstorm' - }; - ``` - - Because we changed the hero from a string to an object, - we update the binding in the template to refer to the hero’s `name` property. - - code-example(format="linenums"). - template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>' - :markdown - The browser refreshes and continues to display our hero’s name. - - ## **Adding more HTML** - Displaying a name is good, but we want to see all of our hero’s properties. - We’ll add a `
` for our hero’s `id` property and another `
` for our hero’s `name`. - - code-example(format="linenums"). - template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>' - :markdown - Uh oh, our template string is getting long. We better take care of that to avoid the risk of making a typo in the template. - - ### Multi-line Template Strings - - We could make a more readable template with string concatenation - but that gets ugly fast, it is harder to read, and - it is easy to make a spelling error. Instead, - let’s take advantage of the template strings feature - in ES2015 and TypeScript to maintain our sanity. - - Change the quotes around the template to back-ticks and - put the `

`, `

` and `
` elements on their own lines. - - code-example(format="linenums"). - template:` - <h1>{{title}}</h1> - <h2>{{hero.name}} details!</h2> - <div><label>id: </label>{{hero.id}}</div> - <div><label>name: </label>{{hero.name}}</div> - ` - - .callout.is-important - header A back-tick is not a single quote - :markdown - **Be careful!** A back-tick (`) looks a lot like a single quote ('). - It's actually a completely different character. - Back-ticks can do more than demarcate a string. - Here we use them in a limited way to spread the template over multiple lines. - Everything between the back-ticks at the beginning and end of the template - is part of a single template string. - -.l-main-section - - :markdown - # Editing Our Hero - - We want to be able to edit the hero name in a textbox. - - Replace the hero name `