angular-docs-cn/public/docs/ts/latest/guide/setup-systemjs-anatomy.jade

168 lines
5.9 KiB
Plaintext

block includes
include ../_util-fns
:marked
The documentation [setup](setup.html) procedures install a _lot_ of files,
Most of them can be safely ignored.
Application files _inside the_ **`src/`** and **`e2e/`** folders matter most to developers.
Files _outside_ those folders condition the development environment.
They rarely change and you may never view or modify them.
If you do, this page can help you understand their purpose.
style td, th {vertical-align: top}
table(width="100%")
col(width="10%")
col(width="90%")
tr
th File
th Purpose
tr
td <code>src/app/...</code>
td
:marked
Your Angular application files go here.
Ships with the "Hello Angular" sample's
`AppComponent`, `AppModule`, a component unit test (`app.component.spec.ts`), and
the bootstrap file, `main.ts`.
Try the <live-example name="setup">sample application</live-example>
and the <live-example name="setup" plnkr="quickstart-specs">unit test</live-example>
as _live examples_.
tr
td <code>e2e/...</code>
td
:marked
_End-to-end_ (e2e) tests of your application,
written in Jasmine and run by the
<a href="http://www.protractortest.org/" target="_blank" title="Protractor: end-to-end testing for Angular">protractor</a>
e2e test runner.
Initialized with an e2e test for the "Hello Angular" sample.
tr
td <code>node_modules/...</code>
td
:marked
The _npm_ packages installed with the `npm install` command.
tr
td
code.
.editorconfig<br>
.git/...<br>
.gitignore<br>
.travis.yml
td
:marked
Tooling configuration files and folders.
Ignore them until you have a compelling reason to do otherwise.
tr
td <code>CHANGELOG.md</code>
td
:marked
The history of changes to the _QuickStart_ repository.
Delete or ignore.
tr
td <code>favicon.ico</code>
td
:marked
The application icon that appears in the browser tab.
tr
td <code>index.html</code>
td
:marked
The application host page.
It loads a few essential scripts in a prescribed order.
Then it boots the application, placing the root `AppComponent`
in the custom `<my-app>` body tag.
The same `index.html` satisfies all documentation application samples.
tr
td <code>karma.conf.js</code>
td
:marked
Configuration for the <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma unit test runner">karma</a>
test runner described in the [Testing](testing.html) guide.
tr
td <code>karma-test-shim.js</code>
td
:marked
Script to run <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma unit test runner">karma</a>
with SystemJS as described in the [Testing](testing.html) guide.
tr
td <code>non-essential-files.txt</code>
td
:marked
A list of files that you can delete if you want to purge your setup of the
original QuickStart Seed testing and git maintainence artifacts.
See instructions in the optional
[_Deleting non-essential files_](setup.html#non-essential "Setup: Deleting non-essential files") section.
*Do this only in the beginning to avoid accidentally deleting your own tests and git setup!*
tr
td <code>LICENSE</code>
td
:marked
The open source MIT license to use this setup code in your application.
tr
td <code>package.json</code>
td
:marked
Identifies `npm `package dependencies for the project.
Contains command scripts for running the application,
running tests, and more. Enter `npm run` for a listing.
<a href="https://github.com/angular/quickstart/blob/master/README.md#npm-scripts"
target="_blank" title="npm scripts for Angular documentation samples">Read more</a> about them.
tr
td <code>protractor.config.js</code>
td
:marked
Configuration for the
<a href="http://www.protractortest.org/" target="_blank" title="Protractor: end-to-end testing for Angular">protractor</a>
_end-to-end_ (e2e) test runner.
tr
td <code>README.md</code>
td
:marked
Instruction for using this git repository in your project.
Worth reading before deleting.
tr
td <code>styles.css</code>
td
:marked
Global styles for the application. Initialized with an `<h1>` style for the QuickStart demo.
tr
td <code>systemjs<br>.config.js</code>
td
:marked
Tells the **SystemJS** module loader where to find modules
referenced in JavaScript `import` statements such as
code-example(language="ts").
import { Component } from '@angular/core;
:marked
Don't touch this file unless you are fully versed in SystemJS configuration.
tr
td <code>systemjs<br>.config.extras.js</code>
td
:marked
Optional extra SystemJS configuration.
A way to add SystemJS mappings, such as for appliation _barrels_,
without changing the original `system.config.js`.
tr
td <code>tsconfig.json</code>
td
:marked
Tells the TypeScript compiler how to transpile TypeScript source files
into JavaScript files that run in all modern browsers.
tr
td <code>tslint.json</code>
td
:marked
The `npm` installed TypeScript linter inspects your TypeScript code
and complains when you violate one of its rules.
This file defines linting rules favored by the
[Angular style guide](style-guide.html) and by the authors of the documentation.