honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(aio): revert file-trees back to original structure 

This is an auto-migration from angular.io
This commit is contained in:
Peter Bacon Darwin 2017-04-11 21:44:52 +01:00 committed by Igor Minar
parent 69b37fff26
commit 28c2a71cfc
13 changed files with 1128 additions and 800 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
aio/content/guide/cli-quickstart.md
View File

@ -197,89 +197,105 @@ All Angular components, templates, styles, images, and anything else your app ne
Any files outside of this folder are meant to support building your app.
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
src
<aio-folder>
</div>
<div class='children'>
<div class='file'>
app
<aio-file>
</div>
<div class='children'>
<div class='file'>
app.component.css
</aio-file>
</div>
<aio-file>
<div class='file'>
app.component.html
</aio-file>
</div>
<aio-file>
<div class='file'>
app.component.spec.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app.module.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-folder>
<div class='file'>
assets
<aio-file>
</div>
<div class='children'>
<div class='file'>
.gitkeep
</aio-file>
</div>
</aio-folder>
</div>
<aio-folder>
<div class='file'>
environments
<aio-file>
</div>
<div class='children'>
<div class='file'>
environment.prod.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
environment.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
favicon.ico
</aio-file>
</div>
<aio-file>
<div class='file'>
index.html
</aio-file>
</div>
<aio-file>
<div class='file'>
main.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
polyfills.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
styles.css
</aio-file>
</div>
<aio-file>
<div class='file'>
test.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
tsconfig.app.json
</aio-file>
</div>
<aio-file>
<div class='file'>
tsconfig.spec.json
</aio-file>
</div>
</aio-folder>
</div>
</aio-filetree>
</div>
@ -505,73 +521,81 @@ Other files help you build, test, maintain, document, and deploy the app.
These files go in the root folder next to `src/`.
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
my-app
<aio-folder>
</div>
<div class='children'>
<div class='file'>
e2e
<aio-file>
</div>
<div class='children'>
<div class='file'>
app.e2e-spec.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app.po.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
tsconfig.e2e.json
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
node_modules/...
</aio-file>
</div>
<aio-file>
<div class='file'>
src/...
</aio-file>
</div>
<aio-file>
<div class='file'>
.angular-cli.json
</aio-file>
</div>
<aio-file>
<div class='file'>
.editorconfig
</aio-file>
</div>
<aio-file>
<div class='file'>
.gitignore
</aio-file>
</div>
<aio-file>
<div class='file'>
karma.conf.js
</aio-file>
</div>
<aio-file>
<div class='file'>
package.json
</aio-file>
</div>
<aio-file>
<div class='file'>
protractor.conf.js
</aio-file>
</div>
<aio-file>
<div class='file'>
README.md
</aio-file>
</div>
<aio-file>
<div class='file'>
tsconfig.json
</aio-file>
</div>
<aio-file>
<div class='file'>
tslint.json
</aio-file>
</div>
</aio-folder>
</div>
</aio-filetree>
</div>

68
aio/content/guide/forms.md
View File

@ -925,61 +925,73 @@ framework features to provide support for data modification, validation, and mor
The final project folder structure should look like this:
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
angular-forms
<aio-folder>
</div>
<div class='children'>
<div class='file'>
src
<aio-folder>
</div>
<div class='children'>
<div class='file'>
app
<aio-file>
</div>
<div class='children'>
<div class='file'>
app.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero-form.component.html
</aio-file>
</div>
<aio-file>
<div class='file'>
hero-form.component.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
main.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
tsconfig.json
</aio-file>
</div>
<aio-file>
<div class='file'>
index.html
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
node_modules ...
</aio-file>
</div>
<aio-file>
<div class='file'>
package.json
</aio-file>
</div>
</aio-folder>
</div>
</aio-filetree>
</div>

96
aio/content/guide/ngmodule.md
View File

@ -623,53 +623,61 @@ Everything is in place to run the application with its contact editor.
The app file structure looks like this:
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
app
<aio-file>
</div>
<div class='children'>
<div class='file'>
app.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
highlight.directive.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
title.component.(html|ts)
</aio-file>
</div>
<aio-file>
<div class='file'>
user.service.ts
</aio-file>
</div>
<aio-folder>
<div class='file'>
contact
<aio-file>
</div>
<div class='children'>
<div class='file'>
awesome.pipe.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
contact.component.(css|html|ts)
</aio-file>
</div>
<aio-file>
<div class='file'>
contact.service.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
highlight.directive.ts
</aio-file>
</div>
</aio-folder>
</div>
</aio-folder>
</div>
</aio-filetree>
</div>
@ -1120,41 +1128,45 @@ The `HeroModule` is a bit more complex than the `CrisisModule`, which makes it
a more interesting and useful example. Its file structure is as follows:
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
hero
<aio-file>
</div>
<div class='children'>
<div class='file'>
hero-detail.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero-list.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero-routing.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero.service.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
highlight.directive.ts
</aio-file>
</div>
</aio-folder>
</div>
</aio-filetree>
</div>

236
aio/content/guide/router.md
View File

@ -1027,65 +1027,77 @@ Here are the details for readers inclined to build the sample through to this mi
The starter app's structure looks like this:
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
router-sample
<aio-folder>
</div>
<div class='children'>
<div class='file'>
src
<aio-folder>
</div>
<div class='children'>
<div class='file'>
app
<aio-file>
</div>
<div class='children'>
<div class='file'>
app.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
crisis-list.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero-list.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
not-found.component.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
main.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
index.html
</aio-file>
</div>
<aio-file>
<div class='file'>
styles.css
</aio-file>
</div>
<aio-file>
<div class='file'>
tsconfig.json
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
node_modules ...
</aio-file>
</div>
<aio-file>
<div class='file'>
package.json
</aio-file>
</div>
</aio-folder>
</div>
</aio-filetree>
</div>
@ -1287,29 +1299,33 @@ Follow these steps:
When you're done, you'll have these *hero management* files:
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
src/app/heroes
<aio-file>
</div>
<div class='children'>
<div class='file'>
hero-detail.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero-list.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero.service.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
heroes.module.ts
</aio-file>
</div>
</aio-folder>
</div>
</aio-filetree>
</div>
@ -2180,85 +2196,105 @@ You've learned how to do the following:
After these changes, the folder structure looks like this:
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
router-sample
<aio-folder>
</div>
<div class='children'>
<div class='file'>
src
<aio-folder>
</div>
<div class='children'>
<div class='file'>
app
<aio-folder>
</div>
<div class='children'>
<div class='file'>
heroes
<aio-file>
</div>
<div class='children'>
<div class='file'>
hero-detail.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero-list.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero.service.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
heroes.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
heroes-routing.module.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
app.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app-routing.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
crisis-list.component.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
main.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
index.html
</aio-file>
</div>
<aio-file>
<div class='file'>
styles.css
</aio-file>
</div>
<aio-file>
<div class='file'>
tsconfig.json
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
node_modules ...
</aio-file>
</div>
<aio-file>
<div class='file'>
package.json
</aio-file>
</div>
</aio-folder>
</div>
</aio-filetree>
<Here>
are the relevant files for this version of the sample application.
</Here>
</div>
@ -2910,37 +2946,41 @@ Create an `admin` folder with a feature module file, a routing configuration fil
The admin feature file structure looks like this:
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
src/app/admin
<aio-file>
</div>
<div class='children'>
<div class='file'>
admin-dashboard.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
admin.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
admin.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
admin-routing.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
manage-crises.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
manage-heroes.component.ts
</aio-file>
</div>
</aio-folder>
</div>
</aio-filetree>
</div>

32
aio/content/guide/setup.md
View File

@ -153,29 +153,37 @@ most of which you can [learn about later](guide/setup-systemjs-anatomy "Setup An
Focus on the following three TypeScript (`.ts`) files in the **`/src`** folder.
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
src
<aio-folder>
</div>
<div class='children'>
<div class='file'>
app
<aio-file>
</div>
<div class='children'>
<div class='file'>
app.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app.module.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
main.ts
</aio-file>
</div>
</aio-folder>
</div>
</aio-filetree>
</div>

380
aio/content/guide/style-guide.md
View File

@ -2459,177 +2459,229 @@ But if something is not obvious or departs from a convention, then spell it out.
Here is a compliant folder and file structure:
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
&lt;project root&gt;
<aio-folder>
</div>
<div class='children'>
<div class='file'>
src
<aio-folder>
</div>
<div class='children'>
<div class='file'>
app
<aio-folder>
</div>
<div class='children'>
<div class='file'>
core
<aio-file>
</div>
<div class='children'>
<div class='file'>
core.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
exception.service.ts|spec.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
user-profile.service.ts|spec.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-folder>
<div class='file'>
heroes
<aio-folder>
</div>
<div class='children'>
<div class='file'>
hero
<aio-file>
</div>
<div class='children'>
<div class='file'>
hero.component.ts|html|css|spec.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-folder>
<div class='file'>
hero-list
<aio-file>
</div>
<div class='children'>
<div class='file'>
hero-list.component.ts|html|css|spec.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-folder>
<div class='file'>
shared
<aio-file>
</div>
<div class='children'>
<div class='file'>
hero-button.component.ts|html|css|spec.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero.model.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero.service.ts|spec.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
heroes.component.ts|html|css|spec.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
heroes.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
heroes-routing.module.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-folder>
<div class='file'>
shared
<aio-file>
</div>
<div class='children'>
<div class='file'>
shared.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
init-caps.pipe.ts|spec.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
text-filter.component.ts|spec.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
text-filter.service.ts|spec.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-folder>
<div class='file'>
villains
<aio-folder>
</div>
<div class='children'>
<div class='file'>
villain
<aio-file>
</div>
<div class='children'>
<div class='file'>
...
</aio-file>
</div>
</aio-folder>
</div>
<aio-folder>
<div class='file'>
villain-list
<aio-file>
</div>
<div class='children'>
<div class='file'>
...
</aio-file>
</div>
</aio-folder>
</div>
<aio-folder>
<div class='file'>
shared
<aio-file>
</div>
<div class='children'>
<div class='file'>
...
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
villains.component.ts|html|css|spec.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
villains.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
villains-routing.module.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
app.component.ts|html|css|spec.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app-routing.module.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
main.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
index.html
</aio-file>
</div>
<aio-file>
<div class='file'>
...
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
node_modules/...
</aio-file>
</div>
<aio-file>
<div class='file'>
...
</aio-file>
</div>
</aio-folder>
</div>
</aio-filetree>
</div>
@ -3081,61 +3133,73 @@ Yet there is a real danger of that happening if the `SharedModule` provides a se
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
src
<aio-folder>
</div>
<div class='children'>
<div class='file'>
app
<aio-folder>
</div>
<div class='children'>
<div class='file'>
shared
<aio-file>
</div>
<div class='children'>
<div class='file'>
shared.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
init-caps.pipe.ts|spec.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
text-filter.component.ts|spec.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
text-filter.service.ts|spec.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
app.component.ts|html|css|spec.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app-routing.module.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
main.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
index.html
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
...
</aio-file>
</div>
</aio-filetree>
</div>
@ -3353,73 +3417,93 @@ Yet there is a real danger of that happening accidentally if the `CoreModule` pr
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
src
<aio-folder>
</div>
<div class='children'>
<div class='file'>
app
<aio-folder>
</div>
<div class='children'>
<div class='file'>
core
<aio-file>
</div>
<div class='children'>
<div class='file'>
core.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
logger.service.ts|spec.ts
</aio-file>
</div>
<aio-folder>
<div class='file'>
nav
<aio-file>
</div>
<div class='children'>
<div class='file'>
nav.component.ts|html|css|spec.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-folder>
<div class='file'>
spinner
<aio-file>
</div>
<div class='children'>
<div class='file'>
spinner.component.ts|html|css|spec.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
spinner.service.ts|spec.ts
</aio-file>
</div>
</aio-folder>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
app.component.ts|html|css|spec.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app-routing.module.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
main.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
index.html
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
...
</aio-file>
</div>
</aio-filetree>
</div>

188
aio/content/guide/upgrade.md
View File

@ -1258,153 +1258,193 @@ and apply the steps as we go.
In terms of project structure, this is where our work begins:
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
angular-phonecat
<aio-file>
</div>
<div class='children'>
<div class='file'>
bower.json
</aio-file>
</div>
<aio-file>
<div class='file'>
karma.conf.js
</aio-file>
</div>
<aio-file>
<div class='file'>
package.json
</aio-file>
</div>
<aio-folder>
<div class='file'>
app
<aio-folder>
</div>
<div class='children'>
<div class='file'>
core
<aio-folder>
</div>
<div class='children'>
<div class='file'>
checkmark
<aio-file>
</div>
<div class='children'>
<div class='file'>
checkmark.filter.js
</aio-file>
</div>
<aio-file>
<div class='file'>
checkmark.filter.spec.js
</aio-file>
</div>
</aio-folder>
</div>
<aio-folder>
<div class='file'>
phone
<aio-file>
</div>
<div class='children'>
<div class='file'>
phone.module.js
</aio-file>
</div>
<aio-file>
<div class='file'>
phone.service.js
</aio-file>
</div>
<aio-file>
<div class='file'>
phone.service.spec.js
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
core.module.js
</aio-file>
</div>
</aio-folder>
</div>
<aio-folder>
<div class='file'>
phone-detail
<aio-file>
</div>
<div class='children'>
<div class='file'>
phone-detail.component.js
</aio-file>
</div>
<aio-file>
<div class='file'>
phone-detail.component.spec.js
</aio-file>
</div>
<aio-file>
<div class='file'>
phone-detail.module.js
</aio-file>
</div>
<aio-file>
<div class='file'>
phone-detail.template.html
</aio-file>
</div>
</aio-folder>
</div>
<aio-folder>
<div class='file'>
phone-list
<aio-file>
</div>
<div class='children'>
<div class='file'>
phone-list.component.js
</aio-file>
</div>
<aio-file>
<div class='file'>
phone-list.component.spec.js
</aio-file>
</div>
<aio-file>
<div class='file'>
phone-list.module.js
</aio-file>
</div>
<aio-file>
<div class='file'>
phone-list.template.html
</aio-file>
</div>
</aio-folder>
</div>
<aio-folder>
<div class='file'>
img
<aio-file>
</div>
<div class='children'>
<div class='file'>
...
</aio-file>
</div>
</aio-folder>
</div>
<aio-folder>
<div class='file'>
phones
<aio-file>
</div>
<div class='children'>
<div class='file'>
...
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
app.animations.js
</aio-file>
</div>
<aio-file>
<div class='file'>
app.config.js
</aio-file>
</div>
<aio-file>
<div class='file'>
app.css
</aio-file>
</div>
<aio-file>
<div class='file'>
app.module.js
</aio-file>
</div>
<aio-file>
<div class='file'>
index.html
</aio-file>
</div>
</aio-folder>
</div>
<aio-folder>
<div class='file'>
e2e-tests
<aio-file>
</div>
<div class='children'>
<div class='file'>
protractor-conf.js
</aio-file>
</div>
<aio-file>
<div class='file'>
scenarios.js
</aio-file>
</div>
</aio-folder>
</div>
</aio-folder>
</div>
</aio-filetree>
</div>

64
aio/content/tutorial/toh-pt1.md
View File

@ -14,57 +14,69 @@ named <code>angular-tour-of-heroes</code>.
The file structure should look like this:
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
angular-tour-of-heroes
<aio-folder>
</div>
<div class='children'>
<div class='file'>
src
<aio-folder>
</div>
<div class='children'>
<div class='file'>
app
<aio-file>
</div>
<div class='children'>
<div class='file'>
app.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app.module.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
main.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
index.html
</aio-file>
</div>
<aio-file>
<div class='file'>
styles.css
</aio-file>
</div>
<aio-file>
<div class='file'>
systemjs.config.js
</aio-file>
</div>
<aio-file>
<div class='file'>
tsconfig.json
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
node_modules ...
</aio-file>
</div>
<aio-file>
<div class='file'>
package.json
</aio-file>
</div>
</aio-folder>
</div>
</aio-filetree>
</div>

64
aio/content/tutorial/toh-pt2.md
View File

@ -20,57 +20,69 @@ verify that you have the following structure after [The Hero Editor](tutorial/to
If your structure doesn't match, go back to that page to figure out what you missed.
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
angular-tour-of-heroes
<aio-folder>
</div>
<div class='children'>
<div class='file'>
src
<aio-folder>
</div>
<div class='children'>
<div class='file'>
app
<aio-file>
</div>
<div class='children'>
<div class='file'>
app.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app.module.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
main.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
index.html
</aio-file>
</div>
<aio-file>
<div class='file'>
styles.css
</aio-file>
</div>
<aio-file>
<div class='file'>
systemjs.config.js
</aio-file>
</div>
<aio-file>
<div class='file'>
tsconfig.json
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
node_modules ...
</aio-file>
</div>
<aio-file>
<div class='file'>
package.json
</aio-file>
</div>
</aio-folder>
</div>
</aio-filetree>
</div>

136
aio/content/tutorial/toh-pt3.md
View File

@ -26,57 +26,69 @@ Before getting started on this page, verify that you have the following structur
If not, go back to the previous pages.
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
angular-tour-of-heroes
<aio-folder>
</div>
<div class='children'>
<div class='file'>
src
<aio-folder>
</div>
<div class='children'>
<div class='file'>
app
<aio-file>
</div>
<div class='children'>
<div class='file'>
app.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app.module.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
main.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
index.html
</aio-file>
</div>
<aio-file>
<div class='file'>
styles.css
</aio-file>
</div>
<aio-file>
<div class='file'>
systemjs.config.js
</aio-file>
</div>
<aio-file>
<div class='file'>
tsconfig.json
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
node_modules ...
</aio-file>
</div>
<aio-file>
<div class='file'>
package.json
</aio-file>
</div>
</aio-folder>
</div>
</aio-filetree>
</div>
@ -331,65 +343,77 @@ without touching the parent `AppComponent`.
Verify that you have the following structure:
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
angular-tour-of-heroes
<aio-folder>
</div>
<div class='children'>
<div class='file'>
src
<aio-folder>
</div>
<div class='children'>
<div class='file'>
app
<aio-file>
</div>
<div class='children'>
<div class='file'>
app.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero-detail.component.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
main.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
index.html
</aio-file>
</div>
<aio-file>
<div class='file'>
styles.css
</aio-file>
</div>
<aio-file>
<div class='file'>
systemjs.config.js
</aio-file>
</div>
<aio-file>
<div class='file'>
tsconfig.json
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
node_modules ...
</aio-file>
</div>
<aio-file>
<div class='file'>
package.json
</aio-file>
</div>
</aio-folder>
</div>
</aio-filetree>
</div>

152
aio/content/tutorial/toh-pt4.md
View File

@ -27,65 +27,77 @@ Before continuing with the Tour of Heroes, verify that you have the following st
If not, go back to the previous pages.
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
angular-tour-of-heroes
<aio-folder>
</div>
<div class='children'>
<div class='file'>
src
<aio-folder>
</div>
<div class='children'>
<div class='file'>
app
<aio-file>
</div>
<div class='children'>
<div class='file'>
app.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero-detail.component.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
main.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
index.html
</aio-file>
</div>
<aio-file>
<div class='file'>
styles.css
</aio-file>
</div>
<aio-file>
<div class='file'>
systemjs.config.js
</aio-file>
</div>
<aio-file>
<div class='file'>
tsconfig.json
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
node_modules ...
</aio-file>
</div>
<aio-file>
<div class='file'>
package.json
</aio-file>
</div>
</aio-folder>
</div>
</aio-filetree>
</div>
@ -478,73 +490,85 @@ At the end of this page, [Appendix: take it slow](tutorial/toh-pt4#slow) describ
Verify that you have the following structure after all of your refactoring:
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
angular-tour-of-heroes
<aio-folder>
</div>
<div class='children'>
<div class='file'>
src
<aio-folder>
</div>
<div class='children'>
<div class='file'>
app
<aio-file>
</div>
<div class='children'>
<div class='file'>
app.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero-detail.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero.service.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
mock-heroes.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
main.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
index.html
</aio-file>
</div>
<aio-file>
<div class='file'>
styles.css
</aio-file>
</div>
<aio-file>
<div class='file'>
systemjs.config.js
</aio-file>
</div>
<aio-file>
<div class='file'>
tsconfig.json
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
node_modules ...
</aio-file>
</div>
<aio-file>
<div class='file'>
package.json
</aio-file>
</div>
</aio-folder>
</div>
</aio-filetree>
</div>

200
aio/content/tutorial/toh-pt5.md
View File

@ -47,73 +47,85 @@ Before continuing with the Tour of Heroes, verify that you have the following st
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
angular-tour-of-heroes
<aio-folder>
</div>
<div class='children'>
<div class='file'>
src
<aio-folder>
</div>
<div class='children'>
<div class='file'>
app
<aio-file>
</div>
<div class='children'>
<div class='file'>
app.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero.service.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero-detail.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
mock-heroes.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
main.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
index.html
</aio-file>
</div>
<aio-file>
<div class='file'>
styles.css
</aio-file>
</div>
<aio-file>
<div class='file'>
systemjs.config.js
</aio-file>
</div>
<aio-file>
<div class='file'>
tsconfig.json
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
node_modules ...
</aio-file>
</div>
<aio-file>
<div class='file'>
package.json
</aio-file>
</div>
</aio-folder>
</div>
</aio-filetree>
</div>
@ -1223,113 +1235,125 @@ Review the sample source code in the <live-example></live-example> for this page
Verify that you have the following structure:
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
angular-tour-of-heroes
<aio-folder>
</div>
<div class='children'>
<div class='file'>
src
<aio-folder>
</div>
<div class='children'>
<div class='file'>
app
<aio-file>
</div>
<div class='children'>
<div class='file'>
app.component.css
</aio-file>
</div>
<aio-file>
<div class='file'>
app.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app-routing.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
dashboard.component.css
</aio-file>
</div>
<aio-file>
<div class='file'>
dashboard.component.html
</aio-file>
</div>
<aio-file>
<div class='file'>
dashboard.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero.service.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero-detail.component.css
</aio-file>
</div>
<aio-file>
<div class='file'>
hero-detail.component.html
</aio-file>
</div>
<aio-file>
<div class='file'>
hero-detail.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
heroes.component.css
</aio-file>
</div>
<aio-file>
<div class='file'>
heroes.component.html
</aio-file>
</div>
<aio-file>
<div class='file'>
heroes.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
mock-heroes.ts
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
main.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
index.html
</aio-file>
</div>
<aio-file>
<div class='file'>
styles.css
</aio-file>
</div>
<aio-file>
<div class='file'>
systemjs.config.js
</aio-file>
</div>
<aio-file>
<div class='file'>
tsconfig.json
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
node_modules ...
</aio-file>
</div>
<aio-file>
<div class='file'>
package.json
</aio-file>
</div>
</aio-folder>
</div>
</aio-filetree>
</div>

136
aio/content/tutorial/toh-pt6.md
View File

@ -711,129 +711,141 @@ Review the sample source code in the <live-example></live-example> for this page
Verify that you have the following structure:
<aio-filetree>
<div class='filetree'>
<aio-folder>
<div class='file'>
angular-tour-of-heroes
<aio-folder>
</div>
<div class='children'>
<div class='file'>
src
<aio-folder>
</div>
<div class='children'>
<div class='file'>
app
<aio-file>
</div>
<div class='children'>
<div class='file'>
app.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app.component.css
</aio-file>
</div>
<aio-file>
<div class='file'>
app.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
app-routing.module.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
dashboard.component.css
</aio-file>
</div>
<aio-file>
<div class='file'>
dashboard.component.html
</aio-file>
</div>
<aio-file>
<div class='file'>
dashboard.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero-detail.component.css
</aio-file>
</div>
<aio-file>
<div class='file'>
hero-detail.component.html
</aio-file>
</div>
<aio-file>
<div class='file'>
hero-detail.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
hero-search.component.html (new)
</aio-file>
</div>
<aio-file>
<div class='file'>
hero-search.component.css (new)
</aio-file>
</div>
<aio-file>
<div class='file'>
hero-search.component.ts (new)
</aio-file>
</div>
<aio-file>
<div class='file'>
hero-search.service.ts (new)
</aio-file>
</div>
<aio-file>
<div class='file'>
hero.service.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
heroes.component.css
</aio-file>
</div>
<aio-file>
<div class='file'>
heroes.component.html
</aio-file>
</div>
<aio-file>
<div class='file'>
heroes.component.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
in-memory-data.service.ts (new)
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
main.ts
</aio-file>
</div>
<aio-file>
<div class='file'>
index.html
</aio-file>
</div>
<aio-file>
<div class='file'>
styles.css
</aio-file>
</div>
<aio-file>
<div class='file'>
systemjs.config.js
</aio-file>
</div>
<aio-file>
<div class='file'>
tsconfig.json
</aio-file>
</div>
</aio-folder>
</div>
<aio-file>
<div class='file'>
node_modules ...
</aio-file>
</div>
<aio-file>
<div class='file'>
package.json
</aio-file>
</div>
</aio-folder>
</div>
</aio-filetree>
</div>