docs(quickstart.js): fix "faux-pas" typo and revise "module" discussion
closes #648 also delete unused app.js
This commit is contained in:
parent
2c343081cc
commit
bf72ad9d3f
|
@ -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
|
||||
})();
|
|
@ -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>'
|
||||
|
|
|
@ -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=".")
|
||||
|
|
Loading…
Reference in New Issue