honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
public/docs/js/latest/quickstart.jade
View File

@ -24,13 +24,15 @@ figure.image-display
:marked :marked
Here is the file structure: Here is the file structure:
code-example(format=""). .filetree
angular2-quickstart .file angular2-quickstart
├─ app .children
│ ├── app.component.js .file app
│ └── boot.js .children
├─ index.htm .file app.component.js
└─ license.md .file boot.js
.file index.htm
.file license.md
:marked :marked
Functionally, it's an `index.html` and two JavaScript files in an `app/` folder. Functionally, it's an `index.html` and two JavaScript files in an `app/` folder.
We can handle that! We can handle that!
@ -118,7 +120,8 @@ code-example(format="").
We're creating a visual component named **`AppComponent`** by chaining the 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`**. `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 :marked
The **`Component`** method takes a configuration object with two 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. 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. 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. It receives our `app` 'namespace' object as argument.
We call our IIFE with `window.app` if it exists - and if it doesn't we We call our IIFE with `window.app` if it exists - and if it doesn't we
initialize it as an empty object. 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 :marked
Most application files *export* one thing into our faux-pas 'namespace', such as a component. Most application files *export* one thing into our faux-pas 'namespace', such as a component.
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/component.js (export)')(format=".") +makeExample('quickstart/js/app/app.component.js', 'export', 'app/app.component.js (export)')(format=".")
:marked :marked
A more sophisticated application would have child components that descended from A more sophisticated application would have child components that descended from