docs(npm-packages): edit copy to guidelines (#3361)

This commit is contained in:
Kapunahele Wong 2017-03-08 16:30:50 -05:00 committed by Jules Kremer
parent a6478bcc9d
commit 66562c8710
1 changed files with 112 additions and 107 deletions

View File

@ -14,20 +14,23 @@ include ../_util-fns
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 use other versions of node and npm.
Consider using [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.
:marked
We recommend a comprehensive starter-set of packages as specified in the `dependencies` and `devDependencies`
sections of the <a href="https://docs.npmjs.com/files/package.json" target="_blank">package.json</a> file
installed as described during [Setup](setup.html).
:marked
You can use other packages but we recommend *this particular set* to start with because (a) they work well together and
(b) they include everything you'll need to build and run the sample applications in this series.
During [Setup](setup.html), a <a href="https://docs.npmjs.com/files/package.json" target="_blank">package.json</a>
file is installed with a comprehensive starter set of
packages as specified in the `dependencies` and `devDependencies` sections.
You can use other packages but the packages in _this particular set_ work well together and include
everything you need to build and run the sample applications in this series.
.l-sub-section
:marked
Note: A cookbook or guide page may require an additional library such as *jQuery*.
:marked
You'll install more than you need for QuickStart.
You'll install more than you need for the QuickStart guide.
No worries!
You only serve to the client those packages that the application actually requests.
@ -51,39 +54,42 @@ a(id="dependencies")
## *dependencies*
The `dependencies` section of `package.json` contains:
* ***Features*** - Feature packages give the application framework and utility capabilities.
* ***Features***: Feature packages give the application framework and utility capabilities.
* ***Polyfills*** - Polyfills plug gaps in the browser's JavaScript implementation.
* ***Polyfills***: Polyfills plug gaps in the browser's JavaScript implementation.
* ***Other*** - Other libraries that support the application such as `bootstrap` for HTML widgets and styling.
* ***Other***: Other libraries that support the application such as `bootstrap` for HTML widgets and styling.
.l-main-section
:marked
### Feature Packages
***@angular/core*** - Critical runtime parts of the framework needed by every application.
***@angular/core***: Critical runtime parts of the framework needed by every application.
Includes all metadata decorators, `Component`, `Directive`, dependency injection, and the component lifecycle hooks.
***@angular/common*** - The commonly needed services, pipes, and directives provided by the Angular team.
***@angular/common***: The commonly needed services, pipes, and directives provided by the Angular team.
***@angular/compiler*** - Angular's *Template Compiler*.
***@angular/compiler***: Angular's *Template Compiler*.
It understands templates and can convert them to code that makes the application run and render.
Typically you dont interact with the compiler directly; rather, you use it indirectly via `platform-browser-dynamic` or the offline template compiler.
***@angular/platform-browser*** - Everything DOM and browser related, especially the pieces that help render into DOM.
This package also includes the bootstrapStatic method for bootstrapping applications for production builds that pre-compile templates offline.
***@angular/platform-browser***: Everything DOM and browser related, especially
the pieces that help render into the DOM.
This package also includes the `bootstrapStatic()` method
for bootstrapping applications for production builds that pre-compile templates offline.
***@angular/platform-browser-dynamic*** - Includes [Providers](../api/core/index/Provider-type-alias.html) and a [bootstrap](ngmodule.html#bootstrap) method for applications that
***@angular/platform-browser-dynamic***: Includes [Providers](../api/core/index/Provider-type-alias.html)
and a [bootstrap](ngmodule.html#bootstrap) method for applications that
compile templates on the client. Dont use offline compilation.
Use this package for bootstrapping during development and for bootstrapping plunker samples.
***@angular/http*** - Angular's http client.
***@angular/http***: Angular's HTTP client.
***@angular/router*** - Component router.
***@angular/router***: Component router.
***@angular/upgrade*** - Set of utilities for upgrading AngularJS applications to Angular.
***@angular/upgrade***: Set of utilities for upgrading AngularJS applications to Angular.
***[system.js](https://github.com/systemjs/systemjs)*** - A dynamic module loader compatible with the
***[system.js](https://github.com/systemjs/systemjs)***: A dynamic module loader compatible with the
[ES2015 module](http://www.2ality.com/2014/09/es6-modules-final.html) specification.
Other viable choices include the well-regarded [webpack](https://webpack.github.io/).
@ -105,16 +111,16 @@ a(id="polyfills")
:marked
For background on this requirement, see [Why peerDependencies?](#why-peer-dependencies).
:marked
***core-js*** - Patches the global context (window) with essential features of ES2015 (ES6).
***core-js***: Patches the global context (window) with essential features of ES2015 (ES6).
You may substitute an alternative polyfill that provides the same core APIs.
When these APIs are implemented by the major browsers, this dependency will become unnecessary.
***rxjs*** - A polyfill for the [Observables specification](https://github.com/zenparsing/es-observable) currently before the
***rxjs***: A polyfill for the [Observables specification](https://github.com/zenparsing/es-observable) currently before the
[TC39](http://www.ecma-international.org/memento/TC39.htm) committee that determines standards for the JavaScript language.
You can pick a preferred version of *rxjs* (within a compatible version range)
without waiting for Angular updates.
***zone.js*** - A polyfill for the [Zone specification](https://gist.github.com/mhevery/63fdcdf7c65886051d55) currently before the
***zone.js***: A polyfill for the [Zone specification](https://gist.github.com/mhevery/63fdcdf7c65886051d55) currently before the
[TC39](http://www.ecma-international.org/memento/TC39.htm) committee that determines standards for the JavaScript language.
You can pick a preferred version of *zone.js* to use (within a compatible version range)
without waiting for Angular updates.
@ -124,12 +130,12 @@ a(id="other")
:marked
### Other helper libraries
***angular-in-memory-web-api*** - An Angular-supported library that simulates a remote server's web api
without requiring an actual server or real http calls.
Good for demos, samples, and early stage development (before we even have a server).
Read about it in the [Http Client](server-communication.html#appendix-tour-of-heroes-in-memory-server) page.
***angular-in-memory-web-api***: An Angular-supported library that simulates a remote server's web api
without requiring an actual server or real HTTP calls.
Good for demos, samples, and early stage development (before you even have a server).
Read about it in the [HTTP Client](server-communication.html#in-mem-web-api) page.
***bootstrap*** - [Bootstrap](http://getbootstrap.com/) is a popular HTML and CSS framework for designing responsive web apps.
***bootstrap***: [Bootstrap](http://getbootstrap.com/) is a popular HTML and CSS framework for designing responsive web apps.
Some of the samples improve their appearance with *bootstrap*.
a(id="dev-dependencies")
@ -139,33 +145,32 @@ a(id="dev-dependencies")
The packages listed in the *devDependencies* section of the `package.json` help you develop the application.
You don't have to deploy them with the production application although there is no harm in doing so.
***[concurrently](https://www.npmjs.com/package/concurrently)*** -
***[concurrently](https://www.npmjs.com/package/concurrently)***:
A utility to run multiple *npm* commands concurrently on OS/X, Windows, and Linux operating systems.
***[lite-server](https://www.npmjs.com/package/lite-server)*** -
***[lite-server](https://www.npmjs.com/package/lite-server)***:
A light-weight, static file server, by [John Papa](http://johnpapa.net/)
with excellent support for Angular apps that use routing.
***[typescript](https://www.npmjs.com/package/typescript)*** -
***[typescript](https://www.npmjs.com/package/typescript)***:
the TypeScript language server, including the *tsc* TypeScript compiler.
***@types/\**** - TypeScript definition files.
Learn more about it in the [TypeScript Configuration](typescript-configuration.html#typings) chapter.
***@types/\****: TypeScript definition files.
Learn more about it in the [TypeScript Configuration](typescript-configuration.html#typings) guide.
.l-main-section
a(id="why-peer-dependencies")
:marked
## Why *peerDependencies*?
There isn't a *peerDependencies* section in the QuickStart `package.json`.
There isn't a [*peerDependencies*](https://nodejs.org/en/blog/npm/peer-dependencies/) section in the QuickStart `package.json`.
But Angular has a *peerDependencies* section in
*its* package.json, which has important consequences for your application.
*its* `package.json`, which has important consequences for your application.
It explains why you load the [polyfill](#polyfills) *dependency* packages in the QuickStart `package.json`,
This section explains why you load the [polyfill](#polyfills) *dependency*
packages in the QuickStart application's `package.json`,
and why you'll need those packages in your own applications.
An explanation of [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) follows.
Packages depend on other packages. For example, your application depends on the Angular package.
Two packages, "A" and "B", could depend on the same third package "C".
@ -189,7 +194,7 @@ a(id="why-peer-dependencies")
The Angular `package.json` specifies several *peer dependency* packages,
each pinned to a particular version of a third-party package.
### We must install Angular's *peerDependencies* ourselves.
### You must install Angular's *peerDependencies* yourself.
When *npm* installs packages listed in *your* `dependencies` section,
it also installs the packages listed within *their* packages `dependencies` sections.