docs(rc5): update docs and plunkers for rc5

Author: petebacondarwin

gulpfile.js

@@ -595,7 +595,7 @@ gulp.task('build-dart-api-docs', ['_shred-api-examples', 'dartdoc'], function()
 });
 
 gulp.task('build-plunkers', ['_copy-example-boilerplate'], function() {
-  return plunkerBuilder.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log });
+  return plunkerBuilder.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log, build: argv.build });
 });
 
 gulp.task('build-dart-cheatsheet', [], function() {

package.json

@@ -32,7 +32,7 @@
     "browser-sync": "^2.9.3",
     "canonical-path": "0.0.2",
     "cheerio": "^0.20.0",
-    "codelyzer": "0.0.22",
+    "codelyzer": "0.0.26",
     "cross-spawn": "^4.0.0",
     "del": "^2.2.0",
     "dgeni": "^0.4.0",

public/docs/_examples/animations/ts/app/app.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { HeroTeamBuilderComponent } from './hero-team-builder.component';
+import { HeroListBasicComponent } from './hero-list-basic.component';
+import { HeroListInlineStylesComponent } from './hero-list-inline-styles.component';
+import { HeroListEnterLeaveComponent } from './hero-list-enter-leave.component';
+import { HeroListEnterLeaveStatesComponent } from './hero-list-enter-leave-states.component';
+import { HeroListCombinedTransitionsComponent } from './hero-list-combined-transitions.component';
+import { HeroListTwowayComponent } from './hero-list-twoway.component';
+import { HeroListAutoComponent } from './hero-list-auto.component';
+import { HeroListGroupsComponent } from './hero-list-groups.component';
+import { HeroListMultistepComponent } from './hero-list-multistep.component';
+import { HeroListTimingsComponent } from './hero-list-timings.component';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    HeroTeamBuilderComponent,
+    HeroListBasicComponent,
+    HeroListInlineStylesComponent,
+    HeroListCombinedTransitionsComponent,
+    HeroListTwowayComponent,
+    HeroListEnterLeaveComponent,
+    HeroListEnterLeaveStatesComponent,
+    HeroListAutoComponent,
+    HeroListTimingsComponent,
+    HeroListMultistepComponent,
+    HeroListGroupsComponent
+  ],
+  bootstrap: [ HeroTeamBuilderComponent ]
+})
+export class AppModule { }

public/docs/_examples/animations/ts/app/hero-team-builder.component.ts

@@ -1,16 +1,6 @@
 import { Component } from '@angular/core';
 
 import { Heroes } from './hero.service';
-import { HeroListBasicComponent } from './hero-list-basic.component';
-import { HeroListInlineStylesComponent } from './hero-list-inline-styles.component';
-import { HeroListEnterLeaveComponent } from './hero-list-enter-leave.component';
-import { HeroListEnterLeaveStatesComponent } from './hero-list-enter-leave-states.component';
-import { HeroListCombinedTransitionsComponent } from './hero-list-combined-transitions.component';
-import { HeroListTwowayComponent } from './hero-list-twoway.component';
-import { HeroListAutoComponent } from './hero-list-auto.component';
-import { HeroListGroupsComponent } from './hero-list-groups.component';
-import { HeroListMultistepComponent } from './hero-list-multistep.component';
-import { HeroListTimingsComponent } from './hero-list-timings.component';
 
 @Component({
   selector: 'hero-team-builder',
@@ -97,18 +87,6 @@ import { HeroListTimingsComponent } from './hero-list-timings.component';
       min-height: 6em;
     }
   `],
-  directives: [
-    HeroListBasicComponent,
-    HeroListInlineStylesComponent,
-    HeroListCombinedTransitionsComponent,
-    HeroListTwowayComponent,
-    HeroListEnterLeaveComponent,
-    HeroListEnterLeaveStatesComponent,
-    HeroListAutoComponent,
-    HeroListTimingsComponent,
-    HeroListMultistepComponent,
-    HeroListGroupsComponent
-  ],
   providers: [Heroes]
 })
 export class HeroTeamBuilderComponent {

public/docs/_examples/animations/ts/app/main.ts

@@ -1,5 +1,4 @@
-import { bootstrap }      from '@angular/platform-browser-dynamic';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
 
-import { HeroTeamBuilderComponent } from './hero-team-builder.component';
-
-bootstrap(HeroTeamBuilderComponent);
+platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/architecture/ts/app/app.component.ts

@@ -1,16 +1,13 @@
 // #docregion import
 import { Component } from '@angular/core';
 // #enddocregion import
-import { HeroListComponent } from './hero-list.component';
-import { SalesTaxComponent } from './sales-tax.component';
 
 @Component({
   selector: 'my-app',
   template: `
-  <hero-list></hero-list>
-  <sales-tax></sales-tax>
-  `,
-  directives: [HeroListComponent, SalesTaxComponent]
+    <hero-list></hero-list>
+    <sales-tax></sales-tax>
+  `
 })
 // #docregion export
 export class AppComponent { }

public/docs/_examples/architecture/ts/app/app.module.ts

@@ -0,0 +1,36 @@
+import { BrowserModule }       from '@angular/platform-browser';
+import { FormsModule }         from '@angular/forms';
+// #docregion imports
+import { NgModule }     from '@angular/core';
+import { AppComponent } from './app.component';
+// #enddocregion imports
+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
+  ],
+// #docregion providers
+  providers: [
+    BackendService,
+    HeroService,
+    Logger
+  ],
+// #enddocregion providers
+  bootstrap: [ AppComponent ]
+})
+// #docregion export
+export class AppModule { }
+// #enddocregion export

public/docs/_examples/architecture/ts/app/hero-detail.component.ts

@@ -4,8 +4,7 @@ import { Hero } from './hero';
 
 @Component({
   selector: 'hero-detail',
-  templateUrl: 'app/hero-detail.component.html',
-  directives: [HeroDetailComponent]
+  templateUrl: 'app/hero-detail.component.html'
 })
 export class HeroDetailComponent {
   @Input() hero: Hero;

public/docs/_examples/architecture/ts/app/hero-list.component.ts

@@ -1,18 +1,15 @@
 import { Component, OnInit }   from '@angular/core';
 
 import { Hero }                from './hero';
-import { HeroDetailComponent } from './hero-detail.component';
 import { HeroService }         from './hero.service';
 
-// #docregion metadata
+// #docregion metadata, providers
 @Component({
   selector:    'hero-list',
   templateUrl: 'app/hero-list.component.html',
-  directives:  [HeroDetailComponent],
-  // #docregion providers
-  providers:   [HeroService]
-  // #enddocregion providers
+  providers:   [ HeroService ]
 })
+// #enddocregion providers
 // #docregion class
 export class HeroListComponent implements OnInit {
   // #enddocregion metadata

public/docs/_examples/architecture/ts/app/main.ts

@@ -1,11 +1,5 @@
-import { bootstrap }      from '@angular/platform-browser-dynamic';
-// #docregion import
-import { AppComponent } from './app.component';
-// #enddocregion import
-import { HeroService }    from './hero.service';
-import { BackendService } from './backend.service';
-import { Logger }         from './logger.service';
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
 
-// #docregion bootstrap
-bootstrap(AppComponent, [BackendService, HeroService, Logger]);
-// #enddocregion bootstrap
+platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/architecture/ts/app/mini-app.ts

@@ -0,0 +1,45 @@
+// #docplaster
+// A mini-application
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class Logger {
+  log(message: string) { console.log(message); }
+}
+
+// #docregion import-core-component
+import { Component } from '@angular/core';
+// #enddocregion import-core-component
+
+@Component({
+ selector: 'my-app',
+ template: 'Welcome to Angular 2'
+})
+export class AppComponent {
+  constructor(logger: Logger) {
+    logger.log('Let the fun begin!');
+  }
+}
+
+// #docregion module
+import { NgModule }      from '@angular/core';
+// #docregion import-browser-module
+import { BrowserModule } from '@angular/platform-browser';
+// #enddocregion import-browser-module
+@NgModule({
+// #docregion ngmodule-imports
+  imports:      [ BrowserModule ],
+// #enddocregion ngmodule-imports
+  providers:    [ Logger ],
+  declarations: [ AppComponent ],
+  exports:      [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+// #docregion export
+export class AppModule { }
+// #enddocregion export
+// #enddocregion module
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/architecture/ts/app/sales-tax.component.ts

@@ -14,7 +14,7 @@ import { TaxRateService }  from './tax-rate.service';
      {{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
     </div>
   `,
-  providers:   [SalesTaxService, TaxRateService]
+  providers: [SalesTaxService, TaxRateService]
 })
 export class SalesTaxComponent {
   constructor(private salesTaxService: SalesTaxService) { }

public/docs/_examples/router/ts/index.3.html renamed to public/docs/_examples/architecture/ts/mini-app.html

@@ -1,9 +1,7 @@
 <!DOCTYPE html>
-<!-- #docregion -->
 <html>
   <head>
-    <base href="/">
-    <title>Router Sample v.3</title>
+    <title>Architecture of Angular 2</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
@@ -17,15 +15,12 @@
 
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app/main.3') //  <-----  ONLY CHANGE
-            .catch(function(err){ console.error(err); });
+      System.import('app/mini-app').catch(function(err){ console.error(err); });
     </script>
   </head>
 
   <body>
-    <h1>Milestone 3</h1>
-    <my-app>loading...</my-app>
+    <my-app>Loading...</my-app>
   </body>
 
 </html>
-<!-- #enddocregion -->

public/docs/_examples/attribute-directives/ts/app/app.component.ts

@@ -1,14 +1,10 @@
 // #docregion
 import { Component } from '@angular/core';
 
-import { HighlightDirective } from './highlight.directive';
-
 @Component({
   selector: 'my-app',
-  templateUrl: 'app/app.component.html',
-  directives: [HighlightDirective]
+  templateUrl: 'app/app.component.html'
 })
 
 export class AppComponent { }
-
 // #enddocregion

public/docs/_examples/attribute-directives/ts/app/app.module.ts

@@ -0,0 +1,16 @@
+// #docregion
+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 { }

public/docs/_examples/attribute-directives/ts/app/main.ts

@@ -1,7 +1,5 @@
 // #docregion
-import { bootstrap }    from '@angular/platform-browser-dynamic';
-
-import { AppComponent } from './app.component';
-
-bootstrap(AppComponent);
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
 
+platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts

@@ -1,17 +1,12 @@
 import { Component } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
 
-import { MovieListComponent } from './movie-list.component';
 import { MovieService } from './movie.service';
 import { IMovie } from './movie';
-import { StringSafeDatePipe } from './date.pipe';
 
 @Component({
   selector: 'my-app',
   templateUrl: 'app/app.component.html',
   styleUrls: ['app/app.component.css'],
-  directives: [MovieListComponent, ROUTER_DIRECTIVES],
-  pipes: [StringSafeDatePipe],
   providers: [MovieService]
 })
 export class AppComponent {

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.1.ts

@@ -0,0 +1,12 @@
+// #docregion
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent }  from './app.component';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ AppComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts

@@ -0,0 +1,23 @@
+// #docregion
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule }   from '@angular/forms';
+import { RouterModule }   from '@angular/router';
+
+import { AppComponent }  from './app.component';
+import { MovieListComponent } from './movie-list.component';
+import { routes } from './app.routes';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    RouterModule.forRoot(routes, {})
+  ],
+  declarations: [
+    AppComponent,
+    MovieListComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }