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=".")