docs(quickstart): removed AppModule; created dynamically

wardbell · wardbell · commit 7fe1345c96b9 · 2016-11-18T14:06:08.000-08:00
diff --git a/public/docs/_examples/quickstart/ts/app/app.component.ts b/public/docs/_examples/quickstart/ts/app/app.component.ts
@@ -0,0 +1,8 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `<h1>Hello {{name}}</h1>`
+})
+export class AppComponent { name = 'Angular'; }
diff --git a/public/docs/_examples/quickstart/ts/app/app.module.ts b/public/docs/_examples/quickstart/ts/app/app.module.ts
@@ -1,12 +1,7 @@
 // #docregion
-import { Component, NgModule } from '@angular/core';
-import { BrowserModule }       from '@angular/platform-browser';
-
-@Component({
-  selector: 'my-app',
-  template: `<h1>Hello {{title}}</h1>`
-})
-class AppComponent { title = 'Angular'; }
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent }  from './app.component';
 
 @NgModule({
   imports:      [ BrowserModule ],
diff --git a/public/docs/_examples/quickstart/ts/index.1.html b/public/docs/_examples/quickstart/ts/index.1.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- #docregion -->
+<html>
+  <head>
+    <title>Hello Angular</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      body {color:#369;font-family: Arial,Helvetica,sans-serif;}
+    </style>
+
+    <!-- Polyfills for older browsers -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <!-- #docregion no-app-module-->
+    <script> window.noAppModule = true; </script>
+    <!-- #enddocregion no-app-module-->
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <!-- #docregion my-app-->
+    <my-app><!-- content managed by Angular --></my-app>
+    <!-- #enddocregion my-app-->
+  </body>
+
+</html>
diff --git a/public/docs/_examples/quickstart/ts/index.html b/public/docs/_examples/quickstart/ts/index.html
@@ -1,19 +1,15 @@
 <!DOCTYPE html>
-<!-- #docregion -->
 <html>
   <head>
     <title>Hello Angular</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
     <style>
       body {color:#369;font-family: Arial,Helvetica,sans-serif;}
     </style>
 
-    <!-- #docregion polyfills -->
-    <!-- Polyfill for older browsers -->
+    <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
-    <!-- #enddocregion polyfills -->
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
@@ -25,9 +21,7 @@
   </head>
 
   <body>
-    <!-- #docregion my-app-->
     <my-app><!-- content managed by Angular --></my-app>
-    <!-- #enddocregion my-app-->
   </body>
 
 </html>
diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json
diff --git a/public/docs/_examples/quickstart/ts/plnkr.json b/public/docs/_examples/quickstart/ts/plnkr.json
@@ -1,9 +1,10 @@
 {
   "description": "QuickStart",
   "files": [
-    "app/app.module.ts",
-    "index.html"
+    "app/app.component.ts",
+    "index.1.html"
   ],
-  "open": "app/app.module.ts",
+  "main": "index.1.html",
+  "open": "app/app.component.ts",
   "tags": ["quickstart"]
 }
diff --git a/public/docs/_examples/setup/ts/app/app.component.ts b/public/docs/_examples/setup/ts/app/app.component.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  template: `<h1>Hello {{title}}</h1>`,
-  selector: 'my-app'
+  selector: 'my-app',
+  template: `<h1>Hello {{name}}</h1>`
 })
-export class AppComponent { title = 'Angular'; }
+export class AppComponent { name = 'Angular'; }
diff --git a/public/docs/ts/latest/guide/setup.jade b/public/docs/ts/latest/guide/setup.jade
@@ -76,8 +76,8 @@ code-example(language="sh" class="code-shell").
     app/main.ts
   `)(format='.')
 :marked
-  The guides and cookbooks in these page expect you to have re-factored the [QuickStart](../quickstart.html "Angular QuickStart") sample
-  into these three files. It's wise to do so. 
+  The [QuickStart](../quickstart.html "Angular QuickStart") sample only showed the `AppComponent` file.
+  The documentation guides and cookbooks expect you to have defined these three files explicitly. 
   Each file has a distinct purpose and evolves independently as the application grows.
 
 style td, th {vertical-align: top}
@@ -92,13 +92,14 @@ table(width="100%")
     td
       :marked
         The `AppComponent` currently displays the "Hello Angular" header.
-        It is the root of what will become a tree of nested components. 
+        It is the **root** of what will become a tree of nested components. 
   tr
     td <code>app.module.ts</code>
     td
       :marked
-        The `AppModule` tells Angular how to assemble the application.
-        There will soon be more than the `AppComponent` to talk about. 
+        The `AppModule` is the **root module** that tells Angular how to assemble the application.
+        Right now it declares only the `AppComponent`. 
+        Soon there will be more components to talk about. 
   tr
     td <code>main.ts</code>
     td
diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade
@@ -7,40 +7,38 @@ block includes
   Just open it and follow along with the documentation.
   If you'd rather develop in a local environment, learn how on the [Setup](guide/setup.html) page.
 
-  Here's a super-simple Angular application:
+  Angular applications are made of _components_. 
+  A _component_ is the combination of an HTML template and a component class that controls a portion of the screen.
+  Here's a super-simple Angular component, written in [TypeScript](#typescript):
 
-+makeExample('app/app.module.ts','','app/app.module.ts')(format='.')
++makeExample('app/app.component.ts','','app/app.component.ts')(format='.')
 :marked
-  ### _AppComponent_
-  Angular applications are made of _components_. 
-  A _component_ is the combination of an HTML template and JavaScript class that controls a portion of the screen.
+  The `@Component` [_decorator_](glossary.html#decorator '"Decorator" explained') function takes a _metadata_ object that 
+  describes how the HTML template and component class work together.
   
-  According to the `selector`, this `AppComponent` displays its content inside a custom `<my-app>` tag in the `index.html`.
-+makeExample('index.html','my-app','index.html (body)')(format='.')
+  The `selector` property tells Angular to display the component inside a custom `<my-app>` tag in the `index.html`.
++makeExample('index.1.html','my-app','index.html (body)')(format='.')
 :marked
-  The `AppComponent` template renders the message, "Hello Angular", inside an `<h1>` header.
-  The word "Angular" appears thanks to an [interpolation binding](guide/displaying-data.html)
-  that projects the component's `title` property into the `{{title}}` slot. 
-  Change the property value from `'Angular'` to `'World'` and see what happens.
+  The `template` property defines a message inside an `<h1>` header.
+  The message starts with "Hello" and ends with `{{name}}` 
+  which is an Angular [interpolation binding](guide/displaying-data.html) expression.
+  At runtime, Angular replaces `{{name}}` with the value of the component's `name` property. 
+  Change the component class's `name` property from `'Angular'` to `'World'` and see what happens.
   
   Binding is one of many Angular features you'll discover in this documentation.
+  
+.l-sub-section
+  :marked
+    ### Next step
+    Start [learning Angular](guide/learning-angular.html).
 
-  ### _AppModule_
-  The `AppModule` tells Angular<br>
-  &nbsp;&nbsp;***what you need*** &mdash; _imports_ the `BrowserModule` to run the application in the browser.<br>
-  &nbsp;&nbsp;***what you created*** &mdash; _declares_ the `AppComponent`.<br>
-  &nbsp;&nbsp;***what to show*** &mdash; _bootstrap_ the `AppComponent` onto the `index.html` web page within the `<my-app>` tag.
-
-  You'll find more _live code examples_ like this one on almost every documentation page.
-
-  # TypeScript
+.l-main-section
+a#typescript
+:marked
+  ## TypeScript
   This example is written in <a href="http://www.typescriptlang.org/" target="_blank" title="TypeScript">TypeScript</a>,
   a strongly-typed, super-set of the latest JavaScript. 
   TypeScript turns into JavaScript that runs on any modern browser.
   Most developers find it delightful which is why most Angular developers write applications in TypeScript.
   You can write your application in [other versions of JavaScript](cookbook/ts-to-js.html) if you prefer.
-  
-.l-sub-section
-  :marked
-    ### Next step
-    Start [learning Angular](guide/learning-angular.html).
+
diff --git a/tools/plunker-builder/indexHtmlTranslator.js b/tools/plunker-builder/indexHtmlTranslator.js
@@ -21,7 +21,7 @@ var _rxRules = {
   },
   systemjs: {
     from: /<script src="systemjs.config.js"><\/script>/,
-    to:   '<script src="https://cdn.rawgit.com/angular/angular.io/74ef87f/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>'
+    to:   '<script src="https://cdn.rawgit.com/angular/angular.io/f2daab7/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>'
   },
   // Clear script like this:
   // <script>

Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,10 @@`
`1`	`1`	`{`
`2`	`2`	`"description": "QuickStart",`
`3`	`3`	`"files": [`
`4`		`- "app/app.module.ts",`
`5`		`- "index.html"`
	`4`	`+ "app/app.component.ts",`
	`5`	`+ "index.1.html"`
`6`	`6`	`],`
`7`		`- "open": "app/app.module.ts",`
	`7`	`+ "main": "index.1.html",`
	`8`	`+ "open": "app/app.component.ts",`
`8`	`9`	`"tags": ["quickstart"]`
`9`	`10`	`}`