diff --git a/public/docs/_examples/quickstart/js/app.js b/public/docs/_examples/quickstart/js/app.js
deleted file mode 100644
index e895aa5774..0000000000
--- a/public/docs/_examples/quickstart/js/app.js
+++ /dev/null
@@ -1,37 +0,0 @@
-// #docregion dsl
-(function() {
-
-// #docregion class-w-annotations
-var AppComponent = ng
- .Component({
- selector: 'my-app',
- template: '
My First Angular 2 App
'
- })
- .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: 'My First Angular 2 App
'
- })
-];
-// #enddocregion
-})();
diff --git a/public/docs/_examples/quickstart/js/app/app.component.js b/public/docs/_examples/quickstart/js/app/app.component.js
index f6c31c4dcb..f86b3bde46 100644
--- a/public/docs/_examples/quickstart/js/app/app.component.js
+++ b/public/docs/_examples/quickstart/js/app/app.component.js
@@ -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: 'My First Angular 2 App
'
diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade
index d09187cbdb..a2fb145591 100644
--- a/public/docs/js/latest/quickstart.jade
+++ b/public/docs/js/latest/quickstart.jade
@@ -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=".")