chore(quickstart): correct IIFE definition and tab names for app.component.js

This commit is contained in:
Naomi Black 2015-12-16 14:14:02 -08:00
parent 3c24f45ee6
commit c5f9f3cbec
1 changed files with 14 additions and 11 deletions

View File

@ -24,13 +24,15 @@ figure.image-display
:marked
Here is the file structure:
code-example(format="").
angular2-quickstart
├─ app
│ ├── app.component.js
│ └── boot.js
├─ index.htm
└─ license.md
.filetree
.file angular2-quickstart
.children
.file app
.children
.file app.component.js
.file boot.js
.file index.htm
.file license.md
:marked
Functionally, it's an `index.html` and two JavaScript files in an `app/` folder.
We can handle that!
@ -118,7 +120,8 @@ code-example(format="").
We're creating a visual component named **`AppComponent`** by chaining the
`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/component.js (Angular 2 methods)')(format=".")
+makeExample('quickstart/js/app/app.component.js', 'ng-namespace-funcs', 'app/app.component.js ' +
'(Angular 2 methods)')(format=".")
:marked
The **`Component`** method takes a configuration object with two
@ -132,18 +135,18 @@ code-example(format="").
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 Execution").
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.
+makeExample('quickstart/js/app/app.component.js', 'iife', 'app/component.js (IIFE)')(format=".")
+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.
Our `app.component.js` file exports the `AppComponent`.
+makeExample('quickstart/js/app/app.component.js', 'export', 'app/component.js (export)')(format=".")
+makeExample('quickstart/js/app/app.component.js', 'export', 'app/app.component.js (export)')(format=".")
:marked
A more sophisticated application would have child components that descended from