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
|
||||||
// #docregion iife
|
// #docregion iife
|
||||||
(function(app) {
|
(function(app) {
|
||||||
// #enddocregion iife
|
// #enddocregion iife
|
||||||
// #docregion ng-namespace-funcs, export
|
// #docregion ng-namespace-funcs, export
|
||||||
app.AppComponent = ng.core
|
app.AppComponent =
|
||||||
// #enddocregion export
|
// #enddocregion export
|
||||||
// #docregion component
|
// #docregion component
|
||||||
.Component({
|
ng.core.Component({
|
||||||
// #enddocregion ng-namespace-funcs
|
// #enddocregion ng-namespace-funcs
|
||||||
selector: 'my-app',
|
selector: 'my-app',
|
||||||
template: '<h1>My First Angular 2 App</h1>'
|
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`**.
|
`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 ' +
|
+makeExample('quickstart/js/app/app.component.js', 'ng-namespace-funcs', 'app/app.component.js ' +
|
||||||
'(Angular 2 methods)')(format=".")
|
'(component schema)')(format=".")
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
The **`Component`** method takes a configuration object with two
|
The **`Component`** method takes a configuration object with two
|
||||||
@ -132,17 +132,24 @@ code-example(format="").
|
|||||||
|
|
||||||
### Modules
|
### Modules
|
||||||
Angular apps are modular. They consist of many files each dedicated to a purpose.
|
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").
|
ES5 JavaScript doesn't have a native module system.
|
||||||
It receives our `app` 'namespace' object as argument.
|
There are several popular 3rd party module systems we could use.
|
||||||
We call our IIFE with `window.app` if it exists - and if it doesn't we
|
Instead, for simplicity and to avoid picking favorites,
|
||||||
initialize it as an empty object.
|
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=".")
|
+makeExample('quickstart/js/app/app.component.js', 'iife', 'app/app.component.js (IIFE)')(format=".")
|
||||||
|
|
||||||
:marked
|
: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`.
|
Our `app.component.js` file exports the `AppComponent`.
|
||||||
|
|
||||||
+makeExample('quickstart/js/app/app.component.js', 'export', 'app/app.component.js (export)')(format=".")
|
+makeExample('quickstart/js/app/app.component.js', 'export', 'app/app.component.js (export)')(format=".")
|
||||||
|
Loading…
x
Reference in New Issue
Block a user