docs(aio): update migrated content from anguar.io

aio/content/cli-quickstart.md

@@ -0,0 +1,810 @@
+@description
+Good tools make application development quicker and easier to maintain than
+if you did everything by hand.
+
+The [**Angular CLI**](https://cli.angular.io/) is a **_command line interface_** tool
+that can create a project, add files, and perform a variety of ongoing development tasks such
+as testing, bundling, and deployment.
+
+The goal in this guide is to build and run a simple Angular
+application in TypeScript, using the Angular CLI
+while adhering to the [Style Guide](guide/style-guide) recommendations that
+benefit _every_ Angular project.
+
+By the end of the chapter, you'll have a basic understanding of development with the CLI
+and a foundation for both these documentation samples and for real world applications.
+
+You'll pursue these ends in the following high-level steps:
+
+1. [Set up](cli-quickstart#devenv) the development environment.
+2. [Create](cli-quickstart#create-proj) a new project and skeleton application.
+3. [Serve](cli-quickstart#serve) the application.
+4. [Edit](cli-quickstart#first-component) the application.
+
+And you can also <a href="/resources/zips/cli-quickstart/cli-quickstart.zip">download the example.</a>
+
+
+<h2 id='devenv'>
+  Step 1. Set up the Development Environment
+</h2>
+
+You need to set up your development environment before you can do anything.
+
+Install **[Node.js® and npm](https://nodejs.org/en/download/)**
+if they are not already on your machine.
+
+~~~ {.l-sub-section}
+
+**Verify that you are running at least node `6.9.x` and npm `3.x.x`**
+by running `node -v` and `npm -v` in a terminal/console window.
+Older versions produce errors, but newer versions are fine.
+
+~~~
+
+Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globally.
+
+<code-example language="sh" class="code-shell">
+  npm install -g @angular/cli  
+    
+</code-example>
+
+
+
+<h2 id='create-project'>
+  Step 2. Create a new project
+</h2>
+
+Open a terminal window.
+Generate a new project and skeleton application by running the following commands:
+
+<code-example language="sh" class="code-shell">
+  ng new my-app  
+    
+</code-example>
+
+
+
+~~~ {.l-sub-section}
+
+Patience please.
+It takes time to set up a new project, most of it spent installing npm packages.
+
+
+~~~
+
+
+
+<h2 id='serve'>
+  Step 3: Serve the application
+</h2>
+
+Go to the project directory and launch the server.
+
+<code-example language="sh" class="code-shell">
+  cd my-app  
+    ng serve --open  
+    
+</code-example>
+
+The `ng serve` command launches the server, watches your files,
+and rebuilds the app as you make changes to those files.
+
+Using the `--open` (or just `-o`) option will automatically open your browser
+on `http://localhost:4200/`.
+
+Your app greets you with a message:
+
+<figure class='image-display'>
+  <img src='assets/images/devguide/cli-quickstart/app-works.png' alt="The app works!">  </img>
+</figure>
+
+
+
+<h2 id='first-component'>
+  Step 4: Edit your first Angular component
+</h2>
+
+The CLI created the first Angular component for you.
+This is the _root component_ and it is named `app-root`.
+You can find it in `./src/app/app.component.ts`.
+Open the component file and change the `title` property from _app works!_ to _My First Angular App_:
+
+
+<code-example path="cli-quickstart/src/app/app.component.ts" region="title" linenums="false">
+
+</code-example>
+
+The browser reloads automatically with the revised title. That's nice, but it could look better.
+
+Open `src/app/app.component.css` and give the component some style.
+
+
+<code-example path="cli-quickstart/src/app/app.component.css" linenums="false">
+
+</code-example>
+
+
+<figure class='image-display'>
+  <img src='assets/images/devguide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app">  </img>
+</figure>
+
+Looking good!
+
+## What's next?
+That's about all you'd expect to do in a "Hello, World" app.
+
+You're ready to take the [Tour of Heroes Tutorial](tutorial) and build
+a small application that demonstrates the great things you can build with Angular.
+
+Or you can stick around a bit longer to learn about the files in your brand new project.
+
+## Project file review
+
+An Angular CLI project is the foundation for both quick experiments and enterprise solutions.
+
+The first file you should check out is `README.md`.
+It has some basic information on how to use CLI commands.
+Whenever you want to know more about how Angular CLI works make sure to visit
+[the Angular CLI repository](https://github.com/angular/angular-cli) and
+[Wiki](https://github.com/angular/angular-cli/wiki).
+
+Some of the generated files might be unfamiliar to you.
+
+### The `src` folder
+Your app lives in the `src` folder.
+All Angular components, templates, styles, images, and anything else your app needs go here.
+Any files outside of this folder are meant to support building your app.
+
+<aio-filetree>
+
+  <aio-folder>
+    src
+    <aio-folder>
+      app
+      <aio-file>
+        app.component.css
+      </aio-file>
+
+
+      <aio-file>
+        app.component.html
+      </aio-file>
+
+
+      <aio-file>
+        app.component.spec.ts
+      </aio-file>
+
+
+      <aio-file>
+        app.component.ts
+      </aio-file>
+
+
+      <aio-file>
+        app.module.ts
+      </aio-file>
+
+
+    </aio-folder>
+
+
+    <aio-folder>
+      assets
+      <aio-file>
+        .gitkeep
+      </aio-file>
+
+
+    </aio-folder>
+
+
+    <aio-folder>
+      environments
+      <aio-file>
+        environment.prod.ts
+      </aio-file>
+
+
+      <aio-file>
+        environment.ts
+      </aio-file>
+
+
+    </aio-folder>
+
+
+    <aio-file>
+      favicon.ico
+    </aio-file>
+
+
+    <aio-file>
+      index.html
+    </aio-file>
+
+
+    <aio-file>
+      main.ts
+    </aio-file>
+
+
+    <aio-file>
+      polyfills.ts
+    </aio-file>
+
+
+    <aio-file>
+      styles.css
+    </aio-file>
+
+
+    <aio-file>
+      test.ts
+    </aio-file>
+
+
+    <aio-file>
+      tsconfig.app.json
+    </aio-file>
+
+
+    <aio-file>
+      tsconfig.spec.json
+    </aio-file>
+
+
+  </aio-folder>
+
+
+</aio-filetree>
+
+
+<style>
+  td, th {vertical-align: top}
+</style>
+
+
+<table width="100%">
+
+  <col width="20%">
+
+  </col>
+
+
+  <col width="80%">
+
+  </col>
+
+
+  <tr>
+
+    <th>
+      File
+    </th>
+
+
+    <th>
+      Purpose
+    </th>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>app/app.component.{ts,html,css,spec.ts}</code>
+    </td>
+
+
+    <td>
+      Defines the `AppComponent` along with an HTML template, CSS stylesheet, and a unit test.      
+            It is the **root** component of what will become a tree of nested components      
+            as the application evolves.
+    </td>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>app/app.module.ts</code>
+    </td>
+
+
+    <td>
+      Defines `AppModule`, the [root module](guide/appmodule) that tells Angular how to assemble the application.      
+            Right now it declares only the `AppComponent`.      
+            Soon there will be more components to declare.
+    </td>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>assets/*</code>
+    </td>
+
+
+    <td>
+      A folder where you can put images and anything else to be copied wholesale      
+            when you build your application.
+    </td>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>environments/*</code>
+    </td>
+
+
+    <td>
+      This folder contains one file for each of your destination environments,      
+            each exporting simple configuration variables to use in your application.      
+            The files are replaced on-the-fly when you build your app.      
+            You might use a different API endpoint for development than you do for production      
+            or maybe different analytics tokens.      
+            You might even use some mock services.      
+            Either way, the CLI has you covered.
+    </td>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>favicon.ico</code>
+    </td>
+
+
+    <td>
+      Every site wants to look good on the bookmark bar.      
+            Get started with your very own Angular icon.
+    </td>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>index.html</code>
+    </td>
+
+
+    <td>
+      The main HTML page that is served when someone visits your site.      
+            Most of the time you'll never need to edit it.      
+            The CLI automatically adds all `js` and `css` files when building your app so you      
+            never need to add any `<script>` or `<link>` tags here manually.
+    </td>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>main.ts</code>
+    </td>
+
+
+    <td>
+      The main entry point for your app.      
+            Compiles the application with the [JIT compiler](glossary)      
+            and bootstraps the application's root module (`AppModule`) to run in the browser.      
+            You can also use the [AOT compiler](glossary)      
+            without changing any code by passing in `--aot` to `ng build` or `ng serve`.
+    </td>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>polyfills.ts</code>
+    </td>
+
+
+    <td>
+      Different browsers have different levels of support of the web standards.      
+            Polyfills help normalize those differences.      
+            You should be pretty safe with `core-js` and `zone.js`, but be sure to check out      
+            the [Browser Support guide](guide/browser-support) for more information.
+    </td>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>styles.css</code>
+    </td>
+
+
+    <td>
+      Your global styles go here.      
+            Most of the time you'll want to have local styles in your components for easier maintenance,      
+            but styles that affect all of your app need to be in a central place.
+    </td>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>test.ts</code>
+    </td>
+
+
+    <td>
+      This is the main entry point for your unit tests.      
+            It has some custom configuration that might be unfamiliar, but it's not something you'll      
+            need to edit.
+    </td>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>tsconfig.{app|spec}.json</code>
+    </td>
+
+
+    <td>
+      TypeScript compiler configuration for the Angular app (`tsconfig.app.json`)      
+            and for the unit tests (`tsconfig.spec.json`).      
+                  
+            
+    </td>
+
+
+  </tr>
+
+
+</table>
+
+
+### The root folder
+The `src/` folder is just one of the items inside the project's root folder.
+Other files help you build, test, maintain, document, and deploy the app.
+These files go in the root folder next to `src/`.
+
+<aio-filetree>
+
+  <aio-folder>
+    my-app
+    <aio-folder>
+      e2e
+      <aio-file>
+        app.e2e-spec.ts
+      </aio-file>
+
+
+      <aio-file>
+        app.po.ts
+      </aio-file>
+
+
+      <aio-file>
+        tsconfig.e2e.json
+      </aio-file>
+
+
+    </aio-folder>
+
+
+    <aio-file>
+      node_modules/...
+    </aio-file>
+
+
+    <aio-file>
+      src/...
+    </aio-file>
+
+
+    <aio-file>
+      .angular-cli.json
+    </aio-file>
+
+
+    <aio-file>
+      .editorconfig
+    </aio-file>
+
+
+    <aio-file>
+      .gitignore
+    </aio-file>
+
+
+    <aio-file>
+      karma.conf.js
+    </aio-file>
+
+
+    <aio-file>
+      package.json
+    </aio-file>
+
+
+    <aio-file>
+      protractor.conf.js
+    </aio-file>
+
+
+    <aio-file>
+      README.md
+    </aio-file>
+
+
+    <aio-file>
+      tsconfig.json
+    </aio-file>
+
+
+    <aio-file>
+      tslint.json
+    </aio-file>
+
+
+  </aio-folder>
+
+
+</aio-filetree>
+
+
+<style>
+  td, th {vertical-align: top}
+</style>
+
+
+<table width="100%">
+
+  <col width="20%">
+
+  </col>
+
+
+  <col width="80%">
+
+  </col>
+
+
+  <tr>
+
+    <th>
+      File
+    </th>
+
+
+    <th>
+      Purpose
+    </th>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>e2e/</code>
+    </td>
+
+
+    <td>
+      Inside `e2e/` live the End-to-End tests.      
+            They shouldn't be inside `src/` because e2e tests are really a separate app that      
+            just so happens to test your main app.      
+            That's also why they have their own `tsconfig.e2e.json`.
+    </td>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>node_modules/</code>
+    </td>
+
+
+    <td>
+      `Node.js` creates this folder and puts all third party modules listed in      
+            `package.json` inside of it.
+    </td>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>.angular-cli.json</code>
+    </td>
+
+
+    <td>
+      Configuration for Angular CLI.      
+            In this file you can set several defaults and also configure what files are included      
+            when your project is build.      
+            Check out the official documentation if you want to know more.
+    </td>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>.editorconfig</code>
+    </td>
+
+
+    <td>
+      Simple configuration for your editor to make sure everyone that uses your project      
+            has the same basic configuration.      
+            Most editors support an `.editorconfig` file.      
+            See http://editorconfig.org for more information.
+    </td>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>.gitignore</code>
+    </td>
+
+
+    <td>
+      Git configuration to make sure autogenerated files are not commited to source control.
+    </td>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>karma.conf.js</code>
+    </td>
+
+
+    <td>
+      Unit test configuration for the [Karma test runner](https://karma-runner.github.io),      
+            used when running `ng test`.
+    </td>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>package.json</code>
+    </td>
+
+
+    <td>
+      `npm` configuration listing the third party packages your project uses.      
+            You can also add your own [custom scripts](https://docs.npmjs.com/misc/scripts) here.
+    </td>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>protractor.conf.js</code>
+    </td>
+
+
+    <td>
+      End-to-end test configuration for [Protractor](http://www.protractortest.org/),      
+            used when running `ng e2e`.
+    </td>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>README.md</code>
+    </td>
+
+
+    <td>
+      Basic documentation for your project, pre-filled with CLI command information.      
+            Make sure to enhance it with project documentation so that anyone      
+            checking out the repo can build your app!
+    </td>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>tsconfig.json</code>
+    </td>
+
+
+    <td>
+      TypeScript compiler configuration for your IDE to pick up and give you helpful tooling.
+    </td>
+
+
+  </tr>
+
+
+  <tr>
+
+    <td>
+      <code>tslint.json</code>
+    </td>
+
+
+    <td>
+      Linting configuration for [TSLint](https://palantir.github.io/tslint/) together with      
+            [Codelyzer](http://codelyzer.com/), used when running `ng lint`.      
+            Linting helps keep your code style consistent.      
+            
+    </td>
+
+
+  </tr>
+
+
+</table>
+
+
+
+~~~ {.l-sub-section}
+
+### Next Step
+
+If you're new to Angular, continue on the
+[learning path](guide/learning-angular).
+You can skip the "Setup" step since you're already using the Angular CLI setup.
+
+~~~
+

aio/content/examples/.gitignore

@@ -1,17 +1,58 @@
 # _boilerplate files
-!_boilerplate/*
+**/src/styles.css
-*/*/src/styles.css
+**/src/systemjs-angular-loader.js
-*/*/src/systemjs.config.js
+**/src/systemjs.config.js
-*/*/src/tsconfig.json
+**/src/tsconfig.json
-*/*/bs-config.e2e.json
+**/bs-config.e2e.json
-*/*/bs-config.json
+**/bs-config.json
-*/*/package.json
+**/package.json
-*/*/tslint.json
+**/tslint.json
+**/karma.conf.js
+**/karma-test-shim.js
+**/browser-test-shim.js
+**/node_modules
 
-# example files
+# built files
+*.map
 _test-output
 protractor-helpers.js
 */e2e-spec.js
+**/*.js
 **/ts/**/*.js
 **/js-es6*/**/*.js
-**/ts-snippets/**/*.js
+dist/
+
+# special
+!_boilerplate/
+!/*
+!systemjs.config.*.js
+!*.1.*
+!*.2.*
+!*.3.*
+
+# AngularJS files
+!**/*.ajs.js
+
+# aot
+**/*.ngfactory.ts
+**/*.ngsummary.json
+**/*.shim.ngstyle.ts
+**/*.metadata.json
+!aot/bs-config.json
+!aot/index.html
+!copy-dist-files.js
+!rollup-config.js
+
+# testing
+!testing/src/browser-test-shim.js
+!testing/karma*.js
+
+# TS to JS
+!cb-ts-to-js/js*/**/*.js
+
+# webpack
+!webpack/**/config/*.js
+!webpack/**/*webpack*.js
+
+# style-guide
+!style-guide/src/systemjs.custom.js

aio/content/examples/_boilerplate/package.json

@@ -38,7 +38,7 @@
   "license": "MIT",
   "dependencies": {},
   "devDependencies": {
-    "angular-cli": "^1.0.0-beta.26"
+    "angular-cli": "^1.0.0-rc.0"
   },
   "repository": {}
 }

aio/content/examples/_boilerplate/src/systemjs.config.js

@@ -11,18 +11,23 @@
     // map tells the System loader where to look for things
     map: {
       // our app is within the app folder
-      app: 'app',
+      'app': 'app',
 
       // angular bundles
+      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
+      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+      '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
       '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
       '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
+      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
 
       // other libraries
       'rxjs':                      'npm:rxjs',
@@ -32,7 +37,12 @@
     packages: {
       app: {
         main: './main.js',
-        defaultExtension: 'js'
+        defaultExtension: 'js',
+        meta: {
+          './*.js': {
+            loader: 'systemjs-angular-loader.js'
+          }
+        }
       },
       rxjs: {
         defaultExtension: 'js'

aio/content/examples/_boilerplate/src/systemjs.config.web.build.js

@@ -35,13 +35,16 @@
     // map tells the System loader where to look for things
     map: {
       // our app is within the app folder
-      app: 'app',
+      'app': 'app',
 
       // angular bundles
+      '@angular/animations': 'ng:animations-builds/master/bundles/animations.umd.js',
+      '@angular/animations/browser': 'ng:animations-builds/master/bundles/animations-browser.umd.js',
       '@angular/core': 'ng:core-builds/master/bundles/core.umd.js',
       '@angular/common': 'ng:common-builds/master/bundles/common.umd.js',
       '@angular/compiler': 'ng:compiler-builds/master/bundles/compiler.umd.js',
       '@angular/platform-browser': 'ng:platform-browser-builds/master/bundles/platform-browser.umd.js',
+      '@angular/platform-browser/animations': 'ng:animations-builds/master/bundles/platform-browser-animations.umd.js',
       '@angular/platform-browser-dynamic': 'ng:platform-browser-dynamic-builds/master/bundles/platform-browser-dynamic.umd.js',
       '@angular/http': 'ng:http-builds/master/bundles/http.umd.js',
       '@angular/router': 'ng:router-builds/master/bundles/router.umd.js',
@@ -64,14 +67,19 @@
       'rxjs':                      'npm:rxjs@5.0.1',
       'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
       'ts':                        'npm:plugin-typescript@5.2.7/lib/plugin.js',
-      'typescript':                'npm:typescript@2.0.10/lib/typescript.js',
+      'typescript':                'npm:typescript@2.2.1/lib/typescript.js',
 
     },
     // packages tells the System loader how to load when no filename and/or no extension
     packages: {
       app: {
         main: './main.ts',
-        defaultExtension: 'ts'
+        defaultExtension: 'ts',
+        meta: {
+          './*.ts': {
+            loader: 'systemjs-angular-loader.js'
+          }
+        }
       },
       rxjs: {
         defaultExtension: 'js'

aio/content/examples/_boilerplate/src/systemjs.config.web.js

@@ -32,13 +32,16 @@
     // map tells the System loader where to look for things
     map: {
       // our app is within the app folder
-      app: 'app',
+      'app': 'app',
 
       // angular bundles
+      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
+      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+      '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
       '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
@@ -51,14 +54,19 @@
       'rxjs':                      'npm:rxjs@5.0.1',
       'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
       'ts':                        'npm:plugin-typescript@5.2.7/lib/plugin.js',
-      'typescript':                'npm:typescript@2.0.10/lib/typescript.js',
+      'typescript':                'npm:typescript@2.2.1/lib/typescript.js',
 
     },
     // packages tells the System loader how to load when no filename and/or no extension
     packages: {
       app: {
         main: './main.ts',
-        defaultExtension: 'ts'
+        defaultExtension: 'ts',
+        meta: {
+          './*.ts': {
+            loader: 'systemjs-angular-loader.js'
+          }
+        }
       },
       rxjs: {
         defaultExtension: 'js'

aio/content/examples/animations/src/app/app.module.ts

@@ -1,5 +1,8 @@
+// #docregion animations-module
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+// #enddocregion animations-module
 
 import { HeroTeamBuilderComponent } from './hero-team-builder.component';
 import { HeroListBasicComponent } from './hero-list-basic.component';
@@ -13,8 +16,10 @@ import { HeroListGroupsComponent } from './hero-list-groups.component';
 import { HeroListMultistepComponent } from './hero-list-multistep.component';
 import { HeroListTimingsComponent } from './hero-list-timings.component';
 
+// #docregion animation-module
 @NgModule({
-  imports: [ BrowserModule ],
+  imports: [ BrowserModule, BrowserAnimationsModule ],
+  // #enddocregion animation-module
   declarations: [
     HeroTeamBuilderComponent,
     HeroListBasicComponent,

aio/content/examples/animations/src/app/hero-list-auto.component.ts

@@ -1,17 +1,18 @@
 import {
   Component,
-  Input,
+  Input
+} from '@angular/core';
+import {
   trigger,
   state,
   style,
   animate,
   transition
-} from '@angular/core';
+} from '@angular/animations';
 
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-auto',
   // #docregion template
   template: `

aio/content/examples/animations/src/app/hero-list-basic.component.ts

@@ -3,19 +3,20 @@
 // #docregion imports
 import {
   Component,
-  Input,
+  Input
+} from '@angular/core';
+import {
   trigger,
   state,
   style,
-  transition,
+  animate,
-  animate
+  transition
-} from '@angular/core';
+} from '@angular/animations';
 // #enddocregion imports
 
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-basic',
   // #enddocregion
   /* The click event calls hero.toggleState(), which

aio/content/examples/animations/src/app/hero-list-combined-transitions.component.ts

@@ -2,19 +2,20 @@
 // #docregion imports
 import {
   Component,
-  Input,
+  Input
+} from '@angular/core';
+import {
   trigger,
   state,
   style,
-  transition,
+  animate,
-  animate
+  transition
-} from '@angular/core';
+} from '@angular/animations';
 // #enddocregion imports
 
 import { Heroes } from './hero.service';
 
 @Component({
- moduleId: module.id,
  selector: 'hero-list-combined-transitions',
  // #docregion template
  template: `

aio/content/examples/animations/src/app/hero-list-enter-leave-states.component.ts

@@ -1,17 +1,18 @@
 import {
   Component,
-  Input,
+  Input
+} from '@angular/core';
+import {
   trigger,
   state,
   style,
   animate,
   transition
-} from '@angular/core';
+} from '@angular/animations';
 
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-enter-leave-states',
   // #docregion template
   template: `

aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts

@@ -1,17 +1,18 @@
 import {
   Component,
-  Input,
+  Input
+} from '@angular/core';
+import {
   trigger,
   state,
   style,
   animate,
   transition
-} from '@angular/core';
+} from '@angular/animations';
 
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-enter-leave',
   // #docregion template
   template: `

aio/content/examples/animations/src/app/hero-list-groups.component.ts

@@ -1,18 +1,19 @@
 import {
   Component,
-  Input,
+  Input
+} from '@angular/core';
+import {
   trigger,
   state,
   style,
   animate,
   transition,
   group
-} from '@angular/core';
+} from '@angular/animations';
 
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-groups',
   template: `
     <ul>

aio/content/examples/animations/src/app/hero-list-inline-styles.component.ts

@@ -3,17 +3,18 @@
 import {
   Component,
   Input,
+} from '@angular/core';
+import {
   trigger,
   style,
-  transition,
+  animate,
-  animate
+  transition
-} from '@angular/core';
+} from '@angular/animations';
 // #enddocregion imports
 
 import { Heroes } from './hero.service';
 
 @Component({
- moduleId: module.id,
  selector: 'hero-list-inline-styles',
  // #docregion template
  template: `

aio/content/examples/animations/src/app/hero-list-multistep.component.ts

@@ -1,19 +1,20 @@
 import {
   Component,
   Input,
+} from '@angular/core';
+import {
   trigger,
   state,
   style,
   animate,
   transition,
   keyframes,
-  AnimationTransitionEvent
+  AnimationEvent
-} from '@angular/core';
+} from '@angular/animations';
 
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-multistep',
   // #docregion template
   template: `
@@ -60,11 +61,11 @@ import { Heroes } from './hero.service';
 export class HeroListMultistepComponent {
   @Input() heroes: Heroes;
 
-  animationStarted(event: AnimationTransitionEvent) {
+  animationStarted(event: AnimationEvent) {
     console.warn('Animation started: ', event);
   }
 
-  animationDone(event: AnimationTransitionEvent) {
+  animationDone(event: AnimationEvent) {
     console.warn('Animation done: ', event);
   }
 }

aio/content/examples/animations/src/app/hero-list-timings.component.ts

@@ -1,17 +1,18 @@
 import {
   Component,
-  Input,
+  Input
+} from '@angular/core';
+import {
   trigger,
   state,
   style,
   animate,
   transition
-} from '@angular/core';
+} from '@angular/animations';
 
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-timings',
   template: `
     <ul>

aio/content/examples/animations/src/app/hero-list-twoway.component.ts

@@ -2,19 +2,20 @@
 // #docregion imports
 import {
   Component,
-  Input,
+  Input
+} from '@angular/core';
+import {
   trigger,
   state,
   style,
-  transition,
+  animate,
-  animate
+  transition
-} from '@angular/core';
+} from '@angular/animations';
 // #enddocregion imports
 
 import { Heroes } from './hero.service';
 
 @Component({
- moduleId: module.id,
  selector: 'hero-list-twoway',
  // #docregion template
  template: `

aio/content/examples/architecture/src/app/hero-detail.component.ts

@@ -3,7 +3,6 @@ import { Component, Input } from '@angular/core';
 import { Hero } from './hero';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-detail',
   templateUrl: './hero-detail.component.html'
 })

aio/content/examples/architecture/src/app/hero-list.component.ts

@@ -5,7 +5,6 @@ import { HeroService }         from './hero.service';
 
 // #docregion metadata, providers
 @Component({
-  moduleId: module.id,
   selector:    'hero-list',
   templateUrl: './hero-list.component.html',
   providers:  [ HeroService ]

aio/content/examples/architecture/ts/plnkr.no-link.html

@@ -1,481 +0,0 @@
-<html lang="en"><head></head><body><form id="mainForm" method="post" action="http://plnkr.co/edit/?p=preview" target="_self"><input type="hidden" name="files[app/app.component.ts]" value="import { Component } from '@angular/core';
-
-@Component({
-  selector: 'my-app',
-  template: `
-    <hero-list></hero-list>
-    <sales-tax></sales-tax>
-  `
-})
-export class AppComponent { }
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/app.module.ts]" value="import { BrowserModule }       from '@angular/platform-browser';
-import { FormsModule }         from '@angular/forms';
-import { NgModule }     from '@angular/core';
-import { AppComponent } from './app.component';
-import { HeroDetailComponent } from './hero-detail.component';
-import { HeroListComponent }   from './hero-list.component';
-import { SalesTaxComponent }   from './sales-tax.component';
-import { HeroService }         from './hero.service';
-import { BackendService }      from './backend.service';
-import { Logger }              from './logger.service';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    FormsModule
-  ],
-  declarations: [
-    AppComponent,
-    HeroDetailComponent,
-    HeroListComponent,
-    SalesTaxComponent
-  ],
-  providers: [
-    BackendService,
-    HeroService,
-    Logger
-  ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule { }
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/backend.service.ts]" value="import { Injectable, Type } from '@angular/core';
-
-import { Logger } from './logger.service';
-import { Hero } from './hero';
-
-const HEROES = [
-        new Hero('Windstorm', 'Weather mastery'),
-        new Hero('Mr. Nice', 'Killing them with kindness'),
-        new Hero('Magneta', 'Manipulates metalic objects')
-      ];
-
-@Injectable()
-export class BackendService {
-  constructor(private logger: Logger) {}
-
-  getAll(type: Type<any>): PromiseLike<any[]> {
-    if (type === Hero) {
-      // TODO get from the database
-      return Promise.resolve<Hero[]>(HEROES);
-    }
-    let err = new Error('Cannot get object of this type');
-    this.logger.error(err);
-    throw err;
-  }
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/hero-detail.component.ts]" value="import { Component, Input } from '@angular/core';
-
-import { Hero } from './hero';
-
-@Component({
-  moduleId: module.id,
-  selector: 'hero-detail',
-  templateUrl: './hero-detail.component.html'
-})
-export class HeroDetailComponent {
-  @Input() hero: Hero;
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/hero-list.component.ts]" value="import { Component, OnInit }   from '@angular/core';
-
-import { Hero }                from './hero';
-import { HeroService }         from './hero.service';
-
-@Component({
-  moduleId: module.id,
-  selector:    'hero-list',
-  templateUrl: './hero-list.component.html',
-  providers:  [ HeroService ]
-})
-export class HeroListComponent implements OnInit {
-  heroes: Hero[];
-  selectedHero: Hero;
-
-  constructor(private service: HeroService) { }
-
-  ngOnInit() {
-    this.heroes = this.service.getHeroes();
-  }
-
-  selectHero(hero: Hero) { this.selectedHero = hero; }
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/hero.service.ts]" value="import { Injectable } from '@angular/core';
-
-import { Hero } from './hero';
-import { BackendService } from './backend.service';
-import { Logger } from './logger.service';
-
-@Injectable()
-export class HeroService {
-  private heroes: Hero[] = [];
-
-  constructor(
-    private backend: BackendService,
-    private logger: Logger) { }
-
-  getHeroes() {
-    this.backend.getAll(Hero).then( (heroes: Hero[]) => {
-      this.logger.log(`Fetched ${heroes.length} heroes.`);
-      this.heroes.push(...heroes); // fill cache
-    });
-    return this.heroes;
-  }
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/hero.ts]" value="let nextId = 1;
-
-export class Hero {
-  id: number;
-  constructor(
-    public name: string,
-    public power?: string) {
-      this.id = nextId++;
-    }
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/logger.service.ts]" value="import { Injectable } from '@angular/core';
-
-@Injectable()
-export class Logger {
-  log(msg: any)   { console.log(msg); }
-  error(msg: any) { console.error(msg); }
-  warn(msg: any)  { console.warn(msg); }
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/mini-app.ts]" value="// A mini-application
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class Logger {
-  log(message: string) { console.log(message); }
-}
-
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'my-app',
- template: 'Welcome to Angular'
-})
-export class AppComponent {
-  constructor(logger: Logger) {
-    logger.log('Let the fun begin!');
-  }
-}
-
-import { NgModule }      from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-@NgModule({
-  imports:      [ BrowserModule ],
-  providers:    [ Logger ],
-  declarations: [ AppComponent ],
-  exports:      [ AppComponent ],
-  bootstrap:    [ AppComponent ]
-})
-export class AppModule { }
-
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-platformBrowserDynamic().bootstrapModule(AppModule);
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/sales-tax.component.ts]" value="import { Component }       from '@angular/core';
-
-import { SalesTaxService } from './sales-tax.service';
-import { TaxRateService }  from './tax-rate.service';
-
-@Component({
-  selector:    'sales-tax',
-  template: `
-    <h2>Sales Tax Calculator</h2>
-    Amount: <input #amountBox (change)=&quot;0&quot;>
-
-    <div *ngIf=&quot;amountBox.value&quot;>
-    The sales tax is
-     {{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
-    </div>
-  `,
-  providers: [SalesTaxService, TaxRateService]
-})
-export class SalesTaxComponent {
-  constructor(private salesTaxService: SalesTaxService) { }
-
-  getTax(value: string | number) {
-    return this.salesTaxService.getVAT(value);
-  }
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/sales-tax.service.ts]" value="import { Injectable } from '@angular/core';
-
-import { TaxRateService } from './tax-rate.service';
-
-@Injectable()
-export class SalesTaxService {
-  constructor(private rateService: TaxRateService) { }
-
-  getVAT(value: string | number) {
-    let amount = (typeof value === 'string') ?
-      parseFloat(value) : value;
-    return (amount || 0) * this.rateService.getRate('VAT');
-  }
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/tax-rate.service.ts]" value="import { Injectable } from '@angular/core';
-
-@Injectable()
-export class TaxRateService {
-  getRate(rateName: string) { return 0.10; } // 10% everywhere
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[main.ts]" value="import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[styles.css]" value="/* Master Styles */
-h1 {
-  color: #369;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 250%;
-}
-h2, h3 {
-  color: #444;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: lighter;
-}
-body {
-  margin: 2em;
-}
-body, input[text], button {
-  color: #888;
-  font-family: Cambria, Georgia;
-}
-a {
-  cursor: pointer;
-  cursor: hand;
-}
-button {
-  font-family: Arial;
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  cursor: hand;
-}
-button:hover {
-  background-color: #cfd8dc;
-}
-button:disabled {
-  background-color: #eee;
-  color: #aaa;
-  cursor: auto;
-}
-
-/* Navigation link styles */
-nav a {
-  padding: 5px 10px;
-  text-decoration: none;
-  margin-right: 10px;
-  margin-top: 10px;
-  display: inline-block;
-  background-color: #eee;
-  border-radius: 4px;
-}
-nav a:visited, a:link {
-  color: #607D8B;
-}
-nav a:hover {
-  color: #039be5;
-  background-color: #CFD8DC;
-}
-nav a.active {
-  color: #039be5;
-}
-
-/* items class */
-.items {
-  margin: 0 0 2em 0;
-  list-style-type: none;
-  padding: 0;
-  width: 24em;
-}
-.items li {
-  cursor: pointer;
-  position: relative;
-  left: 0;
-  background-color: #EEE;
-  margin: .5em;
-  padding: .3em 0;
-  height: 1.6em;
-  border-radius: 4px;
-}
-.items li:hover {
-  color: #607D8B;
-  background-color: #DDD;
-  left: .1em;
-}
-.items li.selected {
-  background-color: #CFD8DC;
-  color: white;
-}
-.items li.selected:hover {
-  background-color: #BBD8DC;
-}
-.items .text {
-  position: relative;
-  top: -3px;
-}
-.items .badge {
-  display: inline-block;
-  font-size: small;
-  color: white;
-  padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
-  line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
-  margin-right: .8em;
-  border-radius: 4px 0 0 4px;
-}
-/* everywhere else */
-* {
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/hero-detail.component.html]" value="<hr>
-<h4>{{hero.name}} Detail</h4>
-<div>Id: {{hero.id}}</div>
-<div>Name:
-  <input [(ngModel)]=&quot;hero.name&quot;>
-</div>
-<div>Power:<input [(ngModel)]=&quot;hero.power&quot;></div>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="files[app/hero-list.component.html]" value="<h2>Hero List</h2>
-
-<p><i>Pick a hero from the list</i></p>
-<ul>
-  <li *ngFor=&quot;let hero of heroes&quot; (click)=&quot;selectHero(hero)&quot;>
-    {{hero.name}}
-  </li>
-</ul>
-
-<hero-detail *ngIf=&quot;selectedHero&quot; [hero]=&quot;selectedHero&quot;></hero-detail>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="files[index.html]" value="<!DOCTYPE html>
-<html>
-  <head>
-    <title>Architecture of Angular</title>
-    <meta charset=&quot;UTF-8&quot;>
-    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
-    <script>document.write('<base href=&quot;' + document.location + '&quot; />');</script>
-    <link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;>
-
-    <!-- Polyfills -->
-    <script src=&quot;https://unpkg.com/core-js/client/shim.min.js&quot;></script>
-
-    <script src=&quot;https://unpkg.com/zone.js@0.7.4?main=browser&quot;></script>
-    <script src=&quot;https://unpkg.com/systemjs@0.19.39/dist/system.src.js&quot;></script>
-
-    <script src=&quot;https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js&quot;></script>
-    <script>
-      System.import('main.js').catch(function(err){ console.error(err); });
-    </script>
-  </head>
-
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
-
-</html>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="private" value="true"><input type="hidden" name="description" value="Angular Example - Intro to Angular"></form><script>document.getElementById("mainForm").submit();</script></body></html>

aio/content/examples/attribute-directives/e2e-spec.ts

@@ -15,7 +15,7 @@ describe('Attribute directives', function () {
   });
 
   it('should be able to select green highlight', function () {
-    let highlightedEle = element(by.cssContainingText('p', 'Highlight me'));
+    let highlightedEle = element(by.cssContainingText('p', 'Highlight me!'));
     let lightGreen = 'rgba(144, 238, 144, 1)';
 
     expect(highlightedEle.getCssValue('background-color')).not.toEqual(lightGreen);

aio/content/examples/attribute-directives/src/app/app.component.1.html

@@ -2,19 +2,13 @@
 <h1>My First Attribute Directive</h1>
 <!-- #docregion applied -->
 <p myHighlight>Highlight me!</p>
-<!-- #enddocregion applied -->
+<!-- #enddocregion applied,  -->
-<!-- #enddocregion -->
 
 <!-- #docregion color-1 -->
 <p myHighlight highlightColor="yellow">Highlighted in yellow</p>
 <p myHighlight [highlightColor]="'orange'">Highlighted in orange</p>
-
 <!-- #enddocregion color-1 -->
 
 <!-- #docregion color-2 -->
 <p myHighlight [highlightColor]="color">Highlighted with parent component's color</p>
 <!-- #enddocregion color-2 -->
-
-<!-- #docregion p-style-background -->
-<p [style.background]="'lime'">I am green with envy!</p>
-<!-- #enddocregion p-style-background -->

aio/content/examples/attribute-directives/src/app/app.component.1.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.1.html'
 })
@@ -9,4 +8,3 @@ import { Component } from '@angular/core';
 export class AppComponent {
   color = 'yellow';
 }
-// #enddocregion class

aio/content/examples/attribute-directives/src/app/app.component.html

@@ -1,5 +1,4 @@
-<!-- #docregion -->
+<!-- #docregion v2, -->
-<!-- #docregion v2 -->
 <h1>My First Attribute Directive</h1>
 
 <h4>Pick a highlight color</h4>
@@ -10,15 +9,13 @@
 </div>
 <!-- #docregion color -->
 <p [myHighlight]="color">Highlight me!</p>
-<!-- #enddocregion color -->
+<!-- #enddocregion color, v2 -->
-<!-- #enddocregion v2 -->
 
 <!-- #docregion defaultColor -->
 <p [myHighlight]="color" defaultColor="violet">
   Highlight me too!
 </p>
-<!-- #enddocregion defaultColor -->
+<!-- #enddocregion defaultColor, -->
-<!-- #enddocregion -->
 
 <hr>
 <p><i>Mouse over the following lines to see fixed highlights</i></p>

aio/content/examples/attribute-directives/src/app/app.component.ts

@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })
@@ -10,5 +9,3 @@ import { Component } from '@angular/core';
 export class AppComponent {
   color: string;
 }
-// #enddocregion class
-// #enddocregion

aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts

@@ -10,17 +10,6 @@ export class HighlightDirective {
   // #docregion ctor
   constructor(private el: ElementRef) { }
   // #enddocregion ctor
-  // #enddocregion
-
-  // #docregion color
-  @Input() highlightColor: string;
-  // #enddocregion color
-
-  // #docregion color-2
-  @Input() myHighlight: string;
-  // #enddocregion color-2
-
-  // #docregion
 
   // #docregion mouse-methods, host
   @HostListener('mouseenter') onMouseEnter() {
@@ -39,7 +28,14 @@ export class HighlightDirective {
   private highlight(color: string) {
     this.el.nativeElement.style.backgroundColor = color;
   }
-  // #enddocregion mouse-methods
+  // #enddocregion mouse-methods, 
 
+  // #docregion color
+  @Input() highlightColor: string;
+  // #enddocregion color
+
+  // #docregion color-2
+  @Input() myHighlight: string;
+  // #enddocregion color-2
 }
-// #enddocregion
+

aio/content/examples/attribute-directives/src/app/highlight.directive.ts

@@ -1,7 +1,5 @@
 /* tslint:disable:member-ordering */
-// #docplaster
+// #docregion imports, 
-// #docregion
-// #docregion imports
 import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 // #enddocregion imports
 

aio/content/examples/attribute-directives/ts/plnkr.no-link.html

@@ -1,253 +0,0 @@
-<html lang="en"><head></head><body><form id="mainForm" method="post" action="http://plnkr.co/edit/?p=preview" target="_self"><input type="hidden" name="files[app/app.component.ts]" value="import { Component } from '@angular/core';
-
-@Component({
-  moduleId: module.id,
-  selector: 'my-app',
-  templateUrl: './app.component.html'
-})
-export class AppComponent {
-  color: string;
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/app.module.ts]" value="import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { HighlightDirective } from './highlight.directive';
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [
-    AppComponent,
-    HighlightDirective
-  ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule { }
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/highlight.directive.ts]" value="/* tslint:disable:member-ordering */
-import { Directive, ElementRef, HostListener, Input } from '@angular/core';
-
-@Directive({
-  selector: '[myHighlight]'
-})
-export class HighlightDirective {
-
-  constructor(private el: ElementRef) { }
-
-  @Input() defaultColor: string;
-
-  @Input('myHighlight') highlightColor: string;
-
-  @HostListener('mouseenter') onMouseEnter() {
-    this.highlight(this.highlightColor || this.defaultColor || 'red');
-  }
-
-  @HostListener('mouseleave') onMouseLeave() {
-    this.highlight(null);
-  }
-
-  private highlight(color: string) {
-    this.el.nativeElement.style.backgroundColor = color;
-  }
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[main.ts]" value="import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[styles.css]" value="/* Master Styles */
-h1 {
-  color: #369;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 250%;
-}
-h2, h3 {
-  color: #444;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: lighter;
-}
-body {
-  margin: 2em;
-}
-body, input[text], button {
-  color: #888;
-  font-family: Cambria, Georgia;
-}
-a {
-  cursor: pointer;
-  cursor: hand;
-}
-button {
-  font-family: Arial;
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  cursor: hand;
-}
-button:hover {
-  background-color: #cfd8dc;
-}
-button:disabled {
-  background-color: #eee;
-  color: #aaa;
-  cursor: auto;
-}
-
-/* Navigation link styles */
-nav a {
-  padding: 5px 10px;
-  text-decoration: none;
-  margin-right: 10px;
-  margin-top: 10px;
-  display: inline-block;
-  background-color: #eee;
-  border-radius: 4px;
-}
-nav a:visited, a:link {
-  color: #607D8B;
-}
-nav a:hover {
-  color: #039be5;
-  background-color: #CFD8DC;
-}
-nav a.active {
-  color: #039be5;
-}
-
-/* items class */
-.items {
-  margin: 0 0 2em 0;
-  list-style-type: none;
-  padding: 0;
-  width: 24em;
-}
-.items li {
-  cursor: pointer;
-  position: relative;
-  left: 0;
-  background-color: #EEE;
-  margin: .5em;
-  padding: .3em 0;
-  height: 1.6em;
-  border-radius: 4px;
-}
-.items li:hover {
-  color: #607D8B;
-  background-color: #DDD;
-  left: .1em;
-}
-.items li.selected {
-  background-color: #CFD8DC;
-  color: white;
-}
-.items li.selected:hover {
-  background-color: #BBD8DC;
-}
-.items .text {
-  position: relative;
-  top: -3px;
-}
-.items .badge {
-  display: inline-block;
-  font-size: small;
-  color: white;
-  padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
-  line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
-  margin-right: .8em;
-  border-radius: 4px 0 0 4px;
-}
-/* everywhere else */
-* {
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/app.component.html]" value="<h1>My First Attribute Directive</h1>
-
-<h4>Pick a highlight color</h4>
-<div>
-  <input type=&quot;radio&quot; name=&quot;colors&quot; (click)=&quot;color='lightgreen'&quot;>Green
-  <input type=&quot;radio&quot; name=&quot;colors&quot; (click)=&quot;color='yellow'&quot;>Yellow
-  <input type=&quot;radio&quot; name=&quot;colors&quot; (click)=&quot;color='cyan'&quot;>Cyan
-</div>
-<p [myHighlight]=&quot;color&quot;>Highlight me!</p>
-
-<p [myHighlight]=&quot;color&quot; defaultColor=&quot;violet&quot;>
-  Highlight me too!
-</p>
-
-<hr>
-<p><i>Mouse over the following lines to see fixed highlights</i></p>
-
-<p [myHighlight]=&quot;'yellow'&quot;>Highlighted in yellow</p>
-<p myHighlight=&quot;orange&quot;>Highlighted in orange</p>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="files[index.html]" value="<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset=&quot;UTF-8&quot;>
-    <title>Attribute Directives</title>
-    <script>document.write('<base href=&quot;' + document.location + '&quot; />');</script>
-    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
-    <link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;>
-
-    <!-- Polyfills -->
-    <script src=&quot;https://unpkg.com/core-js/client/shim.min.js&quot;></script>
-
-    <script src=&quot;https://unpkg.com/zone.js@0.7.4?main=browser&quot;></script>
-    <script src=&quot;https://unpkg.com/systemjs@0.19.39/dist/system.src.js&quot;></script>
-
-    <script src=&quot;https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js&quot;></script>
-    <script>
-      System.import('main.js').catch(function(err){ console.error(err); });
-    </script>
-  </head>
-  <body>
-    <my-app>loading...</my-app>
-  </body>
-</html>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="tags[2]" value="attribute"><input type="hidden" name="tags[3]" value="directive"><input type="hidden" name="private" value="true"><input type="hidden" name="description" value="Angular Example - Attribute Directive"></form><script>document.getElementById("mainForm").submit();</script></body></html>

aio/content/examples/cb-ajs-quick-reference/src/app/app.component.ts

@@ -4,7 +4,6 @@ import { MovieService } from './movie.service';
 import { IMovie } from './movie';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ],

aio/content/examples/cb-ajs-quick-reference/src/app/movie-list.component.ts

@@ -8,7 +8,6 @@ import { MovieService } from './movie.service';
 
 // #docregion component
 @Component({
-  moduleId: module.id,
   selector: 'movie-list',
   templateUrl: './movie-list.component.html',
 // #docregion style-url

aio/content/examples/cb-aot-compiler/e2e-spec.ts

@@ -9,7 +9,7 @@ describe('AOT Compilation', function () {
         browser.get('');
     });
 
-    it('should load page and click button', function (done) {
+    it('should load page and click button', function (done: any) {
       let headingSelector = element.all(by.css('h1')).get(0);
       expect(headingSelector.getText()).toEqual('Hello Angular');
 

aio/content/examples/cb-aot-compiler/src/app/app.component.ts

@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })

aio/content/examples/cb-aot-compiler/src/index.html

@@ -10,9 +10,6 @@
 
     <script src="node_modules/core-js/client/shim.min.js"></script>
     <script src="node_modules/zone.js/dist/zone.js"></script>
-    <!-- #docregion moduleId -->
-    <script>window.module = 'aot';</script>
-    <!-- #enddocregion moduleId -->
   </head>
   <body>
     <my-app>Loading...</my-app>

aio/content/examples/cb-aot-compiler/ts/tsconfig-aot.json.annotated

@@ -1,25 +0,0 @@
-// #docregion
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "es2015",
-    "moduleResolution": "node",
-    "sourceMap": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": ["es2015", "dom"],
-    "noImplicitAny": true,
-    "suppressImplicitAnyIndexErrors": true
-  },
-
-  "files": [
-    "src/app/app.module.ts",
-    "src/main.ts"
-  ],
-
-  "angularCompilerOptions": {
-   "genDir": "aot",
-   "skipMetadataEmit" : true
- }
-}
-// #enddocregion

aio/content/examples/cb-component-communication/src/app/app.component.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })