docs(quickstart.js): fix "faux-pas" typo and revise "module" discussion

closes #648
also delete unused app.js
This commit is contained in:
Ward Bell 2015-12-20 08:31:48 -05:00
parent 2c343081cc
commit bf72ad9d3f
3 changed files with 17 additions and 46 deletions

View File

@ -1,37 +0,0 @@
// #docregion dsl
(function() {
// #docregion class-w-annotations
var AppComponent = ng
.Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
.Class({
constructor: function () { }
});
// #enddocregion class-w-annotations
// #docregion bootstrap
document.addEventListener('DOMContentLoaded', function() {
ng.bootstrap(AppComponent);
});
// #enddocregion bootstrap
})();
// #enddocregion dsl
/* Non DSL Approach */
(function() {
// #docregion no-dsl
function AppComponent () {}
AppComponent.annotations = [
new ng.Component({
selector: 'my-app',
template: '<h1 id="output">My First Angular 2 App</h1>'
})
];
// #enddocregion
})();

View File

@ -1,12 +1,13 @@
// #docplaster
// #docregion
// #docregion iife
(function(app) {
// #enddocregion iife
// #docregion ng-namespace-funcs, export
app.AppComponent = ng.core
app.AppComponent =
// #enddocregion export
// #docregion component
.Component({
ng.core.Component({
// #enddocregion ng-namespace-funcs
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'

View File

@ -120,7 +120,7 @@ code-example(format="").
`Component` and `Class` methods that belong to the **global Angular core namespace, `ng.core`**.
+makeExample('quickstart/js/app/app.component.js', 'ng-namespace-funcs', 'app/app.component.js ' +
'(Angular 2 methods)')(format=".")
'(component schema)')(format=".")
:marked
The **`Component`** method takes a configuration object with two
@ -132,17 +132,24 @@ code-example(format="").
### Modules
Angular apps are modular. They consist of many files each dedicated to a purpose.
ES5 JavaScript doesn't have modules, but we don't want to pollute the global namespace.
So we'll surround the code in a simple IIFE ("Immediately Invoked Function Expression").
It receives our `app` 'namespace' object as argument.
We call our IIFE with `window.app` if it exists - and if it doesn't we
initialize it as an empty object.
ES5 JavaScript doesn't have a native module system.
There are several popular 3rd party module systems we could use.
Instead, for simplicity and to avoid picking favorites,
we'll create a single global namespace for our application.
We'll call it `app` and we'll add all of our code artifacts to this one global object.
We don't want to pollute the global namespace with anything else.
So within each file we surround the code in an IIFE ("Immediately Invoked Function Expression").
+makeExample('quickstart/js/app/app.component.js', 'iife', 'app/app.component.js (IIFE)')(format=".")
:marked
Most application files *export* one thing into our faux-pas 'namespace', such as a component.
We pass the global `app` namespace object into the IIFE,
taking care to initialize it with an empty object if it doesn't yet exist.
Most application files *export* one thing by adding that thing to the `app` namespace.
Our `app.component.js` file exports the `AppComponent`.
+makeExample('quickstart/js/app/app.component.js', 'export', 'app/app.component.js (export)')(format=".")