chore(quickstart): correct IIFE definition and tab names for app.component.js
This commit is contained in:
		
							parent
							
								
									3c24f45ee6
								
							
						
					
					
						commit
						c5f9f3cbec
					
				| @ -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 | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user