docs(architecture/glossary): describe modules,barrels, and bundles; refer to doc

closes #547
This commit is contained in:
Ward Bell 2015-12-15 16:52:16 -08:00
parent 052d5ec8fe
commit 5de77b7225
2 changed files with 64 additions and 3 deletions

View File

@ -77,14 +77,18 @@ figure
:marked :marked
Some modules are libraries of other modules. Some modules are libraries of other modules.
Angular itself ships as a collection of library modules. Angular itself ships as a collection of library modules called "barrels".
Each Angular library is actually a facade over several feature modules that belong together as a group. Each Angular library is actually a public facade over several logically related private modules.
The `angular2/core` library is the primary Angular library module from which we get most of what we need. The `angular2/core` library is the primary Angular library module from which we get most of what we need.
<br clear="all"> <br clear="all">
There are other important Angular library modules too such as `angular2/common`, `angular2/router`, and `angular2/http`. There are other important Angular library modules too such as `angular2/common`, `angular2/router`, and `angular2/http`.
.l-sub-section
:marked
Learn more about how Angular organizes and distributes modules
in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)".
:marked
We import what we need from an Angular library module in much the same way. We import what we need from an Angular library module in much the same way.
For example, we import the Angular **`Component` *function*** from the *angular2/core* module like this: For example, we import the Angular **`Component` *function*** from the *angular2/core* module like this:
+makeExample('architecture/ts/app/app.component.ts', 'import')(format=".") +makeExample('architecture/ts/app/app.component.ts', 'import')(format=".")

View File

@ -33,6 +33,23 @@
.l-main-section .l-main-section
<a id="B"></a> <a id="B"></a>
:marked
## Barrel
.l-sub-section
:marked
A **barrel** is an Angular library module consisting of a logical grouping of single-purpose modules
such as `Component` and `Directive`.
Familiar barrels include `angular2/core`, `angular2/common`, `angular2/platform/browser`,
`angular2/http`, and `angular2/router`.
Barrels are packaged and shipped as [**bundles**](#bundle) that
we may load with script tags in our `index.html`.
The script, `angular2.dev.js`, is a bundle.
Learn more in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)".
:marked :marked
## Binding ## Binding
.l-sub-section .l-sub-section
@ -55,6 +72,23 @@
One can bootstrap multiple apps in the same `index.html`, each with its own top level root. One can bootstrap multiple apps in the same `index.html`, each with its own top level root.
:marked
## Bundle
.l-sub-section
:marked
Angular JavaScript libraries are shipped in **bundles** within an **npm package**
such as [angular2](https://www.npmjs.com/package/angular2).
The scripts `angular2.dev.js`, `http.js`, `router.js`, and `Rx.js` are
familiar examples of bundles.
A bundle contains one more more [**barrels**](#barrel)
and each barrel contains a collection of logically related [modules](#module)
Familiar barrels include `angular2/core`, `angular2/common`, `angular2/platform/browser`,
`angular2/http`, `angular2/router`.
Learn more in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)".
.l-main-section .l-main-section
<a id="C"></a> <a id="C"></a>
@ -342,6 +376,29 @@
.l-main-section .l-main-section
<a id="M"></a> <a id="M"></a>
:marked
## Module
.l-sub-section
:marked
Angular apps are modular.
In general we assemble our application from many modules both the ones we write ourselves
and the ones we acquire from others.
A typical module is a cohesive block of code dedicated to a single purpose.
A module exports something of value in that code, typically one thing such as a class.
Modules are typically named after the file in which the exported thing is defined.
The Angular [DatePipe](https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/date_pipe.ts)
class belongs to a module named `date_pipe` in the file `date_pipe.ts`.
In general, Angular feature modules such as the `data_pipe` are not exposed directly.
Rather they are grouped together with logically related modules in public-facing **library modules**
called [**barrels**](#barrel).
Learn more in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)".
<a id="N"></a> <a id="N"></a>
<a id="O"></a> <a id="O"></a>
:marked :marked