diff --git a/aio/content/guide/architecture.md b/aio/content/guide/architecture.md
index 3d935b464c..81a3bc1df9 100644
--- a/aio/content/guide/architecture.md
+++ b/aio/content/guide/architecture.md
@@ -38,7 +38,7 @@ This page introduces modules; the [Angular modules](guide/ngmodule) page covers
-Every Angular app has at least one Angular module class, [the _root module_](guide/appmodule "AppModule: the root module"),
+Every Angular app has at least one Angular module class, [the _root module_](guide/bootstrapping "AppModule: the root module"),
conventionally named `AppModule`.
While the _root module_ may be the only module in a small application, most apps have many more
diff --git a/aio/content/guide/appmodule.md b/aio/content/guide/bootstrapping.md
similarity index 91%
rename from aio/content/guide/appmodule.md
rename to aio/content/guide/bootstrapping.md
index da07541c62..9769cba8b1 100644
--- a/aio/content/guide/appmodule.md
+++ b/aio/content/guide/bootstrapping.md
@@ -1,8 +1,8 @@
-# AppModule: the root module
+# Bootstrapping
An Angular module class describes how the application parts fit together.
-Every application has at least one Angular module, the _root_ module
-that you [bootstrap](guide/appmodule#main) to launch the application.
+Every application has at least one Angular module, the _root_ module
+that you [bootstrap](guide/bootstrapping#main) to launch the application.
You can call it anything you want. The conventional name is `AppModule`.
The [setup](guide/setup) instructions produce a new project with the following minimal `AppModule`.
@@ -10,7 +10,6 @@ You'll evolve this module as your application grows.
-
@@ -26,7 +25,7 @@ The `@NgModule` decorator identifies `AppModule` as an Angular module class (als
* **_bootstrap_** — the _root_ component that Angular creates and inserts into the `index.html` host web page.
The [Angular Modules (NgModule)](guide/ngmodule) guide dives deeply into the details of Angular modules.
-All you need to know at the moment is a few basics about these three properties.
+All you need to know at the moment is a few basics about these three properties.
{@a imports}
@@ -35,7 +34,7 @@ All you need to know at the moment is a few basics about these three properties.
### The _imports_ array
Angular modules are a way to consolidate features that belong together into discrete units.
-Many features of Angular itself are organized as Angular modules.
+Many features of Angular itself are organized as Angular modules.
HTTP services are in the `HttpModule`. The router is in the `RouterModule`.
Eventually you may create a feature module.
@@ -67,7 +66,7 @@ are unrelated and have completely different jobs.
The _JavaScript_ `import` statements give you access to symbols _exported_ by other files
so you can reference them within _this_ file.
-You add `import` statements to almost every application file.
+You add `import` statements to almost every application file.
They have nothing to do with Angular and Angular knows nothing about them.
The _module's_ `imports` array appears _exclusively_ in the `@NgModule` metadata object.
@@ -86,10 +85,10 @@ that the application needs to function properly.
You tell Angular which components belong to the `AppModule` by listing it in the module's `declarations` array.
As you create more components, you'll add them to `declarations`.
-You must declare _every_ component in an `NgModule` class.
+You must declare _every_ component in an `NgModule` class.
If you use a component without declaring it, you'll see a clear error message in the browser console.
-You'll learn to create two other kinds of classes —
+You'll learn to create two other kinds of classes —
[directives](guide/attribute-directives) and [pipes](guide/pipes) —
that you must also add to the `declarations` array.
@@ -98,7 +97,7 @@ that you must also add to the `declarations` array.
-**Only _declarables_** — _components_, _directives_ and _pipes_ — belong in the `declarations` array.
+**Only _declarables_** — _components_, _directives_ and _pipes_ — belong in the `declarations` array.
Do not put any other kind of class in `declarations`; _not_ `NgModule` classes, _not_ service classes, _not_ model classes.
@@ -111,14 +110,14 @@ Do not put any other kind of class in `declarations`; _not_ `NgModule` classes,
### The _bootstrap_ array
-You launch the application by [_bootstrapping_](guide/appmodule#main) the root `AppModule`.
+You launch the application by [_bootstrapping_](guide/bootstrapping#main) the root `AppModule`.
Among other things, the _bootstrapping_ process creates the component(s) listed in the `bootstrap` array
and inserts each one into the browser DOM.
Each bootstrapped component is the base of its own tree of components.
Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree.
-While you can put more than one component tree on a host web page, that's not typical.
+While you can put more than one component tree on a host web page, that's not typical.
Most applications have only one component tree and they bootstrap a single _root_ component.
You can call the one _root_ component anything you want but most developers call it `AppComponent`.
@@ -143,7 +142,7 @@ The variations depend upon how you want to compile the application and where you
In the beginning, you will compile the application dynamically with the _Just-in-Time (JIT)_ compiler
and you'll run it in a browser. You can learn about other options later.
-The recommended place to bootstrap a JIT-compiled browser application is in a separate file
+The recommended place to bootstrap a JIT-compiled browser application is in a separate file
in the `src` folder named `src/main.ts`
@@ -156,10 +155,10 @@ This code creates a browser platform for dynamic (JIT) compilation and
bootstraps the `AppModule` described above.
The _bootstrapping_ process sets up the execution environment,
-digs the _root_ `AppComponent` out of the module's `bootstrap` array,
+digs the _root_ `AppComponent` out of the module's `bootstrap` array,
creates an instance of the component and inserts it within the element tag identified by the component's `selector`.
-The `AppComponent` selector — here and in most documentation samples — is `my-app`
+The `AppComponent` selector — here and in most documentation samples — is `my-app`
so Angular looks for a `` tag in the `index.html` like this one ...
diff --git a/aio/content/guide/cli-quickstart.md b/aio/content/guide/cli-quickstart.md
deleted file mode 100644
index 73863f5ad2..0000000000
--- a/aio/content/guide/cli-quickstart.md
+++ /dev/null
@@ -1,617 +0,0 @@
-# CLI QuickStart
-
-Good tools make application development quicker and easier to maintain than
-if you did everything by hand.
-
-The [**Angular CLI**](https://cli.angular.io/) is a **_command line interface_** tool
-that can create a project, add files, and perform a variety of ongoing development tasks such
-as testing, bundling, and deployment.
-
-The goal in this guide is to build and run a simple Angular
-application in TypeScript, using the Angular CLI
-while adhering to the [Style Guide](guide/styleguide) recommendations that
-benefit _every_ Angular project.
-
-By the end of the chapter, you'll have a basic understanding of development with the CLI
-and a foundation for both these documentation samples and for real world applications.
-
-
-
-And you can also download the example.
-
-
-
-
- Step 1. Set up the Development Environment
-
-
-
-
-You need to set up your development environment before you can do anything.
-
-Install **[Node.js® and npm](https://nodejs.org/en/download/)**
-if they are not already on your machine.
-
-
-
-
-
-**Verify that you are running at least node `6.9.x` and npm `3.x.x`**
-by running `node -v` and `npm -v` in a terminal/console window.
-Older versions produce errors, but newer versions are fine.
-
-
-
-
-
-Open a terminal window.
-
-
-Generate a new project and skeleton application by running the following commands:
-
-
-
- ng new my-app
-
-
-
-
-
-
-
-
-
-Patience please.
-It takes time to set up a new project, most of it spent installing npm packages.
-
-
-
-
-
-
-
-
- Step 3: Serve the application
-
-
-
-
-Go to the project directory and launch the server.
-
-
-
- cd my-app
- ng serve --open
-
-
-
-
-
-The `ng serve` command launches the server, watches your files,
-and rebuilds the app as you make changes to those files.
-
-Using the `--open` (or just `-o`) option will automatically open your browser
-on `http://localhost:4200/`.
-
-Your app greets you with a message:
-
-
-
-
-
-
-
-
-
-
- Step 4: Edit your first Angular component
-
-
-
-
-The CLI created the first Angular component for you.
-This is the _root component_ and it is named `app-root`.
-You can find it in `./src/app/app.component.ts`.
-
-
-Open the component file and change the `title` property from _app works!_ to _My First Angular App_:
-
-
-
-
-
-
-The browser reloads automatically with the revised title. That's nice, but it could look better.
-
-Open `src/app/app.component.css` and give the component some style.
-
-
-
-
-
-
-
-
-
-
-
-
-Looking good!
-
-
-
-## What's next?
-That's about all you'd expect to do in a "Hello, World" app.
-
-You're ready to take the [Tour of Heroes Tutorial](tutorial) and build
-a small application that demonstrates the great things you can build with Angular.
-
-Or you can stick around a bit longer to learn about the files in your brand new project.
-
-
-
-## Project file review
-
-An Angular CLI project is the foundation for both quick experiments and enterprise solutions.
-
-The first file you should check out is `README.md`.
-It has some basic information on how to use CLI commands.
-Whenever you want to know more about how Angular CLI works make sure to visit
-[the Angular CLI repository](https://github.com/angular/angular-cli) and
-[Wiki](https://github.com/angular/angular-cli/wiki).
-
-Some of the generated files might be unfamiliar to you.
-
-
-
-### The `src` folder
-Your app lives in the `src` folder.
-All Angular components, templates, styles, images, and anything else your app needs go here.
-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
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- File
-
-
- Purpose
-
-
-
-
-
- `app/app.component.{ts,html,css,spec.ts}`
-
-
-
-
- Defines the `AppComponent` along with an HTML template, CSS stylesheet, and a unit test.
- It is the **root** component of what will become a tree of nested components
- as the application evolves.
-
-
-
-
-
-
- `app/app.module.ts`
-
-
-
-
- Defines `AppModule`, the [root module](guide/appmodule "AppModule: the root module") that tells Angular how to assemble the application.
- Right now it declares only the `AppComponent`.
- Soon there will be more components to declare.
-
-
-
-
-
-
- `assets/*`
-
-
-
-
- A folder where you can put images and anything else to be copied wholesale
- when you build your application.
-
-
-
-
-
-
- `environments/*`
-
-
-
-
- This folder contains one file for each of your destination environments,
- each exporting simple configuration variables to use in your application.
- The files are replaced on-the-fly when you build your app.
- You might use a different API endpoint for development than you do for production
- or maybe different analytics tokens.
- You might even use some mock services.
- Either way, the CLI has you covered.
-
-
-
-
-
-
- `favicon.ico`
-
-
-
-
- Every site wants to look good on the bookmark bar.
- Get started with your very own Angular icon.
-
-
-
-
-
-
- `index.html`
-
-
-
-
- The main HTML page that is served when someone visits your site.
- Most of the time you'll never need to edit it.
- The CLI automatically adds all `js` and `css` files when building your app so you
- never need to add any `<script>` or `<link>` tags here manually.
-
-
-
-
-
-
- `main.ts`
-
-
-
-
- The main entry point for your app.
- Compiles the application with the [JIT compiler](guide/glossary#jit)
- and bootstraps the application's root module (`AppModule`) to run in the browser.
- You can also use the [AOT compiler](guide/glossary#ahead-of-time-aot-compilation)
- without changing any code by passing in `--aot` to `ng build` or `ng serve`.
-
-
-
-
-
-
- `polyfills.ts`
-
-
-
-
- Different browsers have different levels of support of the web standards.
- Polyfills help normalize those differences.
- You should be pretty safe with `core-js` and `zone.js`, but be sure to check out
- the [Browser Support guide](guide/browser-support) for more information.
-
-
-
-
-
-
- `styles.css`
-
-
-
-
- Your global styles go here.
- Most of the time you'll want to have local styles in your components for easier maintenance,
- but styles that affect all of your app need to be in a central place.
-
-
-
-
-
-
- `test.ts`
-
-
-
-
- This is the main entry point for your unit tests.
- It has some custom configuration that might be unfamiliar, but it's not something you'll
- need to edit.
-
-
-
-
-
- `tsconfig.{app|spec}.json`
-
-
-
- TypeScript compiler configuration for the Angular app (`tsconfig.app.json`)
- and for the unit tests (`tsconfig.spec.json`).
-
-
-
-
-
-### The root folder
-
-The `src/` folder is just one of the items inside the project's root folder.
-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
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- File
-
-
- Purpose
-
-
-
-
-
- `e2e/`
-
-
-
-
- Inside `e2e/` live the End-to-End tests.
- They shouldn't be inside `src/` because e2e tests are really a separate app that
- just so happens to test your main app.
- That's also why they have their own `tsconfig.e2e.json`.
-
-
-
-
-
-
- `node_modules/`
-
-
-
-
- `Node.js` creates this folder and puts all third party modules listed in
- `package.json` inside of it.
-
-
-
-
-
- `.angular-cli.json`
-
-
-
-
- Configuration for Angular CLI.
- In this file you can set several defaults and also configure what files are included
- when your project is build.
- Check out the official documentation if you want to know more.
-
-
-
-
-
-
- `.editorconfig`
-
-
-
-
- Simple configuration for your editor to make sure everyone that uses your project
- has the same basic configuration.
- Most editors support an `.editorconfig` file.
- See http://editorconfig.org for more information.
-
-
-
-
-
-
- `.gitignore`
-
-
-
-
- Git configuration to make sure autogenerated files are not commited to source control.
-
-
-
-
-
-
- `karma.conf.js`
-
-
-
-
- Unit test configuration for the [Karma test runner](https://karma-runner.github.io),
- used when running `ng test`.
-
-
-
-
-
-
- `package.json`
-
-
-
-
- `npm` configuration listing the third party packages your project uses.
- You can also add your own [custom scripts](https://docs.npmjs.com/misc/scripts) here.
-
-
-
-
-
-
- `protractor.conf.js`
-
-
-
-
- End-to-end test configuration for [Protractor](http://www.protractortest.org/),
- used when running `ng e2e`.
-
-
-
-
-
-
- `README.md`
-
-
-
-
- Basic documentation for your project, pre-filled with CLI command information.
- Make sure to enhance it with project documentation so that anyone
- checking out the repo can build your app!
-
-
-
-
-
-
- `tsconfig.json`
-
-
-
-
- TypeScript compiler configuration for your IDE to pick up and give you helpful tooling.
-
-
-
-
-
-
- `tslint.json`
-
-
-
-
- Linting configuration for [TSLint](https://palantir.github.io/tslint/) together with
- [Codelyzer](http://codelyzer.com/), used when running `ng lint`.
- Linting helps keep your code style consistent.
-
-
-
-
-
-
-
-### Next Step
-
-If you're new to Angular, continue with the
-[tutorial](tutorial "Tour of Heroes tutorial").
-You can skip the "Setup" step since you're already using the Angular CLI setup.
-
-
diff --git a/aio/content/guide/ngmodule.md b/aio/content/guide/ngmodule.md
index 13535f4628..4d6b9addcf 100644
--- a/aio/content/guide/ngmodule.md
+++ b/aio/content/guide/ngmodule.md
@@ -12,7 +12,7 @@ making some of them public so external components can use them.
And there are many more options covered here.
Before reading this page, read the
-[The Root Module](guide/appmodule) page, which introduces NgModules and the essentials
+[The Root Module](guide/bootstrapping) page, which introduces NgModules and the essentials
of creating and maintaining a single root `AppModule` for the entire application.
This page covers NgModules in greater depth.
diff --git a/aio/content/guide/quickstart.md b/aio/content/guide/quickstart.md
index 736e722613..37b5a80504 100644
--- a/aio/content/guide/quickstart.md
+++ b/aio/content/guide/quickstart.md
@@ -1,79 +1,617 @@
-
QuickStart
+# QuickStart
-Angular applications are made up of _components_.
-A _component_ is the combination of an HTML template and a component class that controls a portion of the screen. Here is an example of a component that displays a simple string:
+Good tools make application development quicker and easier to maintain than
+if you did everything by hand.
+
+The [**Angular CLI**](https://cli.angular.io/) is a **_command line interface_** tool
+that can create a project, add files, and perform a variety of ongoing development tasks such
+as testing, bundling, and deployment.
+
+The goal in this guide is to build and run a simple Angular
+application in TypeScript, using the Angular CLI
+while adhering to the [Style Guide](guide/styleguide) recommendations that
+benefit _every_ Angular project.
+
+By the end of the chapter, you'll have a basic understanding of development with the CLI
+and a foundation for both these documentation samples and for real world applications.
+
+
+
+And you can also download the example.
-
+
+
+ Step 1. Set up the Development Environment
+
+
+
+
+You need to set up your development environment before you can do anything.
+
+Install **[Node.js® and npm](https://nodejs.org/en/download/)**
+if they are not already on your machine.
+
+
+
+
+
+**Verify that you are running at least node `6.9.x` and npm `3.x.x`**
+by running `node -v` and `npm -v` in a terminal/console window.
+Older versions produce errors, but newer versions are fine.
+
+
+
+
+
+Open a terminal window.
+
+
+Generate a new project and skeleton application by running the following commands:
+
+
+
+ ng new my-app
+
+
+
+
+
-Try this **QuickStart example on Plunker** without installing anything.
-Try it locally with the [***QuickStart seed***](guide/setup "Setup for local development with the QuickStart seed")
-and prepare for development of a real Angular application.
+Patience please.
+It takes time to set up a new project, most of it spent installing npm packages.
-Every component begins with an `@Component` [decorator](guide/glossary#decorator '"decorator" explained')
-function that takes a _metadata_ object. The metadata object describes how the HTML template and component class work together.
-The `selector` property tells Angular to display the component inside a custom `` tag in the `index.html`.
+
+ Step 3: Serve the application
+
-
+
+
+Go to the project directory and launch the server.
+
+
+
+ cd my-app
+ ng serve --open
-The `template` property defines a message inside an `
` header.
-The message starts with "Hello" and ends with `{{name}}`,
-which is an Angular [interpolation binding](guide/displaying-data) expression.
-At runtime, Angular replaces `{{name}}` with the value of the component's `name` property.
-Interpolation binding is one of many Angular features you'll discover in this documentation.
+The `ng serve` command launches the server, watches your files,
+and rebuilds the app as you make changes to those files.
+
+Using the `--open` (or just `-o`) option will automatically open your browser
+on `http://localhost:4200/`.
+
+Your app greets you with a message:
-In the example, change the component class's `name` property from `'Angular'` to `'World'` and see what happens.
-
-
-
+
+
+
-
- A word about TypeScript
-
+
+
+ Step 4: Edit your first Angular component
+
-
- This example is written in TypeScript, a superset of JavaScript. Angular
- uses TypeScript because its types make it easy to support developer productivity with tooling. You can also write Angular code in JavaScript; [this guide](guide/ts-to-js] explains how.
+The CLI created the first Angular component for you.
+This is the _root component_ and it is named `app-root`.
+You can find it in `./src/app/app.component.ts`.
-
+
+Open the component file and change the `title` property from _app works!_ to _My First Angular App_:
+
+
+
+The browser reloads automatically with the revised title. That's nice, but it could look better.
+
+Open `src/app/app.component.css` and give the component some style.
+
+
+
+
+
+
+
+
+
+
+
+
+Looking good!
+
+
+
+## What's next?
+That's about all you'd expect to do in a "Hello, World" app.
+
+You're ready to take the [Tour of Heroes Tutorial](tutorial) and build
+a small application that demonstrates the great things you can build with Angular.
+
+Or you can stick around a bit longer to learn about the files in your brand new project.
+
+
+
+## Project file review
+
+An Angular CLI project is the foundation for both quick experiments and enterprise solutions.
+
+The first file you should check out is `README.md`.
+It has some basic information on how to use CLI commands.
+Whenever you want to know more about how Angular CLI works make sure to visit
+[the Angular CLI repository](https://github.com/angular/angular-cli) and
+[Wiki](https://github.com/angular/angular-cli/wiki).
+
+Some of the generated files might be unfamiliar to you.
+
+
+
+### The `src` folder
+Your app lives in the `src` folder.
+All Angular components, templates, styles, images, and anything else your app needs go here.
+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
+
+
+
+
+
+
+
+
+
+
+
+
+ File
+
+
+ Purpose
+
+
+
+
+
+ `app/app.component.{ts,html,css,spec.ts}`
+
+
+
+
+ Defines the `AppComponent` along with an HTML template, CSS stylesheet, and a unit test.
+ It is the **root** component of what will become a tree of nested components
+ as the application evolves.
+
+
+
+
+
+
+ `app/app.module.ts`
+
+
+
+
+ Defines `AppModule`, the [root module](guide/bootstrapping "AppModule: the root module") that tells Angular how to assemble the application.
+ Right now it declares only the `AppComponent`.
+ Soon there will be more components to declare.
+
+
+
+
+
+
+ `assets/*`
+
+
+
+
+ A folder where you can put images and anything else to be copied wholesale
+ when you build your application.
+
+
+
+
+
+
+ `environments/*`
+
+
+
+
+ This folder contains one file for each of your destination environments,
+ each exporting simple configuration variables to use in your application.
+ The files are replaced on-the-fly when you build your app.
+ You might use a different API endpoint for development than you do for production
+ or maybe different analytics tokens.
+ You might even use some mock services.
+ Either way, the CLI has you covered.
+
+
+
+
+
+
+ `favicon.ico`
+
+
+
+
+ Every site wants to look good on the bookmark bar.
+ Get started with your very own Angular icon.
+
+
+
+
+
+
+ `index.html`
+
+
+
+
+ The main HTML page that is served when someone visits your site.
+ Most of the time you'll never need to edit it.
+ The CLI automatically adds all `js` and `css` files when building your app so you
+ never need to add any `<script>` or `<link>` tags here manually.
+
+
+
+
+
+
+ `main.ts`
+
+
+
+
+ The main entry point for your app.
+ Compiles the application with the [JIT compiler](guide/glossary#jit)
+ and bootstraps the application's root module (`AppModule`) to run in the browser.
+ You can also use the [AOT compiler](guide/glossary#ahead-of-time-aot-compilation)
+ without changing any code by passing in `--aot` to `ng build` or `ng serve`.
+
+
+
+
+
+
+ `polyfills.ts`
+
+
+
+
+ Different browsers have different levels of support of the web standards.
+ Polyfills help normalize those differences.
+ You should be pretty safe with `core-js` and `zone.js`, but be sure to check out
+ the [Browser Support guide](guide/browser-support) for more information.
+
+
+
+
+
+
+ `styles.css`
+
+
+
+
+ Your global styles go here.
+ Most of the time you'll want to have local styles in your components for easier maintenance,
+ but styles that affect all of your app need to be in a central place.
+
+
+
+
+
+
+ `test.ts`
+
+
+
+
+ This is the main entry point for your unit tests.
+ It has some custom configuration that might be unfamiliar, but it's not something you'll
+ need to edit.
+
+
+
+
+
+ `tsconfig.{app|spec}.json`
+
+
+
+ TypeScript compiler configuration for the Angular app (`tsconfig.app.json`)
+ and for the unit tests (`tsconfig.spec.json`).
+
+
+
+
+
+### The root folder
+
+The `src/` folder is just one of the items inside the project's root folder.
+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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ File
+
+
+ Purpose
+
+
+
+
+
+ `e2e/`
+
+
+
+
+ Inside `e2e/` live the End-to-End tests.
+ They shouldn't be inside `src/` because e2e tests are really a separate app that
+ just so happens to test your main app.
+ That's also why they have their own `tsconfig.e2e.json`.
+
+
+
+
+
+
+ `node_modules/`
+
+
+
+
+ `Node.js` creates this folder and puts all third party modules listed in
+ `package.json` inside of it.
+
+
+
+
+
+ `.angular-cli.json`
+
+
+
+
+ Configuration for Angular CLI.
+ In this file you can set several defaults and also configure what files are included
+ when your project is build.
+ Check out the official documentation if you want to know more.
+
+
+
+
+
+
+ `.editorconfig`
+
+
+
+
+ Simple configuration for your editor to make sure everyone that uses your project
+ has the same basic configuration.
+ Most editors support an `.editorconfig` file.
+ See http://editorconfig.org for more information.
+
+
+
+
+
+
+ `.gitignore`
+
+
+
+
+ Git configuration to make sure autogenerated files are not commited to source control.
+
+
+
+
+
+
+ `karma.conf.js`
+
+
+
+
+ Unit test configuration for the [Karma test runner](https://karma-runner.github.io),
+ used when running `ng test`.
+
+
+
+
+
+
+ `package.json`
+
+
+
+
+ `npm` configuration listing the third party packages your project uses.
+ You can also add your own [custom scripts](https://docs.npmjs.com/misc/scripts) here.
+
+
+
+
+
+
+ `protractor.conf.js`
+
+
+
+
+ End-to-end test configuration for [Protractor](http://www.protractortest.org/),
+ used when running `ng e2e`.
+
+
+
+
+
+
+ `README.md`
+
+
+
+
+ Basic documentation for your project, pre-filled with CLI command information.
+ Make sure to enhance it with project documentation so that anyone
+ checking out the repo can build your app!
+
+
+
+
+
+
+ `tsconfig.json`
+
+
+
+
+ TypeScript compiler configuration for your IDE to pick up and give you helpful tooling.
+
+
+
+
+
+
+ `tslint.json`
+
+
+
+
+ Linting configuration for [TSLint](https://palantir.github.io/tslint/) together with
+ [Codelyzer](http://codelyzer.com/), used when running `ng lint`.
+ Linting helps keep your code style consistent.
+
+
+
+
+
+### Next Step
-
-### Next step
-
-Start the [**tutorial**](tutorial "Tour of Heroes tutorial").
+If you're new to Angular, continue with the
+[tutorial](tutorial "Tour of Heroes tutorial").
+You can skip the "Setup" step since you're already using the Angular CLI setup.
-
diff --git a/aio/content/guide/setup.md b/aio/content/guide/setup.md
index 179a92595f..b0e179739c 100644
--- a/aio/content/guide/setup.md
+++ b/aio/content/guide/setup.md
@@ -3,11 +3,11 @@
{@a develop-locally}
The QuickStart live-coding example is an Angular _playground_.
-It's not where you'd develop a real application.
+It's not where you'd develop a real application.
You [should develop locally](guide/setup#why-locally "Why develop locally") on your own machine ... and that's also how we think you should learn Angular.
Setting up a new project on your machine is quick and easy with the **QuickStart seed**,
-maintained [on github](https://github.com/angular/quickstart "Install the github QuickStart repo").
+maintained [on github](https://github.com/angular/quickstart "Install the github QuickStart repo").
Make sure you have [node and npm installed](guide/setup#install-prerequisites "What if you don't have node and npm?").
@@ -124,7 +124,7 @@ Open a terminal window in the project folder and enter the following commands fo
The **QuickStart seed** contains the same application as the QuickStart playground.
But its true purpose is to provide a solid foundation for _local_ development.
-Consequently, there are _many more files_ in the project folder on your machine,
+Consequently, there are _many more files_ in the project folder on your machine,
most of which you can [learn about later](guide/setup-systemjs-anatomy "Setup Anatomy").
@@ -187,7 +187,7 @@ Focus on the following three TypeScript (`.ts`) files in the **`/src`** folder.
-All guides and cookbooks have _at least these core files_.
+All guides and cookbooks have _at least these core files_.
Each file has a distinct purpose and evolves independently as the application grows.
Files outside `src/` concern building, deploying, and testing your app.
@@ -239,7 +239,7 @@ The following are all in `src/`
Defines the same `AppComponent` as the one in the QuickStart playground.
It is the **root** component of what will become a tree of nested components
- as the application evolves.
+ as the application evolves.
@@ -253,7 +253,7 @@ The following are all in `src/`
- Defines `AppModule`, the [root module](guide/appmodule "AppModule: the root module") that tells Angular how to assemble the application.
+ Defines `AppModule`, the [root module](guide/bootstrapping "AppModule: the root module") that tells Angular how to assemble the application.
Right now it declares only the `AppComponent`.
Soon there will be more components to declare.
@@ -270,7 +270,7 @@ The following are all in `src/`
Compiles the application with the [JIT compiler](guide/glossary#jit) and
- [bootstraps](guide/appmodule#main "bootstrap the application")
+ [bootstraps](guide/bootstrapping#main "bootstrap the application")
the application's main module (`AppModule`) to run in the browser.
The JIT compiler is a reasonable choice during the development of most projects and
it's the only viable choice for a sample running in a _live-coding_ environment like Plunker.
@@ -315,8 +315,8 @@ Get them now if they're not already installed on your machine.
by running the commands `node -v` and `npm -v` in a terminal/console window.
Older versions produce errors.
-We recommend [nvm](https://github.com/creationix/nvm) for managing multiple versions of node and npm.
-You may need [nvm](https://github.com/creationix/nvm) if you already have projects running on your machine that
+We recommend [nvm](https://github.com/creationix/nvm) for managing multiple versions of node and npm.
+You may need [nvm](https://github.com/creationix/nvm) if you already have projects running on your machine that
use other versions of node and npm.
@@ -334,7 +334,7 @@ You can play with the sample code, share your changes with friends, and download
The [QuickStart](guide/quickstart "Angular QuickStart Playground") shows just the `AppComponent` file.
It creates the equivalent of `app.module.ts` and `main.ts` internally _for the playground only_.
so the reader can discover Angular without distraction.
-The other samples are based on the QuickStart seed.
+The other samples are based on the QuickStart seed.
As much fun as this is ...
@@ -343,7 +343,7 @@ As much fun as this is ...
* transpiling TypeScript in the browser is slow
* the type support, refactoring, and code completion only work in your local IDE
-Use the live coding environment as a _playground_,
+Use the live coding environment as a _playground_,
a place to try the documentation samples and experiment on your own.
It's the perfect place to reproduce a bug when you want to
file a documentation issue or
diff --git a/aio/content/marketing/docs.md b/aio/content/marketing/docs.md
index aa376a29a7..e6d900c3ab 100644
--- a/aio/content/marketing/docs.md
+++ b/aio/content/marketing/docs.md
@@ -16,8 +16,6 @@ Angular is a platform that makes it easy to build applications with the web. Ang
-
-