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. Any files outside of this folder are meant to support building your app.
<aio-filetree> <div class='filetree'>
<aio-folder> <div class='file'>
src src
<aio-folder> </div>
<div class='children'>
<div class='file'>
app app
<aio-file> </div>
<div class='children'>
<div class='file'>
app.component.css app.component.css
</aio-file> </div>
<aio-file> <div class='file'>
app.component.html app.component.html
</aio-file> </div>
<aio-file> <div class='file'>
app.component.spec.ts app.component.spec.ts
</aio-file> </div>
<aio-file> <div class='file'>
app.component.ts app.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
app.module.ts app.module.ts
</aio-file> </div>
</aio-folder> </div>
<aio-folder> <div class='file'>
assets assets
<aio-file> </div>
<div class='children'>
<div class='file'>
.gitkeep .gitkeep
</aio-file> </div>
</aio-folder> </div>
<aio-folder> <div class='file'>
environments environments
<aio-file> </div>
<div class='children'>
<div class='file'>
environment.prod.ts environment.prod.ts
</aio-file> </div>
<aio-file> <div class='file'>
environment.ts environment.ts
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
favicon.ico favicon.ico
</aio-file> </div>
<aio-file> <div class='file'>
index.html index.html
</aio-file> </div>
<aio-file> <div class='file'>
main.ts main.ts
</aio-file> </div>
<aio-file> <div class='file'>
polyfills.ts polyfills.ts
</aio-file> </div>
<aio-file> <div class='file'>
styles.css styles.css
</aio-file> </div>
<aio-file> <div class='file'>
test.ts test.ts
</aio-file> </div>
<aio-file> <div class='file'>
tsconfig.app.json tsconfig.app.json
</aio-file> </div>
<aio-file> <div class='file'>
tsconfig.spec.json 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/`. These files go in the root folder next to `src/`.
<aio-filetree> <div class='filetree'>
<aio-folder> <div class='file'>
my-app my-app
<aio-folder> </div>
<div class='children'>
<div class='file'>
e2e e2e
<aio-file> </div>
<div class='children'>
<div class='file'>
app.e2e-spec.ts app.e2e-spec.ts
</aio-file> </div>
<aio-file> <div class='file'>
app.po.ts app.po.ts
</aio-file> </div>
<aio-file> <div class='file'>
tsconfig.e2e.json tsconfig.e2e.json
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
node_modules/... node_modules/...
</aio-file> </div>
<aio-file> <div class='file'>
src/... src/...
</aio-file> </div>
<aio-file> <div class='file'>
.angular-cli.json .angular-cli.json
</aio-file> </div>
<aio-file> <div class='file'>
.editorconfig .editorconfig
</aio-file> </div>
<aio-file> <div class='file'>
.gitignore .gitignore
</aio-file> </div>
<aio-file> <div class='file'>
karma.conf.js karma.conf.js
</aio-file> </div>
<aio-file> <div class='file'>
package.json package.json
</aio-file> </div>
<aio-file> <div class='file'>
protractor.conf.js protractor.conf.js
</aio-file> </div>
<aio-file> <div class='file'>
README.md README.md
</aio-file> </div>
<aio-file> <div class='file'>
tsconfig.json tsconfig.json
</aio-file> </div>
<aio-file> <div class='file'>
tslint.json 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: The final project folder structure should look like this:
<aio-filetree> <div class='filetree'>
<aio-folder> <div class='file'>
angular-forms angular-forms
<aio-folder> </div>
<div class='children'>
<div class='file'>
src src
<aio-folder> </div>
<div class='children'>
<div class='file'>
app app
<aio-file> </div>
<div class='children'>
<div class='file'>
app.component.ts app.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
app.module.ts app.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero.ts hero.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero-form.component.html hero-form.component.html
</aio-file> </div>
<aio-file> <div class='file'>
hero-form.component.ts hero-form.component.ts
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
main.ts main.ts
</aio-file> </div>
<aio-file> <div class='file'>
tsconfig.json tsconfig.json
</aio-file> </div>
<aio-file> <div class='file'>
index.html index.html
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
node_modules ... node_modules ...
</aio-file> </div>
<aio-file> <div class='file'>
package.json 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: The app file structure looks like this:
<aio-filetree> <div class='filetree'>
<aio-folder> <div class='file'>
app app
<aio-file> </div>
<div class='children'>
<div class='file'>
app.component.ts app.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
app.module.ts app.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
highlight.directive.ts highlight.directive.ts
</aio-file> </div>
<aio-file> <div class='file'>
title.component.(html|ts) title.component.(html|ts)
</aio-file> </div>
<aio-file> <div class='file'>
user.service.ts user.service.ts
</aio-file> </div>
<aio-folder> <div class='file'>
contact contact
<aio-file> </div>
<div class='children'>
<div class='file'>
awesome.pipe.ts awesome.pipe.ts
</aio-file> </div>
<aio-file> <div class='file'>
contact.component.(css|html|ts) contact.component.(css|html|ts)
</aio-file> </div>
<aio-file> <div class='file'>
contact.service.ts contact.service.ts
</aio-file> </div>
<aio-file> <div class='file'>
highlight.directive.ts 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: a more interesting and useful example. Its file structure is as follows:
<aio-filetree> <div class='filetree'>
<aio-folder> <div class='file'>
hero hero
<aio-file> </div>
<div class='children'>
<div class='file'>
hero-detail.component.ts hero-detail.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero-list.component.ts hero-list.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero.component.ts hero.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero.module.ts hero.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero-routing.module.ts hero-routing.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero.service.ts hero.service.ts
</aio-file> </div>
<aio-file> <div class='file'>
highlight.directive.ts 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: The starter app's structure looks like this:
<aio-filetree> <div class='filetree'>
<aio-folder> <div class='file'>
router-sample router-sample
<aio-folder> </div>
<div class='children'>
<div class='file'>
src src
<aio-folder> </div>
<div class='children'>
<div class='file'>
app app
<aio-file> </div>
<div class='children'>
<div class='file'>
app.component.ts app.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
app.module.ts app.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
crisis-list.component.ts crisis-list.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero-list.component.ts hero-list.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
not-found.component.ts not-found.component.ts
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
main.ts main.ts
</aio-file> </div>
<aio-file> <div class='file'>
index.html index.html
</aio-file> </div>
<aio-file> <div class='file'>
styles.css styles.css
</aio-file> </div>
<aio-file> <div class='file'>
tsconfig.json tsconfig.json
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
node_modules ... node_modules ...
</aio-file> </div>
<aio-file> <div class='file'>
package.json 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: When you're done, you'll have these *hero management* files:
<aio-filetree> <div class='filetree'>
<aio-folder> <div class='file'>
src/app/heroes src/app/heroes
<aio-file> </div>
<div class='children'>
<div class='file'>
hero-detail.component.ts hero-detail.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero-list.component.ts hero-list.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero.service.ts hero.service.ts
</aio-file> </div>
<aio-file> <div class='file'>
heroes.module.ts 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: After these changes, the folder structure looks like this:
<aio-filetree> <div class='filetree'>
<aio-folder> <div class='file'>
router-sample router-sample
<aio-folder> </div>
<div class='children'>
<div class='file'>
src src
<aio-folder> </div>
<div class='children'>
<div class='file'>
app app
<aio-folder> </div>
<div class='children'>
<div class='file'>
heroes heroes
<aio-file> </div>
<div class='children'>
<div class='file'>
hero-detail.component.ts hero-detail.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero-list.component.ts hero-list.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero.service.ts hero.service.ts
</aio-file> </div>
<aio-file> <div class='file'>
heroes.module.ts heroes.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
heroes-routing.module.ts heroes-routing.module.ts
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
app.component.ts app.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
app.module.ts app.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
app-routing.module.ts app-routing.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
crisis-list.component.ts crisis-list.component.ts
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
main.ts main.ts
</aio-file> </div>
<aio-file> <div class='file'>
index.html index.html
</aio-file> </div>
<aio-file> <div class='file'>
styles.css styles.css
</aio-file> </div>
<aio-file> <div class='file'>
tsconfig.json tsconfig.json
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
node_modules ... node_modules ...
</aio-file> </div>
<aio-file> <div class='file'>
package.json 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: The admin feature file structure looks like this:
<aio-filetree> <div class='filetree'>
<aio-folder> <div class='file'>
src/app/admin src/app/admin
<aio-file> </div>
<div class='children'>
<div class='file'>
admin-dashboard.component.ts admin-dashboard.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
admin.component.ts admin.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
admin.module.ts admin.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
admin-routing.module.ts admin-routing.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
manage-crises.component.ts manage-crises.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
manage-heroes.component.ts 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. Focus on the following three TypeScript (`.ts`) files in the **`/src`** folder.
<aio-filetree> <div class='filetree'>
<aio-folder> <div class='file'>
src src
<aio-folder> </div>
<div class='children'>
<div class='file'>
app app
<aio-file> </div>
<div class='children'>
<div class='file'>
app.component.ts app.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
app.module.ts app.module.ts
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
main.ts 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: Here is a compliant folder and file structure:
<aio-filetree> <div class='filetree'>
<aio-folder> <div class='file'>
&lt;project root&gt; &lt;project root&gt;
<aio-folder> </div>
<div class='children'>
<div class='file'>
src src
<aio-folder> </div>
<div class='children'>
<div class='file'>
app app
<aio-folder> </div>
<div class='children'>
<div class='file'>
core core
<aio-file> </div>
<div class='children'>
<div class='file'>
core.module.ts core.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
exception.service.ts|spec.ts exception.service.ts|spec.ts
</aio-file> </div>
<aio-file> <div class='file'>
user-profile.service.ts|spec.ts user-profile.service.ts|spec.ts
</aio-file> </div>
</aio-folder> </div>
<aio-folder> <div class='file'>
heroes heroes
<aio-folder> </div>
<div class='children'>
<div class='file'>
hero hero
<aio-file> </div>
<div class='children'>
<div class='file'>
hero.component.ts|html|css|spec.ts hero.component.ts|html|css|spec.ts
</aio-file> </div>
</aio-folder> </div>
<aio-folder> <div class='file'>
hero-list hero-list
<aio-file> </div>
<div class='children'>
<div class='file'>
hero-list.component.ts|html|css|spec.ts hero-list.component.ts|html|css|spec.ts
</aio-file> </div>
</aio-folder> </div>
<aio-folder> <div class='file'>
shared shared
<aio-file> </div>
<div class='children'>
<div class='file'>
hero-button.component.ts|html|css|spec.ts hero-button.component.ts|html|css|spec.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero.model.ts hero.model.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero.service.ts|spec.ts hero.service.ts|spec.ts
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
heroes.component.ts|html|css|spec.ts heroes.component.ts|html|css|spec.ts
</aio-file> </div>
<aio-file> <div class='file'>
heroes.module.ts heroes.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
heroes-routing.module.ts heroes-routing.module.ts
</aio-file> </div>
</aio-folder> </div>
<aio-folder> <div class='file'>
shared shared
<aio-file> </div>
<div class='children'>
<div class='file'>
shared.module.ts shared.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
init-caps.pipe.ts|spec.ts init-caps.pipe.ts|spec.ts
</aio-file> </div>
<aio-file> <div class='file'>
text-filter.component.ts|spec.ts text-filter.component.ts|spec.ts
</aio-file> </div>
<aio-file> <div class='file'>
text-filter.service.ts|spec.ts text-filter.service.ts|spec.ts
</aio-file> </div>
</aio-folder> </div>
<aio-folder> <div class='file'>
villains villains
<aio-folder> </div>
<div class='children'>
<div class='file'>
villain villain
<aio-file> </div>
<div class='children'>
<div class='file'>
... ...
</aio-file> </div>
</aio-folder> </div>
<aio-folder> <div class='file'>
villain-list villain-list
<aio-file> </div>
<div class='children'>
<div class='file'>
... ...
</aio-file> </div>
</aio-folder> </div>
<aio-folder> <div class='file'>
shared 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 villains.component.ts|html|css|spec.ts
</aio-file> </div>
<aio-file> <div class='file'>
villains.module.ts villains.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
villains-routing.module.ts villains-routing.module.ts
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
app.component.ts|html|css|spec.ts app.component.ts|html|css|spec.ts
</aio-file> </div>
<aio-file> <div class='file'>
app.module.ts app.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
app-routing.module.ts app-routing.module.ts
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
main.ts main.ts
</aio-file> </div>
<aio-file> <div class='file'>
index.html index.html
</aio-file> </div>
<aio-file> <div class='file'>
... ...
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
node_modules/... 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 src
<aio-folder> </div>
<div class='children'>
<div class='file'>
app app
<aio-folder> </div>
<div class='children'>
<div class='file'>
shared shared
<aio-file> </div>
<div class='children'>
<div class='file'>
shared.module.ts shared.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
init-caps.pipe.ts|spec.ts init-caps.pipe.ts|spec.ts
</aio-file> </div>
<aio-file> <div class='file'>
text-filter.component.ts|spec.ts text-filter.component.ts|spec.ts
</aio-file> </div>
<aio-file> <div class='file'>
text-filter.service.ts|spec.ts text-filter.service.ts|spec.ts
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
app.component.ts|html|css|spec.ts app.component.ts|html|css|spec.ts
</aio-file> </div>
<aio-file> <div class='file'>
app.module.ts app.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
app-routing.module.ts app-routing.module.ts
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
main.ts main.ts
</aio-file> </div>
<aio-file> <div class='file'>
index.html 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 src
<aio-folder> </div>
<div class='children'>
<div class='file'>
app app
<aio-folder> </div>
<div class='children'>
<div class='file'>
core core
<aio-file> </div>
<div class='children'>
<div class='file'>
core.module.ts core.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
logger.service.ts|spec.ts logger.service.ts|spec.ts
</aio-file> </div>
<aio-folder> <div class='file'>
nav nav
<aio-file> </div>
<div class='children'>
<div class='file'>
nav.component.ts|html|css|spec.ts nav.component.ts|html|css|spec.ts
</aio-file> </div>
</aio-folder> </div>
<aio-folder> <div class='file'>
spinner spinner
<aio-file> </div>
<div class='children'>
<div class='file'>
spinner.component.ts|html|css|spec.ts spinner.component.ts|html|css|spec.ts
</aio-file> </div>
<aio-file> <div class='file'>
spinner.service.ts|spec.ts 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 app.component.ts|html|css|spec.ts
</aio-file> </div>
<aio-file> <div class='file'>
app.module.ts app.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
app-routing.module.ts app-routing.module.ts
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
main.ts main.ts
</aio-file> </div>
<aio-file> <div class='file'>
index.html 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: In terms of project structure, this is where our work begins:
<aio-filetree> <div class='filetree'>
<aio-folder> <div class='file'>
angular-phonecat angular-phonecat
<aio-file> </div>
<div class='children'>
<div class='file'>
bower.json bower.json
</aio-file> </div>
<aio-file> <div class='file'>
karma.conf.js karma.conf.js
</aio-file> </div>
<aio-file> <div class='file'>
package.json package.json
</aio-file> </div>
<aio-folder> <div class='file'>
app app
<aio-folder> </div>
<div class='children'>
<div class='file'>
core core
<aio-folder> </div>
<div class='children'>
<div class='file'>
checkmark checkmark
<aio-file> </div>
<div class='children'>
<div class='file'>
checkmark.filter.js checkmark.filter.js
</aio-file> </div>
<aio-file> <div class='file'>
checkmark.filter.spec.js checkmark.filter.spec.js
</aio-file> </div>
</aio-folder> </div>
<aio-folder> <div class='file'>
phone phone
<aio-file> </div>
<div class='children'>
<div class='file'>
phone.module.js phone.module.js
</aio-file> </div>
<aio-file> <div class='file'>
phone.service.js phone.service.js
</aio-file> </div>
<aio-file> <div class='file'>
phone.service.spec.js phone.service.spec.js
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
core.module.js core.module.js
</aio-file> </div>
</aio-folder> </div>
<aio-folder> <div class='file'>
phone-detail phone-detail
<aio-file> </div>
<div class='children'>
<div class='file'>
phone-detail.component.js phone-detail.component.js
</aio-file> </div>
<aio-file> <div class='file'>
phone-detail.component.spec.js phone-detail.component.spec.js
</aio-file> </div>
<aio-file> <div class='file'>
phone-detail.module.js phone-detail.module.js
</aio-file> </div>
<aio-file> <div class='file'>
phone-detail.template.html phone-detail.template.html
</aio-file> </div>
</aio-folder> </div>
<aio-folder> <div class='file'>
phone-list phone-list
<aio-file> </div>
<div class='children'>
<div class='file'>
phone-list.component.js phone-list.component.js
</aio-file> </div>
<aio-file> <div class='file'>
phone-list.component.spec.js phone-list.component.spec.js
</aio-file> </div>
<aio-file> <div class='file'>
phone-list.module.js phone-list.module.js
</aio-file> </div>
<aio-file> <div class='file'>
phone-list.template.html phone-list.template.html
</aio-file> </div>
</aio-folder> </div>
<aio-folder> <div class='file'>
img img
<aio-file> </div>
<div class='children'>
<div class='file'>
... ...
</aio-file> </div>
</aio-folder> </div>
<aio-folder> <div class='file'>
phones phones
<aio-file> </div>
<div class='children'>
<div class='file'>
... ...
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
app.animations.js app.animations.js
</aio-file> </div>
<aio-file> <div class='file'>
app.config.js app.config.js
</aio-file> </div>
<aio-file> <div class='file'>
app.css app.css
</aio-file> </div>
<aio-file> <div class='file'>
app.module.js app.module.js
</aio-file> </div>
<aio-file> <div class='file'>
index.html index.html
</aio-file> </div>
</aio-folder> </div>
<aio-folder> <div class='file'>
e2e-tests e2e-tests
<aio-file> </div>
<div class='children'>
<div class='file'>
protractor-conf.js protractor-conf.js
</aio-file> </div>
<aio-file> <div class='file'>
scenarios.js 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: The file structure should look like this:
<aio-filetree> <div class='filetree'>
<aio-folder> <div class='file'>
angular-tour-of-heroes angular-tour-of-heroes
<aio-folder> </div>
<div class='children'>
<div class='file'>
src src
<aio-folder> </div>
<div class='children'>
<div class='file'>
app app
<aio-file> </div>
<div class='children'>
<div class='file'>
app.component.ts app.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
app.module.ts app.module.ts
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
main.ts main.ts
</aio-file> </div>
<aio-file> <div class='file'>
index.html index.html
</aio-file> </div>
<aio-file> <div class='file'>
styles.css styles.css
</aio-file> </div>
<aio-file> <div class='file'>
systemjs.config.js systemjs.config.js
</aio-file> </div>
<aio-file> <div class='file'>
tsconfig.json tsconfig.json
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
node_modules ... node_modules ...
</aio-file> </div>
<aio-file> <div class='file'>
package.json 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. 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 angular-tour-of-heroes
<aio-folder> </div>
<div class='children'>
<div class='file'>
src src
<aio-folder> </div>
<div class='children'>
<div class='file'>
app app
<aio-file> </div>
<div class='children'>
<div class='file'>
app.component.ts app.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
app.module.ts app.module.ts
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
main.ts main.ts
</aio-file> </div>
<aio-file> <div class='file'>
index.html index.html
</aio-file> </div>
<aio-file> <div class='file'>
styles.css styles.css
</aio-file> </div>
<aio-file> <div class='file'>
systemjs.config.js systemjs.config.js
</aio-file> </div>
<aio-file> <div class='file'>
tsconfig.json tsconfig.json
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
node_modules ... node_modules ...
</aio-file> </div>
<aio-file> <div class='file'>
package.json 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. If not, go back to the previous pages.
<aio-filetree> <div class='filetree'>
<aio-folder> <div class='file'>
angular-tour-of-heroes angular-tour-of-heroes
<aio-folder> </div>
<div class='children'>
<div class='file'>
src src
<aio-folder> </div>
<div class='children'>
<div class='file'>
app app
<aio-file> </div>
<div class='children'>
<div class='file'>
app.component.ts app.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
app.module.ts app.module.ts
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
main.ts main.ts
</aio-file> </div>
<aio-file> <div class='file'>
index.html index.html
</aio-file> </div>
<aio-file> <div class='file'>
styles.css styles.css
</aio-file> </div>
<aio-file> <div class='file'>
systemjs.config.js systemjs.config.js
</aio-file> </div>
<aio-file> <div class='file'>
tsconfig.json tsconfig.json
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
node_modules ... node_modules ...
</aio-file> </div>
<aio-file> <div class='file'>
package.json 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: Verify that you have the following structure:
<aio-filetree> <div class='filetree'>
<aio-folder> <div class='file'>
angular-tour-of-heroes angular-tour-of-heroes
<aio-folder> </div>
<div class='children'>
<div class='file'>
src src
<aio-folder> </div>
<div class='children'>
<div class='file'>
app app
<aio-file> </div>
<div class='children'>
<div class='file'>
app.component.ts app.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
app.module.ts app.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero.ts hero.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero-detail.component.ts hero-detail.component.ts
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
main.ts main.ts
</aio-file> </div>
<aio-file> <div class='file'>
index.html index.html
</aio-file> </div>
<aio-file> <div class='file'>
styles.css styles.css
</aio-file> </div>
<aio-file> <div class='file'>
systemjs.config.js systemjs.config.js
</aio-file> </div>
<aio-file> <div class='file'>
tsconfig.json tsconfig.json
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
node_modules ... node_modules ...
</aio-file> </div>
<aio-file> <div class='file'>
package.json 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. If not, go back to the previous pages.
<aio-filetree> <div class='filetree'>
<aio-folder> <div class='file'>
angular-tour-of-heroes angular-tour-of-heroes
<aio-folder> </div>
<div class='children'>
<div class='file'>
src src
<aio-folder> </div>
<div class='children'>
<div class='file'>
app app
<aio-file> </div>
<div class='children'>
<div class='file'>
app.component.ts app.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
app.module.ts app.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero.ts hero.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero-detail.component.ts hero-detail.component.ts
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
main.ts main.ts
</aio-file> </div>
<aio-file> <div class='file'>
index.html index.html
</aio-file> </div>
<aio-file> <div class='file'>
styles.css styles.css
</aio-file> </div>
<aio-file> <div class='file'>
systemjs.config.js systemjs.config.js
</aio-file> </div>
<aio-file> <div class='file'>
tsconfig.json tsconfig.json
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
node_modules ... node_modules ...
</aio-file> </div>
<aio-file> <div class='file'>
package.json 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: 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 angular-tour-of-heroes
<aio-folder> </div>
<div class='children'>
<div class='file'>
src src
<aio-folder> </div>
<div class='children'>
<div class='file'>
app app
<aio-file> </div>
<div class='children'>
<div class='file'>
app.component.ts app.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
app.module.ts app.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero.ts hero.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero-detail.component.ts hero-detail.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero.service.ts hero.service.ts
</aio-file> </div>
<aio-file> <div class='file'>
mock-heroes.ts mock-heroes.ts
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
main.ts main.ts
</aio-file> </div>
<aio-file> <div class='file'>
index.html index.html
</aio-file> </div>
<aio-file> <div class='file'>
styles.css styles.css
</aio-file> </div>
<aio-file> <div class='file'>
systemjs.config.js systemjs.config.js
</aio-file> </div>
<aio-file> <div class='file'>
tsconfig.json tsconfig.json
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
node_modules ... node_modules ...
</aio-file> </div>
<aio-file> <div class='file'>
package.json 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 angular-tour-of-heroes
<aio-folder> </div>
<div class='children'>
<div class='file'>
src src
<aio-folder> </div>
<div class='children'>
<div class='file'>
app app
<aio-file> </div>
<div class='children'>
<div class='file'>
app.component.ts app.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
app.module.ts app.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero.service.ts hero.service.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero.ts hero.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero-detail.component.ts hero-detail.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
mock-heroes.ts mock-heroes.ts
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
main.ts main.ts
</aio-file> </div>
<aio-file> <div class='file'>
index.html index.html
</aio-file> </div>
<aio-file> <div class='file'>
styles.css styles.css
</aio-file> </div>
<aio-file> <div class='file'>
systemjs.config.js systemjs.config.js
</aio-file> </div>
<aio-file> <div class='file'>
tsconfig.json tsconfig.json
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
node_modules ... node_modules ...
</aio-file> </div>
<aio-file> <div class='file'>
package.json 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: Verify that you have the following structure:
<aio-filetree> <div class='filetree'>
<aio-folder> <div class='file'>
angular-tour-of-heroes angular-tour-of-heroes
<aio-folder> </div>
<div class='children'>
<div class='file'>
src src
<aio-folder> </div>
<div class='children'>
<div class='file'>
app app
<aio-file> </div>
<div class='children'>
<div class='file'>
app.component.css app.component.css
</aio-file> </div>
<aio-file> <div class='file'>
app.component.ts app.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
app.module.ts app.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
app-routing.module.ts app-routing.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
dashboard.component.css dashboard.component.css
</aio-file> </div>
<aio-file> <div class='file'>
dashboard.component.html dashboard.component.html
</aio-file> </div>
<aio-file> <div class='file'>
dashboard.component.ts dashboard.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero.service.ts hero.service.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero.ts hero.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero-detail.component.css hero-detail.component.css
</aio-file> </div>
<aio-file> <div class='file'>
hero-detail.component.html hero-detail.component.html
</aio-file> </div>
<aio-file> <div class='file'>
hero-detail.component.ts hero-detail.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
heroes.component.css heroes.component.css
</aio-file> </div>
<aio-file> <div class='file'>
heroes.component.html heroes.component.html
</aio-file> </div>
<aio-file> <div class='file'>
heroes.component.ts heroes.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
mock-heroes.ts mock-heroes.ts
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
main.ts main.ts
</aio-file> </div>
<aio-file> <div class='file'>
index.html index.html
</aio-file> </div>
<aio-file> <div class='file'>
styles.css styles.css
</aio-file> </div>
<aio-file> <div class='file'>
systemjs.config.js systemjs.config.js
</aio-file> </div>
<aio-file> <div class='file'>
tsconfig.json tsconfig.json
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
node_modules ... node_modules ...
</aio-file> </div>
<aio-file> <div class='file'>
package.json 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: Verify that you have the following structure:
<aio-filetree> <div class='filetree'>
<aio-folder> <div class='file'>
angular-tour-of-heroes angular-tour-of-heroes
<aio-folder> </div>
<div class='children'>
<div class='file'>
src src
<aio-folder> </div>
<div class='children'>
<div class='file'>
app app
<aio-file> </div>
<div class='children'>
<div class='file'>
app.component.ts app.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
app.component.css app.component.css
</aio-file> </div>
<aio-file> <div class='file'>
app.module.ts app.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
app-routing.module.ts app-routing.module.ts
</aio-file> </div>
<aio-file> <div class='file'>
dashboard.component.css dashboard.component.css
</aio-file> </div>
<aio-file> <div class='file'>
dashboard.component.html dashboard.component.html
</aio-file> </div>
<aio-file> <div class='file'>
dashboard.component.ts dashboard.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero.ts hero.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero-detail.component.css hero-detail.component.css
</aio-file> </div>
<aio-file> <div class='file'>
hero-detail.component.html hero-detail.component.html
</aio-file> </div>
<aio-file> <div class='file'>
hero-detail.component.ts hero-detail.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
hero-search.component.html (new) hero-search.component.html (new)
</aio-file> </div>
<aio-file> <div class='file'>
hero-search.component.css (new) hero-search.component.css (new)
</aio-file> </div>
<aio-file> <div class='file'>
hero-search.component.ts (new) hero-search.component.ts (new)
</aio-file> </div>
<aio-file> <div class='file'>
hero-search.service.ts (new) hero-search.service.ts (new)
</aio-file> </div>
<aio-file> <div class='file'>
hero.service.ts hero.service.ts
</aio-file> </div>
<aio-file> <div class='file'>
heroes.component.css heroes.component.css
</aio-file> </div>
<aio-file> <div class='file'>
heroes.component.html heroes.component.html
</aio-file> </div>
<aio-file> <div class='file'>
heroes.component.ts heroes.component.ts
</aio-file> </div>
<aio-file> <div class='file'>
in-memory-data.service.ts (new) in-memory-data.service.ts (new)
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
main.ts main.ts
</aio-file> </div>
<aio-file> <div class='file'>
index.html index.html
</aio-file> </div>
<aio-file> <div class='file'>
styles.css styles.css
</aio-file> </div>
<aio-file> <div class='file'>
systemjs.config.js systemjs.config.js
</aio-file> </div>
<aio-file> <div class='file'>
tsconfig.json tsconfig.json
</aio-file> </div>
</aio-folder> </div>
<aio-file> <div class='file'>
node_modules ... node_modules ...
</aio-file> </div>
<aio-file> <div class='file'>
package.json package.json
</aio-file> </div>
</aio-folder> </div>
</aio-filetree> </div>