Merge remote-tracking branch 'angulario/master'

Author: Foxandxss

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() {
@@ -604,20 +604,19 @@ gulp.task('build-dart-cheatsheet', [], function() {
 
 gulp.task('dartdoc', ['pub upgrade'], function() {
   const ngRepoPath = ngPathFor('dart');
-  if (argv.fast && fs.existsSync(path.resolve(ngRepoPath, 'doc'))) {
-    gutil.log('Skipping dartdoc: --fast flag enabled and "doc" dir exists');
+  if (argv.fast && fs.existsSync(path.resolve(ngRepoPath, 'docs', 'api'))) {
+    gutil.log('Skipping dartdoc: --fast flag enabled and "docs/api" dir exists');
     return true;
   }
   checkAngularProjectPath(ngRepoPath);
   const topLevelLibFilePath = path.resolve(ngRepoPath, 'lib', 'angular2.dart');
   const tmpPath = topLevelLibFilePath + '.disabled';
-  if (!fs.existsSync(topLevelLibFilePath)) throw new Error(`Missing file: ${topLevelLibFilePath}`);
-  fs.renameSync(topLevelLibFilePath, tmpPath);
+  renameIfExistsSync(topLevelLibFilePath, tmpPath);
   gutil.log(`Hiding top-level angular2 library: ${topLevelLibFilePath}`);
-  const dartdoc = spawnExt('dartdoc', ['--output', 'doc/api', '--add-crossdart'], { cwd: ngRepoPath});
+  const dartdoc = spawnExt('dartdoc', ['--output', 'docs/api', '--add-crossdart'], { cwd: ngRepoPath});
   return dartdoc.promise.finally(() => {
       gutil.log(`Restoring top-level angular2 library: ${topLevelLibFilePath}`);
-      fs.renameSync(tmpPath, topLevelLibFilePath);
+      renameIfExistsSync(tmpPath, topLevelLibFilePath);
   })
 });
 
@@ -1235,15 +1234,14 @@ function buildDartCheatsheet() {
 
 
 function buildApiDocsForDart() {
-  const apiDir = 'api';
   const vers = 'latest';
   const dab = require('./tools/dart-api-builder/dab')(ANGULAR_IO_PROJECT_PATH);
   const log = dab.log;
 
   log.level = _dgeniLogLevel;
   const dabInfo = dab.dartPkgConfigInfo;
-  dabInfo.ngIoDartApiDocPath = path.join(DOCS_PATH, 'dart', vers, apiDir);
-  dabInfo.ngDartDocPath = path.join(ngPathFor('dart'), 'doc', apiDir);
+  dabInfo.ngIoDartApiDocPath = path.join(DOCS_PATH, 'dart', vers, 'api');
+  dabInfo.ngDartDocPath = path.join(ngPathFor('dart'), 'docs', 'api');
   // Exclude API entries for developer/internal libraries. Also exclude entries for
   // the top-level catch all "angular2" library (otherwise every entry appears twice).
   dabInfo.excludeLibRegExp = new RegExp(/^(?!angular2)|\.testing|_|codegen|^angular2$/);
@@ -1455,3 +1453,11 @@ function checkAngularProjectPath(_ngPath) {
   if (fs.existsSync(ngPath)) return;
   throw new Error('API related tasks require the angular2 repo to be at ' + ngPath);
 }
+
+function renameIfExistsSync(oldPath, newPath) {
+  if (fs.existsSync(oldPath)) {
+      fs.renameSync(oldPath, newPath);
+  } else {
+    gutil.log(`renameIfExistsSync cannot find file to rename: ${oldPath}`);
+  }
+}

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/_includes/_util-fns.jade

@@ -38,6 +38,15 @@
 //- Location of sample code
 - var _liveLink = 'live link';
 
+//- NgModule related
+- var _AppModuleVsAppComp = 'AppModule'
+- var _appModuleTsVsAppCompTs = 'app/app.module.ts'
+- var _appModuleTsVsMainTs = 'app/app.module.ts'
+- var _bootstrapModule = 'bootstrapModule'
+- var _moduleVsComp = 'module'
+- var _moduleVsRootComp = 'module'
+- var _platformBrowserDynamicVsBootStrap = 'platformBrowserDynamic'
+
 //- Other
 - var _truthy = 'truthy';
 - var _falsey = 'falsey';

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 { }