diff --git a/aio/content/guide/cli-quickstart.md b/aio/content/guide/cli-quickstart.md index aee7bd9d07..8088e729b9 100644 --- a/aio/content/guide/cli-quickstart.md +++ b/aio/content/guide/cli-quickstart.md @@ -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. - +
- +
src - +
+ +
+ +
app - +
+ +
+ +
app.component.css - +
- +
app.component.html - +
- +
app.component.spec.ts - +
- +
app.component.ts - +
- +
app.module.ts - +
- +
- +
assets - +
+ +
+ +
.gitkeep - +
- +
- +
environments - +
+ +
+ +
environment.prod.ts - +
- +
environment.ts - +
- +
- +
favicon.ico - +
- +
index.html - +
- +
main.ts - +
- +
polyfills.ts - +
- +
styles.css - +
- +
test.ts - +
- +
tsconfig.app.json - +
- +
tsconfig.spec.json - +
- +
- +
@@ -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/`. - +
- +
my-app - +
+ +
+ +
e2e - +
+ +
+ +
app.e2e-spec.ts - +
- +
app.po.ts - +
- +
tsconfig.e2e.json - +
- +
- +
node_modules/... - +
- +
src/... - +
- +
.angular-cli.json - +
- +
.editorconfig - +
- +
.gitignore - +
- +
karma.conf.js - +
- +
package.json - +
- +
protractor.conf.js - +
- +
README.md - +
- +
tsconfig.json - +
- +
tslint.json - +
- +
- +
diff --git a/aio/content/guide/forms.md b/aio/content/guide/forms.md index f804f5ac26..12195b6ec1 100644 --- a/aio/content/guide/forms.md +++ b/aio/content/guide/forms.md @@ -925,61 +925,73 @@ framework features to provide support for data modification, validation, and mor The final project folder structure should look like this: - +
- +
angular-forms - +
+ +
+ +
src - +
+ +
+ +
app - +
+ +
+ +
app.component.ts - +
- +
app.module.ts - +
- +
hero.ts - +
- +
hero-form.component.html - +
- +
hero-form.component.ts - +
- +
- +
main.ts - +
- +
tsconfig.json - +
- +
index.html - +
- +
- +
node_modules ... - +
- +
package.json - +
- +
- +
diff --git a/aio/content/guide/ngmodule.md b/aio/content/guide/ngmodule.md index 6c0ffadbef..a0dd3a137d 100644 --- a/aio/content/guide/ngmodule.md +++ b/aio/content/guide/ngmodule.md @@ -623,53 +623,61 @@ Everything is in place to run the application with its contact editor. The app file structure looks like this: - +
- +
app - +
+ +
+ +
app.component.ts - +
- +
app.module.ts - +
- +
highlight.directive.ts - +
- +
title.component.(html|ts) - +
- +
user.service.ts - +
- +
contact - +
+ +
+ +
awesome.pipe.ts - +
- +
contact.component.(css|html|ts) - +
- +
contact.service.ts - +
- +
highlight.directive.ts - +
- +
- +
- +
@@ -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: - +
- +
hero - +
+ +
+ +
hero-detail.component.ts - +
- +
hero-list.component.ts - +
- +
hero.component.ts - +
- +
hero.module.ts - +
- +
hero-routing.module.ts - +
- +
hero.service.ts - +
- +
highlight.directive.ts - +
- +
- +
diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md index 27c211b79f..44b1e1e0bd 100644 --- a/aio/content/guide/router.md +++ b/aio/content/guide/router.md @@ -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: - +
- +
router-sample - +
+ +
+ +
src - +
+ +
+ +
app - +
+ +
+ +
app.component.ts - +
- +
app.module.ts - +
- +
crisis-list.component.ts - +
- +
hero-list.component.ts - +
- +
not-found.component.ts - +
- +
- +
main.ts - +
- +
index.html - +
- +
styles.css - +
- +
tsconfig.json - +
- +
- +
node_modules ... - +
- +
package.json - +
- +
- +
@@ -1287,29 +1299,33 @@ Follow these steps: When you're done, you'll have these *hero management* files: - +
- +
src/app/heroes - +
+ +
+ +
hero-detail.component.ts - +
- +
hero-list.component.ts - +
- +
hero.service.ts - +
- +
heroes.module.ts - +
- +
- +
@@ -2180,85 +2196,105 @@ You've learned how to do the following: After these changes, the folder structure looks like this: - +
- +
router-sample - +
+ +
+ +
src - +
+ +
+ +
app - +
+ +
+ +
heroes - +
+ +
+ +
hero-detail.component.ts - +
- +
hero-list.component.ts - +
- +
hero.service.ts - +
- +
heroes.module.ts - +
- +
heroes-routing.module.ts - +
- +
- +
app.component.ts - +
- +
app.module.ts - +
- +
app-routing.module.ts - +
- +
crisis-list.component.ts - +
- +
- +
main.ts - +
- +
index.html - +
- +
styles.css - +
- +
tsconfig.json - +
- +
- +
node_modules ... - +
- +
package.json - +
- +
- + + are the relevant files for this version of the sample application. + + +
@@ -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: - +
- +
src/app/admin - +
+ +
+ +
admin-dashboard.component.ts - +
- +
admin.component.ts - +
- +
admin.module.ts - +
- +
admin-routing.module.ts - +
- +
manage-crises.component.ts - +
- +
manage-heroes.component.ts - +
- +
- +
diff --git a/aio/content/guide/setup.md b/aio/content/guide/setup.md index 72d3f3181f..15cf010139 100644 --- a/aio/content/guide/setup.md +++ b/aio/content/guide/setup.md @@ -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. - +
- +
src - +
+ +
+ +
app - +
+ +
+ +
app.component.ts - +
- +
app.module.ts - +
- +
- +
main.ts - +
- +
- +
diff --git a/aio/content/guide/style-guide.md b/aio/content/guide/style-guide.md index 2206fa067f..60f43b6c31 100644 --- a/aio/content/guide/style-guide.md +++ b/aio/content/guide/style-guide.md @@ -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: - +
- +
<project root> - +
+ +
+ +
src - +
+ +
+ +
app - +
+ +
+ +
core - +
+ +
+ +
core.module.ts - +
- +
exception.service.ts|spec.ts - +
- +
user-profile.service.ts|spec.ts - +
- +
- +
heroes - +
+ +
+ +
hero - +
+ +
+ +
hero.component.ts|html|css|spec.ts - +
- +
- +
hero-list - +
+ +
+ +
hero-list.component.ts|html|css|spec.ts - +
- +
- +
shared - +
+ +
+ +
hero-button.component.ts|html|css|spec.ts - +
- +
hero.model.ts - +
- +
hero.service.ts|spec.ts - +
- +
- +
heroes.component.ts|html|css|spec.ts - +
- +
heroes.module.ts - +
- +
heroes-routing.module.ts - +
- +
- +
shared - +
+ +
+ +
shared.module.ts - +
- +
init-caps.pipe.ts|spec.ts - +
- +
text-filter.component.ts|spec.ts - +
- +
text-filter.service.ts|spec.ts - +
- +
- +
villains - +
+ +
+ +
villain - +
+ +
+ +
... - +
- +
- +
villain-list - +
+ +
+ +
... - +
- +
- +
shared - +
+ +
+ +
... - +
- +
- +
villains.component.ts|html|css|spec.ts - +
- +
villains.module.ts - +
- +
villains-routing.module.ts - +
- +
- +
app.component.ts|html|css|spec.ts - +
- +
app.module.ts - +
- +
app-routing.module.ts - +
- +
- +
main.ts - +
- +
index.html - +
- +
... - +
- +
- +
node_modules/... - +
- +
... - +
- +
- +
@@ -3081,61 +3133,73 @@ Yet there is a real danger of that happening if the `SharedModule` provides a se - +
- +
src - +
+ +
+ +
app - +
+ +
+ +
shared - +
+ +
+ +
shared.module.ts - +
- +
init-caps.pipe.ts|spec.ts - +
- +
text-filter.component.ts|spec.ts - +
- +
text-filter.service.ts|spec.ts - +
- +
- +
app.component.ts|html|css|spec.ts - +
- +
app.module.ts - +
- +
app-routing.module.ts - +
- +
- +
main.ts - +
- +
index.html - +
- +
- +
... - +
- +
@@ -3353,73 +3417,93 @@ Yet there is a real danger of that happening accidentally if the `CoreModule` pr - +
- +
src - +
+ +
+ +
app - +
+ +
+ +
core - +
+ +
+ +
core.module.ts - +
- +
logger.service.ts|spec.ts - +
- +
nav - +
+ +
+ +
nav.component.ts|html|css|spec.ts - +
- +
- +
spinner - +
+ +
+ +
spinner.component.ts|html|css|spec.ts - +
- +
spinner.service.ts|spec.ts - +
- +
- +
- +
app.component.ts|html|css|spec.ts - +
- +
app.module.ts - +
- +
app-routing.module.ts - +
- +
- +
main.ts - +
- +
index.html - +
- +
- +
... - +
- +
diff --git a/aio/content/guide/upgrade.md b/aio/content/guide/upgrade.md index 3e92fe3f97..613080cbc2 100644 --- a/aio/content/guide/upgrade.md +++ b/aio/content/guide/upgrade.md @@ -1258,153 +1258,193 @@ and apply the steps as we go. In terms of project structure, this is where our work begins: - +
- +
angular-phonecat - +
+ +
+ +
bower.json - +
- +
karma.conf.js - +
- +
package.json - +
- +
app - +
+ +
+ +
core - +
+ +
+ +
checkmark - +
+ +
+ +
checkmark.filter.js - +
- +
checkmark.filter.spec.js - +
- +
- +
phone - +
+ +
+ +
phone.module.js - +
- +
phone.service.js - +
- +
phone.service.spec.js - +
- +
- +
core.module.js - +
- +
- +
phone-detail - +
+ +
+ +
phone-detail.component.js - +
- +
phone-detail.component.spec.js - +
- +
phone-detail.module.js - +
- +
phone-detail.template.html - +
- +
- +
phone-list - +
+ +
+ +
phone-list.component.js - +
- +
phone-list.component.spec.js - +
- +
phone-list.module.js - +
- +
phone-list.template.html - +
- +
- +
img - +
+ +
+ +
... - +
- +
- +
phones - +
+ +
+ +
... - +
- +
- +
app.animations.js - +
- +
app.config.js - +
- +
app.css - +
- +
app.module.js - +
- +
index.html - +
- +
- +
e2e-tests - +
+ +
+ +
protractor-conf.js - +
- +
scenarios.js - +
- +
- +
- +
diff --git a/aio/content/tutorial/toh-pt1.md b/aio/content/tutorial/toh-pt1.md index 5278bcbaf3..309ec76848 100644 --- a/aio/content/tutorial/toh-pt1.md +++ b/aio/content/tutorial/toh-pt1.md @@ -14,57 +14,69 @@ named angular-tour-of-heroes. The file structure should look like this: - +
- +
angular-tour-of-heroes - +
+ +
+ +
src - +
+ +
+ +
app - +
+ +
+ +
app.component.ts - +
- +
app.module.ts - +
- +
- +
main.ts - +
- +
index.html - +
- +
styles.css - +
- +
systemjs.config.js - +
- +
tsconfig.json - +
- +
- +
node_modules ... - +
- +
package.json - +
- +
- +
diff --git a/aio/content/tutorial/toh-pt2.md b/aio/content/tutorial/toh-pt2.md index a965984716..055e53dde1 100644 --- a/aio/content/tutorial/toh-pt2.md +++ b/aio/content/tutorial/toh-pt2.md @@ -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. - +
- +
angular-tour-of-heroes - +
+ +
+ +
src - +
+ +
+ +
app - +
+ +
+ +
app.component.ts - +
- +
app.module.ts - +
- +
- +
main.ts - +
- +
index.html - +
- +
styles.css - +
- +
systemjs.config.js - +
- +
tsconfig.json - +
- +
- +
node_modules ... - +
- +
package.json - +
- +
- +
diff --git a/aio/content/tutorial/toh-pt3.md b/aio/content/tutorial/toh-pt3.md index e362f231b1..719374e6af 100644 --- a/aio/content/tutorial/toh-pt3.md +++ b/aio/content/tutorial/toh-pt3.md @@ -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. - +
- +
angular-tour-of-heroes - +
+ +
+ +
src - +
+ +
+ +
app - +
+ +
+ +
app.component.ts - +
- +
app.module.ts - +
- +
- +
main.ts - +
- +
index.html - +
- +
styles.css - +
- +
systemjs.config.js - +
- +
tsconfig.json - +
- +
- +
node_modules ... - +
- +
package.json - +
- +
- +
@@ -331,65 +343,77 @@ without touching the parent `AppComponent`. Verify that you have the following structure: - +
- +
angular-tour-of-heroes - +
+ +
+ +
src - +
+ +
+ +
app - +
+ +
+ +
app.component.ts - +
- +
app.module.ts - +
- +
hero.ts - +
- +
hero-detail.component.ts - +
- +
- +
main.ts - +
- +
index.html - +
- +
styles.css - +
- +
systemjs.config.js - +
- +
tsconfig.json - +
- +
- +
node_modules ... - +
- +
package.json - +
- +
- +
diff --git a/aio/content/tutorial/toh-pt4.md b/aio/content/tutorial/toh-pt4.md index 7b1cabb49d..d461304b15 100644 --- a/aio/content/tutorial/toh-pt4.md +++ b/aio/content/tutorial/toh-pt4.md @@ -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. - +
- +
angular-tour-of-heroes - +
+ +
+ +
src - +
+ +
+ +
app - +
+ +
+ +
app.component.ts - +
- +
app.module.ts - +
- +
hero.ts - +
- +
hero-detail.component.ts - +
- +
- +
main.ts - +
- +
index.html - +
- +
styles.css - +
- +
systemjs.config.js - +
- +
tsconfig.json - +
- +
- +
node_modules ... - +
- +
package.json - +
- +
- +
@@ -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: - +
- +
angular-tour-of-heroes - +
+ +
+ +
src - +
+ +
+ +
app - +
+ +
+ +
app.component.ts - +
- +
app.module.ts - +
- +
hero.ts - +
- +
hero-detail.component.ts - +
- +
hero.service.ts - +
- +
mock-heroes.ts - +
- +
- +
main.ts - +
- +
index.html - +
- +
styles.css - +
- +
systemjs.config.js - +
- +
tsconfig.json - +
- +
- +
node_modules ... - +
- +
package.json - +
- +
- +
diff --git a/aio/content/tutorial/toh-pt5.md b/aio/content/tutorial/toh-pt5.md index 4e90030e49..22b3e1e13c 100644 --- a/aio/content/tutorial/toh-pt5.md +++ b/aio/content/tutorial/toh-pt5.md @@ -47,73 +47,85 @@ Before continuing with the Tour of Heroes, verify that you have the following st - +
- +
angular-tour-of-heroes - +
+ +
+ +
src - +
+ +
+ +
app - +
+ +
+ +
app.component.ts - +
- +
app.module.ts - +
- +
hero.service.ts - +
- +
hero.ts - +
- +
hero-detail.component.ts - +
- +
mock-heroes.ts - +
- +
- +
main.ts - +
- +
index.html - +
- +
styles.css - +
- +
systemjs.config.js - +
- +
tsconfig.json - +
- +
- +
node_modules ... - +
- +
package.json - +
- +
- +
@@ -1223,113 +1235,125 @@ Review the sample source code in the for this page Verify that you have the following structure: - +
- +
angular-tour-of-heroes - +
+ +
+ +
src - +
+ +
+ +
app - +
+ +
+ +
app.component.css - +
- +
app.component.ts - +
- +
app.module.ts - +
- +
app-routing.module.ts - +
- +
dashboard.component.css - +
- +
dashboard.component.html - +
- +
dashboard.component.ts - +
- +
hero.service.ts - +
- +
hero.ts - +
- +
hero-detail.component.css - +
- +
hero-detail.component.html - +
- +
hero-detail.component.ts - +
- +
heroes.component.css - +
- +
heroes.component.html - +
- +
heroes.component.ts - +
- +
mock-heroes.ts - +
- +
- +
main.ts - +
- +
index.html - +
- +
styles.css - +
- +
systemjs.config.js - +
- +
tsconfig.json - +
- +
- +
node_modules ... - +
- +
package.json - +
- +
- +
diff --git a/aio/content/tutorial/toh-pt6.md b/aio/content/tutorial/toh-pt6.md index 70b0838a97..fa757961d1 100644 --- a/aio/content/tutorial/toh-pt6.md +++ b/aio/content/tutorial/toh-pt6.md @@ -711,129 +711,141 @@ Review the sample source code in the for this page Verify that you have the following structure: - +
- +
angular-tour-of-heroes - +
+ +
+ +
src - +
+ +
+ +
app - +
+ +
+ +
app.component.ts - +
- +
app.component.css - +
- +
app.module.ts - +
- +
app-routing.module.ts - +
- +
dashboard.component.css - +
- +
dashboard.component.html - +
- +
dashboard.component.ts - +
- +
hero.ts - +
- +
hero-detail.component.css - +
- +
hero-detail.component.html - +
- +
hero-detail.component.ts - +
- +
hero-search.component.html (new) - +
- +
hero-search.component.css (new) - +
- +
hero-search.component.ts (new) - +
- +
hero-search.service.ts (new) - +
- +
hero.service.ts - +
- +
heroes.component.css - +
- +
heroes.component.html - +
- +
heroes.component.ts - +
- +
in-memory-data.service.ts (new) - +
- +
- +
main.ts - +
- +
index.html - +
- +
styles.css - +
- +
systemjs.config.js - +
- +
tsconfig.json - +
- +
- +
node_modules ... - +
- +
package.json - +
- +
- +