Merge remote-tracking branch 'remotes/angular.io/master'

# Conflicts:
#	public/docs/ts/latest/cookbook/dependency-injection.jade
#	public/docs/ts/latest/guide/dependency-injection.jade
#	public/docs/ts/latest/guide/style-guide.jade
#	public/docs/ts/latest/quickstart.jade

README.md

@@ -98,9 +98,14 @@ Also, open any `plunkr.no-link.html` to see the code execute in plunker
 
 ### Sample end-to-end tests
 
-All samples should be covered to some degree by end-to-end tests.
+All samples should be covered to some degree by end-to-end tests:
+- `gulp run-e2e-tests` to run all TypeScript and JavaScript tests
+- `gulp run-e2e-tests --lang=dart` to run all Dart tests
+- `gulp run-e2e-tests --lang=all` to run TypeScript, JavaScript, and Dart tests
+- `gulp run-e2e-tests --filter=quickstart` to filter the examples to run, by name
+- `gulp run-e2e-tests --fast` to ignore npm install, webdriver update and boilerplate copy
 
-Run them yourself: `gulp run-e2e-tests`.
+Any combination of options is possible.
 
 
 ## Technology Used

public/docs/_examples/cb-dependency-injection/e2e-spec.js

@@ -34,11 +34,16 @@ describe('Dependency Injection Cookbook', function () {
       expect(sortedHero).toBeDefined();
     });
     
-    it('should render Hero of the Month', function () {    
+    it('should render Hero of the Month when DI deps are defined using provide()', function () {    
       var heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month"]')).get(0);
       expect(heroOfTheMonth).toBeDefined();
     });
     
+    it('should render Hero of the Month when DI deps are defined using provide object literal', function () {    
+      var heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month 2"]')).get(0);
+      expect(heroOfTheMonth).toBeDefined();
+    });
+    
     it('should render Hero Bios', function () {    
       var heroBios = element.all(by.xpath('//h3[text()="Hero Bios"]')).get(0);
       expect(heroBios).toBeDefined();
@@ -54,8 +59,13 @@ describe('Dependency Injection Cookbook', function () {
       expect(magmaPhone).toBeDefined();
     });
     
-    it('should render Hero-of-the-Month runner-ups', function () {    
-      var runnersUp =  element(by.id('rups')).getText();
+    it('should render Hero-of-the-Month runner-ups when DI deps are defined using provide()', function () {    
+      var runnersUp =  element(by.id('rups1')).getText();
+      expect(runnersUp).toContain('RubberMan, Mr. Nice');
+    });
+    
+    it('should render Hero-of-the-Month runner-ups when DI deps are defined using provide object literal', function () {    
+      var runnersUp =  element(by.id('rups2')).getText();
       expect(runnersUp).toContain('RubberMan, Mr. Nice');
     });
     

public/docs/_examples/cb-dependency-injection/ts/app/app.component.html

@@ -23,6 +23,9 @@
   <hero-of-the-month></hero-of-the-month>
 </div>
 
+<div class="di-component">
+  <hero-of-the-month-lit></hero-of-the-month-lit>
+</div>
 
 <div class="di-component">
   <h3>Unsorted Heroes</h3>

public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts

@@ -9,10 +9,13 @@ import { HeroesBaseComponent,
 import { HighlightDirective }          from './highlight.directive';
 import { ParentFinderComponent }       from './parent-finder.component';
 
+// Object Literal syntax
+import { HeroOfTheMonthLiteralsComponent } from './hero-of-the-month-literals.component';
+
 const DIRECTIVES = [
     HeroBiosComponent, HeroBiosAndContactsComponent,
     HeroesBaseComponent, SortedHeroesComponent,
-    HeroOfTheMonthComponent,
+    HeroOfTheMonthComponent, HeroOfTheMonthLiteralsComponent,
     HighlightDirective,
     ParentFinderComponent
 ];
@@ -24,7 +27,7 @@ import { UserService }        from './user.service';
 
 @Component({
   selector: 'my-app',
-  templateUrl:'app/app.component.html',
+  templateUrl: 'app/app.component.html',
   directives: DIRECTIVES,
 // #docregion providers
   providers: [LoggerService, UserContextService, UserService]
@@ -33,10 +36,10 @@ import { UserService }        from './user.service';
 export class AppComponent {
 // #enddocregion import-services
 
-  private userId:number = 1;
+  private userId: number = 1;
 
   // #docregion ctor
-  constructor(logger:LoggerService, public userContext:UserContextService) {
+  constructor(logger: LoggerService, public userContext: UserContextService) {
     userContext.loadUser(this.userId);
     logger.logInfo('AppComponent initialized');
   }

public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month-literals.component.ts

@@ -0,0 +1,67 @@
+/* tslint:disable:one-line:check-open-brace*/
+// #docplaster
+// #docregion opaque-token
+import { OpaqueToken } from '@angular/core';
+
+export const TITLE = new OpaqueToken('title');
+// #enddocregion opaque-token
+
+// #docregion hero-of-the-month
+import { Component, Inject } from '@angular/core';
+
+import { DateLoggerService,
+         MinimalLogger }     from './date-logger.service';
+import { Hero }              from './hero';
+import { HeroService }       from './hero.service';
+import { LoggerService }     from './logger.service';
+import { RUNNERS_UP,
+         runnersUpFactory }  from './runners-up';
+
+// #enddocregion hero-of-the-month
+// #docregion some-hero
+const someHero = new Hero(42, 'Magma', 'Had a great month!', '555-555-5555');
+// #enddocregion some-hero
+
+const template = `
+  <h3>{{title}}</h3>
+  <div>Winner: <strong>{{heroOfTheMonth.name}}</strong></div>
+  <div>Reason for award: <strong>{{heroOfTheMonth.description}}</strong></div>
+  <div>Runners-up: <strong id="rups2">{{runnersUp}}</strong></div>
+
+  <p>Logs:</p>
+  <div id="logs">
+    <div *ngFor="let log of logs">{{log}}</div>
+  </div>
+  `;
+
+// #docregion hero-of-the-month
+@Component({
+  selector: 'hero-of-the-month-lit',
+  template: template,
+  // #docregion providers-using-object-literals
+  providers: [
+    {provide: Hero,          useValue:    someHero},
+    {provide: TITLE,         useValue:    'Hero of the Month - Object Literals'},
+    {provide: HeroService,   useClass:    HeroService},
+    {provide: LoggerService, useClass:    DateLoggerService},
+    {provide: MinimalLogger, useExisting: LoggerService},
+    {provide: RUNNERS_UP,    useFactory:  runnersUpFactory(2), deps: [Hero, HeroService]}
+  ]
+  // #enddocregion providers-using-object-literals
+})
+export class HeroOfTheMonthLiteralsComponent {
+  logs: string[] = [];
+
+// #docregion ctor-signature
+  constructor(
+      logger: MinimalLogger,
+      public heroOfTheMonth: Hero,
+      @Inject(RUNNERS_UP) public runnersUp: string,
+      @Inject(TITLE) public title: string)
+// #enddocregion ctor-signature
+  {
+    this.logs = logger.logs;
+    logger.logInfo('starting up');
+  }
+}
+// #enddocregion hero-of-the-month

public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts

@@ -26,7 +26,7 @@ const template = `
   <h3>{{title}}</h3>
   <div>Winner: <strong>{{heroOfTheMonth.name}}</strong></div>
   <div>Reason for award: <strong>{{heroOfTheMonth.description}}</strong></div>
-  <div>Runners-up: <strong id="rups">{{runnersUp}}</strong></div>
+  <div>Runners-up: <strong id="rups1">{{runnersUp}}</strong></div>
 
   <p>Logs:</p>
   <div id="logs">

public/docs/_examples/dependency-injection/e2e-spec.js

@@ -89,6 +89,11 @@ describe('Dependency Injection Tests', function () {
       expect(element(by.css('#p3')).getText()).toEqual(expectedMsg);
     });
     
+    it('P3a (provide) displays as expected', function () {
+      expectedMsg = 'Hello from logger provided with {provide: Logger, useClass: Logger}';
+      expect(element(by.css('#p3a')).getText()).toEqual(expectedMsg);
+    });
+
     it('P4 (useClass:BetterLogger) displays as expected', function () {
       expectedMsg = 'Hello from logger provided with useClass:BetterLogger';
       expect(element(by.css('#p4')).getText()).toEqual(expectedMsg);

public/docs/_examples/dependency-injection/ts/app/providers.component.ts

@@ -1,6 +1,7 @@
+/* tslint:disable:one-line:check-open-brace*/
 // Examples of provider arrays
-//#docplaster
-import { Component, Host, Inject, Injectable,
+// #docplaster
+import { Component, Inject, Injectable,
          provide, Provider }    from '@angular/core';
 
 import { APP_CONFIG,
@@ -9,7 +10,7 @@ import { APP_CONFIG,
 import { HeroService }          from './heroes/hero.service';
 import { heroServiceProvider }  from './heroes/hero.service.provider';
 import { Logger }               from './logger.service';
-import { User, UserService }    from './user.service';
+import { UserService }    from './user.service';
 
 let template = '{{log}}';
 
@@ -18,12 +19,12 @@ let template = '{{log}}';
   selector: 'provider-1',
   template: template,
   providers:
-    //#docregion providers-1
+    // #docregion providers-1
     [Logger]
-    //#enddocregion providers-1
+    // #enddocregion providers-1
 })
 export class ProviderComponent1 {
-  log:string;
+  log: string;
   constructor(logger: Logger) {
     logger.log('Hello from logger provided with Logger class');
     this.log = logger.logs[0];
@@ -35,12 +36,12 @@ export class ProviderComponent1 {
   selector: 'provider-2',
   template: template,
   providers:
-    //#docregion providers-2
+    // #docregion providers-2
     [new Provider(Logger, {useClass: Logger})]
-    //#enddocregion providers-2
+    // #enddocregion providers-2
 })
 export class ProviderComponent2 {
-  log:string;
+  log: string;
   constructor(logger: Logger) {
     logger.log('Hello from logger provided with Provider class and useClass');
     this.log = logger.logs[0];
@@ -52,18 +53,35 @@ export class ProviderComponent2 {
   selector: 'provider-3',
   template: template,
   providers:
-    //#docregion providers-3
+    // #docregion providers-3
     [provide(Logger, {useClass: Logger})]
-    //#enddocregion providers-3
+    // #enddocregion providers-3
 })
 export class ProviderComponent3 {
-  log:string;
+  log: string;
   constructor(logger: Logger) {
     logger.log('Hello from logger provided with useClass');
     this.log = logger.logs[0];
   }
 }
 
+//////////////////////////////////////////
+@Component({
+  selector: 'provider-3a',
+  template: template,
+  providers:
+    // #docregion providers-3a
+    [{provide: Logger, useClass: Logger}]
+    // #enddocregion providers-3a
+})
+export class ProviderComponent3a {
+  log: string;
+  constructor(logger: Logger) {
+    logger.log('Hello from logger provided with {provide: Logger, useClass: Logger}');
+    this.log = logger.logs[0];
+  }
+}
+
 //////////////////////////////////////////
 class BetterLogger extends Logger {}
 
@@ -71,12 +89,12 @@ class BetterLogger extends Logger {}
   selector: 'provider-4',
   template: template,
   providers:
-    //#docregion providers-4
+    // #docregion providers-4
     [provide(Logger, {useClass: BetterLogger})]
-    //#enddocregion providers-4
+    // #enddocregion providers-4
 })
 export class ProviderComponent4 {
-  log:string;
+  log: string;
   constructor(logger: Logger) {
     logger.log('Hello from logger provided with useClass:BetterLogger');
     this.log = logger.logs[0];
@@ -87,11 +105,11 @@ export class ProviderComponent4 {
 // #docregion EvenBetterLogger
 @Injectable()
 class EvenBetterLogger {
-  logs:string[] = [];
+  logs: string[] = [];
 
   constructor(private userService: UserService) { }
 
-  log(message:string){
+  log(message: string){
     message = `Message to ${this.userService.user.name}: ${message}.`;
     console.log(message);
     this.logs.push(message);
@@ -103,13 +121,13 @@ class EvenBetterLogger {
   selector: 'provider-5',
   template: template,
   providers:
-    //#docregion providers-5
+    // #docregion providers-5
     [ UserService,
       provide(Logger, {useClass: EvenBetterLogger}) ]
-    //#enddocregion providers-5
+    // #enddocregion providers-5
 })
 export class ProviderComponent5 {
-  log:string;
+  log: string;
   constructor(logger: Logger) {
     logger.log('Hello from EvenBetterlogger');
     this.log = logger.logs[0];
@@ -119,9 +137,9 @@ export class ProviderComponent5 {
 //////////////////////////////////////////
 class NewLogger extends Logger {}
 class OldLogger {
-  logs:string[] = [];
-  log(message:string) {
-    throw new Error('Should not call the old logger!')
+  logs: string[] = [];
+  log(message: string) {
+    throw new Error('Should not call the old logger!');
   };
 }
 
@@ -129,15 +147,15 @@ class OldLogger {
   selector: 'provider-6a',
   template: template,
   providers:
-    //#docregion providers-6a
+    // #docregion providers-6a
     [ NewLogger,
       // Not aliased! Creates two instances of `NewLogger`
-      provide(OldLogger, {useClass:NewLogger}) ]
-    //#enddocregion providers-6a
+      provide(OldLogger, {useClass: NewLogger}) ]
+    // #enddocregion providers-6a
 })
 export class ProviderComponent6a {
-  log:string;
-  constructor(newLogger:NewLogger, oldLogger: OldLogger) {
+  log: string;
+  constructor(newLogger: NewLogger, oldLogger: OldLogger) {
     if (newLogger === oldLogger){
       throw new Error('expected the two loggers to be different instances');
     }
@@ -152,15 +170,15 @@ export class ProviderComponent6a {
   selector: 'provider-6b',
   template: template,
   providers:
-    //#docregion providers-6b
+    // #docregion providers-6b
     [ NewLogger,
       // Alias OldLogger w/ reference to NewLogger
       provide(OldLogger, {useExisting: NewLogger}) ]
-    //#enddocregion providers-6b
+    // #enddocregion providers-6b
 })
 export class ProviderComponent6b {
-  log:string;
-  constructor(newLogger:NewLogger, oldLogger: OldLogger) {
+  log: string;
+  constructor(newLogger: NewLogger, oldLogger: OldLogger) {
     if (newLogger !== oldLogger){
       throw new Error('expected the two loggers to be the same instance');
     }
@@ -175,19 +193,19 @@ export class ProviderComponent6b {
 let silentLogger = {
   logs: ['Silent logger says "Shhhhh!". Provided via "useValue"'],
   log: () => {}
-}
+};
 // #enddocregion silent-logger
 
 @Component({
   selector: 'provider-7',
   template: template,
   providers:
-    //#docregion providers-7
+    // #docregion providers-7
     [provide(Logger, {useValue: silentLogger})]
-    //#enddocregion providers-7
+    // #enddocregion providers-7
 })
 export class ProviderComponent7 {
-  log:string;
+  log: string;
   constructor(logger: Logger) {
     logger.log('Hello from logger provided with useValue');
     this.log = logger.logs[0];
@@ -198,7 +216,7 @@ export class ProviderComponent7 {
 @Component({
   selector: 'provider-8',
   template: template,
-  providers:[heroServiceProvider, Logger, UserService]
+  providers: [heroServiceProvider, Logger, UserService]
 })
 export class ProviderComponent8{
   // #docregion provider-8-ctor
@@ -206,7 +224,7 @@ export class ProviderComponent8{
   // #enddocregion provider-8-ctor
 
   // must be true else this component would have blown up at runtime
-  log = 'Hero service injected successfully'
+  log = 'Hero service injected successfully';
 }
 
 /////////////////
@@ -248,7 +266,7 @@ export class ProviderComponent9a {
   selector: 'provider-9b',
   template: template,
   // #docregion providers-9b
-  providers:[provide(APP_CONFIG, {useValue: CONFIG})]
+  providers: [provide(APP_CONFIG, {useValue: CONFIG})]
   // #enddocregion providers-9b
 })
 export class ProviderComponent9b {
@@ -266,12 +284,12 @@ export class ProviderComponent9b {
 @Component({
   selector: 'provider-10a',
   template: template,
-  //#docregion providers-logger
+  // #docregion providers-logger
   providers: [Logger]
-  //#enddocregion providers-logger
+  // #enddocregion providers-logger
 })
 export class ProviderComponent10a {
-  log:string;
+  log: string;
   constructor(logger: Logger) {
     logger.log('Hello from the required logger.');
     this.log = logger.logs[0];
@@ -289,8 +307,8 @@ import {Optional} from '@angular/core';
 })
 export class ProviderComponent10b {
   // #docregion provider-10-ctor
-  log:string;
-  constructor(@Optional() private logger:Logger) {  }
+  log: string;
+  constructor(@Optional() private logger: Logger) {  }
   // #enddocregion provider-10-ctor
 
   ngOnInit() {
@@ -298,16 +316,16 @@ export class ProviderComponent10b {
     // No logger? Make one!
     if (!this.logger) {
       this.logger = {
-        log: (msg:string)=> this.logger.logs.push(msg),
+        log: (msg: string) => this.logger.logs.push(msg),
         logs: []
-      }
+      };
     // #enddocregion provider-10-logger
-      this.logger.log("Optional logger was not available.")
+      this.logger.log('Optional logger was not available.');
     // #docregion provider-10-logger
     }
     // #enddocregion provider-10-logger
     else {
-      this.logger.log('Hello from the injected logger.')
+      this.logger.log('Hello from the injected logger.');
       this.log = this.logger.logs[0];
     }
     this.log = this.logger.logs[0];
@@ -322,6 +340,7 @@ export class ProviderComponent10b {
   <div id="p1"><provider-1></provider-1></div>
   <div id="p2"><provider-2></provider-2></div>
   <div id="p3"><provider-3></provider-3></div>
+  <div id="p3a"><provider-3a></provider-3a></div>
   <div id="p4"><provider-4></provider-4></div>
   <div id="p5"><provider-5></provider-5></div>
   <div id="p6a"><provider-6a></provider-6a></div>
@@ -333,10 +352,11 @@ export class ProviderComponent10b {
   <div id="p10a"><provider-10a></provider-10a></div>
   <div id="p10b"><provider-10b></provider-10b></div>
   `,
-  directives:[
+  directives: [
     ProviderComponent1,
     ProviderComponent2,
     ProviderComponent3,
+    ProviderComponent3a,
     ProviderComponent4,
     ProviderComponent5,
     ProviderComponent6a,

public/docs/_examples/karma-test-shim.js

@@ -22,60 +22,19 @@ var allSpecFiles = Object.keys(window.__karma__.files)
   .filter(isSpecFile)
   .filter(isBuiltFile);
 
-//////////////////////////
-// Load our SystemJS configuration.
-
-// map tells the System loader where to look for things
-var map = {
-  'app':                        'app',
-
-  '@angular':                   'node_modules/@angular',
-  'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
-  'rxjs':                       'node_modules/rxjs'
-};
-
-// packages tells the System loader how to load when no filename and/or no extension
-var packages = {
-  'app':                        { main: 'main.js',  defaultExtension: 'js' },
-  'rxjs':                       { defaultExtension: 'js' },
-  'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
-};
-
-var ngPackageNames = [
-  'common',
-  'compiler',
-  'core',
-  'http',
-  'platform-browser',
-  'platform-browser-dynamic',
-  'router',
-  'router-deprecated',
-  'upgrade',
-];
-
-// Add package entries for angular packages
-ngPackageNames.forEach(function(pkgName) {
-
-  // Bundled (~40 requests):  DOESN'T WORK IN KARMA OR WALLABY (YET?)
-  //packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
-
-  // Individual files (~300 requests):
-  packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
+System.config({
+  baseURL: '/base',
+  packageWithIndex: true // sadly, we can't use umd packages (yet?)
 });
 
-var config = {
-  baseURL: '/base',
-  map: map,
-  packages: packages
-}
-
-System.config(config);
-//////////////
-
-Promise.all([
+System.import('systemjs.config.js')
+  .then(function () {
+    return Promise.all([
       System.import('@angular/core/testing'),
       System.import('@angular/platform-browser-dynamic/testing')
-]).then(function (providers) {
+    ])
+  })
+  .then(function (providers) {
     var testing = providers[0];
     var testingBrowser = providers[1];
 
@@ -83,11 +42,13 @@ Promise.all([
       testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
       testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
 
-}).then(function() {
+  })
+  .then(function() {
     // Finally, load all spec files.
     // This will run the tests directly.
     return Promise.all(
       allSpecFiles.map(function (moduleName) {
         return System.import(moduleName);
       }));
-}).then(__karma__.start, __karma__.error);
+  })
+  .then(__karma__.start, __karma__.error);

public/docs/_examples/karma.conf.js

@@ -42,6 +42,7 @@ module.exports = function(config) {
       {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
       {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
 
+      {pattern: 'systemjs.config.js', included: false, watched: false},
       'karma-test-shim.js',
 
       // transpiled application & spec code paths loaded via module imports

public/docs/_examples/package.json

@@ -38,7 +38,7 @@
     "rxjs": "5.0.0-beta.6",
     "zone.js": "^0.6.12",
 
-    "angular2-in-memory-web-api": "0.0.9",
+    "angular2-in-memory-web-api": "0.0.10",
     "bootstrap": "^3.3.6"
   },
   "devDependencies": {
@@ -69,7 +69,7 @@
     "style-loader": "^0.13.1",
     "ts-loader": "^0.8.2",
     "typescript": "^1.8.10",
-    "typings": "^0.8.1",
+    "typings": "^1.0.4",
     "webpack": "^1.13.0",
     "webpack-dev-server": "^1.14.1",
     "webpack-merge": "^0.12.0"

public/docs/_examples/quickstart/js/package.1.json

@@ -22,7 +22,7 @@
     "rxjs": "5.0.0-beta.6",
     "zone.js": "0.6.12",
 
-    "angular2-in-memory-web-api": "0.0.9",
+    "angular2-in-memory-web-api": "0.0.10",
     "bootstrap": "^3.3.6"
   },
   "devDependencies": {

public/docs/_examples/quickstart/ts/package.1.json

@@ -27,13 +27,13 @@
     "rxjs": "5.0.0-beta.6",
     "zone.js": "^0.6.12",
 
-    "angular2-in-memory-web-api": "0.0.9",
+    "angular2-in-memory-web-api": "0.0.10",
     "bootstrap": "^3.3.6"
   },
   "devDependencies": {
     "concurrently": "^2.0.0",
     "lite-server": "^2.2.0",
     "typescript": "^1.8.10",
-    "typings":"^0.8.1"
+    "typings":"^1.0.4"
   }
 }

public/docs/_examples/quickstart/ts/tsconfig.1.json

@@ -8,10 +8,5 @@
     "experimentalDecorators": true,
     "removeComments": false,
     "noImplicitAny": false
-  },
-  "exclude": [
-    "node_modules",
-    "typings/main",
-    "typings/main.d.ts"
-  ]
+  }
 }

public/docs/_examples/quickstart/ts/typings.1.json

@@ -1,7 +1,7 @@
 {
-  "ambientDependencies": {
+  "globalDependencies": {
     "core-js": "registry:dt/core-js#0.0.0+20160317120654",
-    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
+    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
     "node": "registry:dt/node#4.0.0+20160509154515"
   }
 }

public/docs/_examples/server-communication/dart/.docsync.json

@@ -1,4 +1,4 @@
 {
-  "name": "HTTP client (server communication)"
+	"name": "HTTP client (server communication)",
 	"docHref": "https://angular.io/docs/dart/latest/guide/server-communication.html"
 }

public/docs/_examples/style-guide/e2e-spec.js

@@ -0,0 +1,201 @@
+describe('Style Guide', function () {
+  it('01-01', function () {
+    browser.get('#/01-01');
+
+    var pre = element(by.tagName('toh-heroes > pre'));
+    expect(pre.getText()).toContain('Bombasto');
+    expect(pre.getText()).toContain('Tornado');
+    expect(pre.getText()).toContain('Magneta');
+  });
+
+  it('02-07', function () {
+    browser.get('#/02-07');
+
+    var hero = element(by.tagName('toh-hero > div'));
+    var users = element(by.tagName('admin-users > div'));
+
+    expect(hero.getText()).toBe('hero component');
+    expect(users.getText()).toBe('users component');
+  });
+
+  it('02-08', function () {
+    browser.get('#/02-08');
+
+    var input = element(by.tagName('input[tohvalidate]'));
+    expect(input.isPresent()).toBe(true);
+  });
+
+  it('03-01', function () {
+    browser.get('#/03-01');
+
+    var div = element(by.tagName('sg-app > div'));
+    expect(div.getText()).toBe('The expected error is 42');
+  });
+
+  it('03-02', function () {
+    browser.get('#/03-02');
+
+    var divs = element.all(by.tagName('sg-app > div'));
+    expect(divs.get(0).getText()).toBe('Heroes url: api/heroes');
+    expect(divs.get(1).getText()).toBe('Villains url: api/villains');
+  });
+
+  it('03-03', function () {
+    browser.get('#/03-03');
+
+    var div = element(by.tagName('sg-app > div'));
+    expect(div.getText()).toBe('Our hero is RubberMan and He is so elastic');
+  });
+
+  it('03-04', function () {
+    browser.get('#/03-04');
+
+    var buttons = element.all(by.tagName('sg-app > button'));
+    expect(buttons.get(0).getText()).toBe('Show toast');
+    expect(buttons.get(1).getText()).toBe('Hide toast');
+  });
+
+  it('03-05', function () {
+    browser.get('#/03-05');
+
+    var lis = element.all(by.tagName('sg-app > ul > li'));
+    expect(lis.get(0).getText()).toBe('Windstorm');
+    expect(lis.get(1).getText()).toBe('Bombasto');
+    expect(lis.get(2).getText()).toBe('Magneta');
+    expect(lis.get(3).getText()).toBe('Tornado');
+  });
+
+  it('03-06', function () {
+    browser.get('#/03-06');
+
+    var lis = element.all(by.tagName('sg-app > ul > li'));
+    expect(lis.get(0).getText()).toBe('Windstorm');
+    expect(lis.get(1).getText()).toBe('Bombasto');
+    expect(lis.get(2).getText()).toBe('Magneta');
+    expect(lis.get(3).getText()).toBe('Tornado');
+  });
+
+  it('04-10', function () {
+    browser.get('#/04-10');
+
+    var div = element(by.tagName('sg-app > toh-heroes > div'));
+    expect(div.getText()).toBe('This is heroes component');
+  });
+
+  it('04-14', function () {
+    browser.get('#/04-14');
+
+    var h2 = element(by.tagName('sg-app > toh-heroes > div > h2'));
+    expect(h2.getText()).toBe('My Heroes');
+  });
+
+  it('05-02', function () {
+    browser.get('#/05-02');
+
+    var button = element(by.tagName('sg-app > toh-hero-button > button'));
+    expect(button.getText()).toBe('Hero button');
+  });
+
+  it('05-03', function () {
+    browser.get('#/05-03');
+
+    var button = element(by.tagName('sg-app > toh-hero-button > button'));
+    expect(button.getText()).toBe('Hero button');
+  });
+
+  it('05-04', function () {
+    browser.get('#/05-04');
+
+    var h2 = element(by.tagName('sg-app > toh-heroes > div > h2'));
+    expect(h2.getText()).toBe('My Heroes');
+  });
+
+  it('05-12', function () {
+    browser.get('#/05-12');
+
+    var button = element(by.tagName('sg-app > toh-hero-button > button'));
+    expect(button.getText()).toBe('OK');
+  });
+
+  it('05-13', function () {
+    browser.get('#/05-13');
+
+    var button = element(by.tagName('sg-app > toh-hero-button > button'));
+    expect(button.getText()).toBe('OK');
+  });
+
+  it('05-14', function () {
+    browser.get('#/05-14');
+
+    var toast = element(by.tagName('sg-app > toh-toast'));
+    expect(toast.getText()).toBe('...');
+  });
+
+  it('05-15', function () {
+    browser.get('#/05-15');
+
+    var heroList = element(by.tagName('sg-app > toh-hero-list'));
+    expect(heroList.getText()).toBe('...');
+  });
+
+  it('05-16', function () {
+    browser.get('#/05-16');
+
+    var hero = element(by.tagName('sg-app > toh-hero'));
+    expect(hero.getText()).toBe('...');
+  });
+
+  it('05-17', function () {
+    browser.get('#/05-17');
+
+    var section = element(by.tagName('sg-app > toh-hero-list > section'));
+    expect(section.getText()).toContain('Our list of heroes');
+    expect(section.getText()).toContain('Total powers');
+    expect(section.getText()).toContain('Average power');
+  });
+
+  it('06-01', function () {
+    browser.get('#/06-01');
+
+    var div = element(by.tagName('sg-app > div[tohhighlight]'));
+    expect(div.getText()).toBe('Bombasta');
+  });
+
+  it('06-03', function () {
+    browser.get('#/06-03');
+
+    var input = element(by.tagName('input[tohvalidator]'));
+    expect(input.isPresent()).toBe(true);
+  });
+
+  it('07-01', function () {
+    browser.get('#/07-01');
+
+    var lis = element.all(by.tagName('sg-app > ul > li'));
+    expect(lis.get(0).getText()).toBe('Windstorm');
+    expect(lis.get(1).getText()).toBe('Bombasto');
+    expect(lis.get(2).getText()).toBe('Magneta');
+    expect(lis.get(3).getText()).toBe('Tornado');
+  });
+
+  it('07-03', function () {
+    browser.get('#/07-03');
+
+    var pre = element(by.tagName('toh-heroes > pre'));
+    expect(pre.getText()).toContain('[]');
+  });
+
+  it('07-04', function () {
+    browser.get('#/07-04');
+
+    var pre = element(by.tagName('toh-app > pre'));
+    expect(pre.getText()).toContain('[]');
+  });
+
+  it('09-01', function () {
+    browser.get('#/09-01');
+
+    var button = element(by.tagName('sg-app > toh-hero-button > button'));
+    expect(button.getText()).toBe('OK');
+  });
+});

public/docs/_examples/style-guide/ts/.gitignore

@@ -1 +1,2 @@
 *.js
+!systemjs.custom.js

public/docs/_examples/style-guide/ts/01-01/app/app.component.ts

@@ -7,11 +7,12 @@ import { HeroesComponent } from './heroes/heroes.component';
 import { HeroService } from './heroes/shared/hero.service';
 
 @Component({
+  moduleId: module.id,
   selector: 'toh-app',
   template: `
       <toh-heroes></toh-heroes>
     `,
-  styleUrls: ['app/app.component.css'],
+  styleUrls: ['app.component.css'],
   directives: [HeroesComponent],
   providers: [HeroService]
 })

public/docs/_examples/style-guide/ts/02-07/app/app.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+import { HeroComponent } from './heroes/hero.component';
+import { UsersComponent } from './users/users.component';
+
+@Component({
+  selector: 'sg-app',
+  template: `
+    <toh-hero></toh-hero>
+    <admin-users></admin-users>
+  `,
+  directives: [HeroComponent, UsersComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.ts

@@ -1,8 +1,12 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
+  // #enddocregion example
+  template: '<div>hero component</div>',
+  // #docregion example
   selector: 'toh-hero'
 })
 export class HeroComponent {}

public/docs/_examples/style-guide/ts/02-07/app/users/users.component.ts

@@ -1,8 +1,12 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
+  // #enddocregion example
+  template: '<div>users component</div>',
+  // #docregion example
   selector: 'admin-users'
 })
 export class UsersComponent {}

public/docs/_examples/style-guide/ts/02-08/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { ValidateDirective } from './shared/validate.directive';
+
+@Component({
+  selector: 'sg-app',
+  template: '<input type="text" tohValidate>',
+  directives: [ValidateDirective]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/03-01/app/app.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ExceptionService } from './shared/exception.service';
+
+@Component({
+  selector: 'sg-app',
+  template: '<div>The expected error is {{errorCode}}</div>',
+  providers: [ExceptionService]
+})
+export class AppComponent implements OnInit {
+  errorCode: number;
+
+  constructor(private exceptionService: ExceptionService) { }
+
+  ngOnInit() {
+    this.errorCode = this.exceptionService.getException();
+  }
+}

public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.ts

@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 import { Injectable } from '@angular/core';
 
@@ -5,5 +6,9 @@ import { Injectable } from '@angular/core';
 // #docregion example
 export class ExceptionService {
   constructor() { }
+  // #enddocregion example
+  // testing harness
+  getException() { return 42; }
+  // #docregion example
 }
 // #enddocregion example

public/docs/_examples/style-guide/ts/03-02/app/app.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+import { HEROES_URL, VILLAINS_URL } from './shared/data.service';
+
+@Component({
+  selector: 'sg-app',
+  template: `
+    <div>Heroes url: {{heroesUrl}}</div>
+    <div>Villains url: {{villainsUrl}}</div>
+  `,
+})
+export class AppComponent {
+  heroesUrl = HEROES_URL;
+  villainsUrl = VILLAINS_URL;
+}

public/docs/_examples/style-guide/ts/03-02/app/shared/data.service.ts

@@ -1,5 +1,5 @@
 // #docregion
 // #docregion example
 export const HEROES_URL = 'api/heroes';
-export const VILLAIN_URL = 'api/villains';
+export const VILLAINS_URL = 'api/villains';
 // #enddocregion example

public/docs/_examples/style-guide/ts/03-03/app/app.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+import { HeroCollectorService } from './shared/hero-collector.service';
+import { Hero } from './shared/hero.model';
+
+@Component({
+  selector: 'sg-app',
+  template: '<div>Our hero is {{hero.name}} and {{hero.power}}</div>',
+  providers: [HeroCollectorService]
+})
+export class AppComponent implements OnInit {
+  hero: Hero;
+
+  constructor(private heroCollectorService: HeroCollectorService) { }
+
+  ngOnInit() {
+    this.hero = this.heroCollectorService.getHero();
+  }
+}

public/docs/_examples/style-guide/ts/03-03/app/shared/hero-collector.service.ts

@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 // #docregion example
 import { Injectable } from '@angular/core';
@@ -9,5 +10,16 @@ export class HeroCollectorService {
   hero: Hero;
 
   constructor() { }
+  // #enddocregion example
+  // testing harness
+  getHero() {
+    this.hero = {
+      name: 'RubberMan',
+      power: 'He is so elastic'
+    };
+
+    return this.hero;
+  }
+  // #docregion example
 }
 // #enddocregion example

public/docs/_examples/style-guide/ts/03-04/app/app.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ToastService } from './shared/toast.service';
+
+@Component({
+  selector: 'sg-app',
+  template: `
+    <button (click)="show()">Show toast</button>
+    <button (click)="hide()">Hide toast</button>
+  `,
+  providers: [ToastService]
+})
+export class AppComponent implements OnInit {
+  constructor(private toastService: ToastService) { }
+
+  hide() {
+    this.toastService.hide();
+  }
+
+  show() {
+    this.toastService.show();
+  }
+
+  ngOnInit() {
+    this.toastService.activate('Hello style-guide!');
+  }
+}

public/docs/_examples/style-guide/ts/03-04/app/shared/toast.service.ts

@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 // #docregion example
 import { Injectable } from '@angular/core';
@@ -21,5 +22,11 @@ export class ToastService {
   private log() {
     console.log(this.message);
   }
+  // #enddocregion example
+  // testing harness
+  activate(message: string) {
+    this.message = message;
+  }
+  // #docregion example
 }
 // #enddocregion example

public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.ts

@@ -19,7 +19,7 @@ export class HeroService {
   ) { }
 
   getHero(id: number) {
-    return this.http.get(`api/heroes/${id}`)
+    return this.http.get(`app/heroes/${id}`)
       .map((res: Response) => res.json().data);
   }
 

public/docs/_examples/style-guide/ts/03-05/app/app.component.html

@@ -0,0 +1,5 @@
+<ul>
+  <li *ngFor="let hero of heroes">
+    {{hero.name}}
+  </li>
+</ul>

public/docs/_examples/style-guide/ts/03-05/app/app.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+import { HeroService } from './+heroes/shared/hero.service';
+import { ExceptionService, SpinnerService, ToastService } from './shared';
+import { Hero } from './+heroes/shared/hero.model';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  providers: [HeroService, ExceptionService, SpinnerService, ToastService]
+})
+export class AppComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
+  }
+}

public/docs/_examples/style-guide/ts/03-06/app/app.component.html

@@ -0,0 +1,5 @@
+<ul>
+  <li *ngFor="let hero of heroes">
+    {{hero.name}}
+  </li>
+</ul>

public/docs/_examples/style-guide/ts/03-06/app/app.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+import { HeroService } from './+heroes/shared/hero.service';
+import { ExceptionService, SpinnerService, ToastService } from './shared';
+import { Hero } from './+heroes/shared/hero.model';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  providers: [HeroService, ExceptionService, SpinnerService, ToastService]
+})
+export class AppComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
+  }
+}

public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.html

@@ -0,0 +1 @@
+<div>This is heroes component</div>

public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts

@@ -15,12 +15,13 @@ import {
 
 @Component({
   // #enddocregion example
+  moduleId: module.id,
   providers: [EntityService, ExceptionService, SpinnerService, ToastService],
   directives: [FilterTextComponent],
   pipes: [InitCapsPipe],
   // #docregion example
   selector: 'toh-heroes',
-  templateUrl: 'app/+heroes/heroes.component.html'
+  templateUrl: 'heroes.component.html'
 })
 export class HeroesComponent implements OnInit {
   // #enddocregion example

public/docs/_examples/style-guide/ts/04-10/app/app.component.ts

@@ -6,8 +6,8 @@ import { HeroesComponent } from './+heroes/index';
 // #enddocregion example
 
 @Component({
-  selector: 'toh-app',
-  template: '<div>app</div>',
+  selector: 'sg-app',
+  template: '<toh-heroes></toh-heroes>',
   directives: [HeroesComponent]
 })
 export class AppComponent { }

public/docs/_examples/style-guide/ts/04-10/app/shared/index.ts

@@ -11,13 +11,13 @@ export * from './spinner';
 export * from './toast';
 // #enddocregion example
 
-import {EntityService} from './entity.service';
-import {ExceptionService} from './exception.service';
-import {FilterService} from './filter-text';
-import {InitCapsPipe} from './init-caps.pipe';
-import {ModalService} from './modal';
-import {SpinnerService} from './spinner';
-import {ToastService} from './toast';
+import { EntityService } from './entity.service';
+import { ExceptionService } from './exception.service';
+import { FilterService } from './filter-text';
+import { InitCapsPipe } from './init-caps.pipe';
+import { ModalService } from './modal';
+import { SpinnerService } from './spinner';
+import { ToastService } from './toast';
 
 export const BLOCK_PROVIDERS = [
   EntityService,

public/docs/_examples/style-guide/ts/04-14/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { HeroesComponent } from './heroes/heroes.component';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-heroes></toh-heroes>',
+  directives: [HeroesComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.html

@@ -2,7 +2,7 @@
 <div>
   <h2>My Heroes</h2>
   <ul class="heroes">
-    <li *ngFor="#hero of heroes">
+    <li *ngFor="let hero of heroes">
       <span class="badge">{{hero.id}}</span> {{hero.name}}
     </li>
   </ul>

public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.ts

@@ -7,6 +7,7 @@ import { Logger } from '../shared/logger.service';
 // #enddocregion example
 
 @Component({
+  moduleId: module.id,
   selector: 'toh-heroes',
   templateUrl: 'heroes.component.html',
   styleUrls:  ['heroes.component.css'],

public/docs/_examples/style-guide/ts/04-15/app/+heroes/index.ts

@@ -1,2 +0,0 @@
-// Needed for the .avoid code to compile
-export const HeroesComponent = 42;

public/docs/_examples/style-guide/ts/04-15/app/app.component.avoid.ts

@@ -1,11 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-// #docregion example
-import { HeroesComponent } from './+heroes';
-// #enddocregion example
-
-@Component({
-  selector: 'toh-app'
-})
-export class AppComponent {}

public/docs/_examples/style-guide/ts/04-16/app/+heroes/index.ts

@@ -1,2 +0,0 @@
-// Needed for the .avoid code to compile
-export const HeroesComponent = 42;

public/docs/_examples/style-guide/ts/04-16/app/app.component.avoid.ts

@@ -1,11 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-// #docregion example
-import { HeroesComponent } from './+heroes';
-// #enddocregion example
-
-@Component({
-  selector: 'toh-app'
-})
-export class AppComponent {}

public/docs/_examples/style-guide/ts/05-02/app/app.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  directives: [HeroButtonComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts

@@ -1,10 +1,15 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 // #docregion example
 /* avoid */
 
 @Component({
-  selector: 'tohHeroButton'
+  // #enddocregion example
+  moduleId: module.id,
+  // #docregion example
+  selector: 'tohHeroButton',
+  templateUrl: 'hero-button.component.html'
 })
 export class HeroButtonComponent {}
 // #enddocregion example

public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.html

@@ -0,0 +1 @@
+<button class="hero-button">Hero button</button>

public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts

@@ -1,9 +1,14 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
-  selector: 'toh-hero-button'
+  // #enddocregion example
+  moduleId: module.id,
+  // #docregion example
+  selector: 'toh-hero-button',
+  templateUrl: 'hero-button.component.html'
 })
 export class HeroButtonComponent {}
 // #enddocregion example

public/docs/_examples/style-guide/ts/05-03/app/app.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  directives: [HeroButtonComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts

@@ -1,10 +1,15 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 // #docregion example
 /* avoid */
 
 @Component({
-  selector: '[tohHeroButton]'
+  // #enddocregion example
+  moduleId: module.id,
+  // #docregion example
+  selector: '[tohHeroButton]',
+  templateUrl: 'hero-button.component.html'
 })
 export class HeroButtonComponent {}
 // #enddocregion example

public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.html

@@ -0,0 +1 @@
+<button class="hero-button">Hero button</button>

public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts

@@ -1,9 +1,14 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
-  selector: 'toh-hero-button'
+  // #enddocregion example
+  moduleId: module.id,
+  // #docregion example
+  selector: 'toh-hero-button',
+  templateUrl: 'hero-button.component.html'
 })
 export class HeroButtonComponent {}
 // #enddocregion example

public/docs/_examples/style-guide/ts/05-04/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { HeroesComponent } from './heroes/heroes.component';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-heroes></toh-heroes>',
+  directives: [HeroesComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts

@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 import { Component, OnInit } from '@angular/core';
 
@@ -5,6 +6,9 @@ import { Hero } from './shared/hero.model';
 
 // #docregion example
 @Component({
+  // #enddocregion example
+  moduleId: module.id,
+  // #docregion example
   selector: 'toh-heroes',
   templateUrl: 'heroes.component.html',
   styleUrls:  ['heroes.component.css']

public/docs/_examples/style-guide/ts/05-12/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-hero-button label="OK"></toh-hero-button>',
+  directives: [HeroButtonComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.ts

@@ -4,7 +4,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 // #docregion example
 @Component({
   selector: 'toh-hero-button',
-  template: `<button>OK</button>`
+  template: `<button>{{label}}</button>`
 })
 export class HeroButtonComponent {
   @Output() change = new EventEmitter<any>();

public/docs/_examples/style-guide/ts/05-13/app/app.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  directives: [HeroButtonComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/05-14/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { ToastComponent } from './shared/toast/toast.component';
+
+@Component({
+  selector: 'sg-app',
+  template: `<toh-toast></toh-toast>`,
+  directives: [ToastComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/05-14/app/shared/toast/toast.component.ts

@@ -2,7 +2,7 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'my-toast',
+  selector: 'toh-toast',
   template: `...`
 })
 // #docregion example

public/docs/_examples/style-guide/ts/05-15/app/app.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+import { HeroListComponent } from './heroes/hero-list/hero-list.component';
+import { HeroService } from './heroes/shared';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-hero-list></toh-hero-list>',
+  directives: [HeroListComponent],
+  providers: [HeroService]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.ts

@@ -1,7 +1,7 @@
 // #docregion example
 import { Component, OnInit } from '@angular/core';
 
-import { Hero, HeroService } from '../shared/index';
+import { Hero, HeroService } from '../shared';
 
 @Component({
   selector: 'toh-hero-list',
@@ -10,13 +10,13 @@ import { Hero, HeroService } from '../shared/index';
 export class HeroListComponent implements OnInit {
   heroes: Hero[];
   constructor(private heroService: HeroService) {}
-  getHeros() {
+  getHeroes() {
     this.heroes = [];
     this.heroService.getHeroes()
       .subscribe(heroes => this.heroes = heroes);
   }
   ngOnInit() {
-    this.getHeros();
+    this.getHeroes();
   }
 }
 // #enddocregion example

public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/index.ts

@@ -1,3 +1,3 @@
 // #docregion
-export * from './hero.model.ts';
-export * from './hero.service.ts';
+export * from './hero.model';
+export * from './hero.service';

public/docs/_examples/style-guide/ts/05-16/app/app.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { HeroComponent } from './heroes/hero.component';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  directives: [HeroComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/05-17/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { HeroListComponent } from './heroes/hero-list/hero-list.component';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-hero-list></toh-hero-list>',
+  directives: [HeroListComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts

@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 
@@ -20,6 +21,13 @@ export class HeroListComponent {
   heroes: Hero[];
   totalPowers: number;
 
+  // #enddocregion example
+  // testing harness
+  constructor() {
+    this.heroes = [];
+  }
+
+  // #docregion example
   get avgPower() {
     return this.totalPowers / this.heroes.length;
   }

public/docs/_examples/style-guide/ts/06-01/app/app.component.html

@@ -1,2 +1,2 @@
 <!-- #docregion -->
-<div [tohHighlight]>Bombasta</div>
+<div tohHighlight>Bombasta</div>

public/docs/_examples/style-guide/ts/06-01/app/app.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { HighlightDirective } from './shared/highlight.directive';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  directives: [HighlightDirective]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/06-03/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { ValidatorDirective } from './shared/validate.directive';
+
+@Component({
+  selector: 'sg-app',
+  template: '<input type="text" tohValidator>',
+  directives: [ValidatorDirective]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/07-01/app/app.component.html

@@ -0,0 +1,5 @@
+<ul>
+  <li *ngFor="let hero of heroes">
+    {{hero.name}}
+  </li>
+</ul>

public/docs/_examples/style-guide/ts/07-01/app/app.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+import { HeroService } from './heroes/shared/hero.service';
+import { Hero } from './heroes/shared/hero.model';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  providers: [HeroService]
+})
+export class AppComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
+  }
+}

public/docs/_examples/style-guide/ts/07-04/app/app.component.ts

@@ -0,0 +1,19 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { HeroArena, HeroService, Hero } from './heroes/shared';
+
+@Component({
+  selector: 'toh-app',
+  template: '<pre>{{heroes | json}}</pre>',
+  providers: [HeroArena, HeroService]
+})
+export class AppComponent {
+  heroes: Hero[] = [];
+
+  constructor(private heroArena: HeroArena) { }
+
+  ngOnInit() {
+    this.heroArena.getParticipants().subscribe(heroes => this.heroes = heroes);
+  }
+}

public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero-arena.service.ts

@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';
@@ -10,5 +11,11 @@ export class HeroArena {
   constructor(
     private heroService: HeroService,
     private http: Http) {}
+    // #enddocregion example
+    // test harness
+    getParticipants() {
+      return this.heroService.getHeroes();
+    }
+    // #docregion example
 }
 // #enddocregion example

public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/index.ts

@@ -1,3 +1,4 @@
 // #docregion
 export * from './hero.model';
 export * from './hero.service';
+export * from './hero-arena.service';

public/docs/_examples/style-guide/ts/09-01/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-hero-button></toh-hero-button>',
+  directives: [HeroButtonComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.ts

@@ -4,7 +4,7 @@ import { Component, OnInit } from '@angular/core';
 // #docregion example
 @Component({
   selector: 'toh-hero-button',
-  template: `<button>OK<button>`
+  template: `<button>OK</button>`
 })
 export class HeroButtonComponent implements OnInit {
   ngOnInit() {

public/docs/_examples/style-guide/ts/app/app.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

public/docs/_examples/style-guide/ts/app/app.component.ts

@@ -0,0 +1,65 @@
+import { Component } from '@angular/core';
+import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
+
+import { AppComponent as S0101 } from '../01-01/app/app.component';
+import { AppComponent as S0207 } from '../02-07/app/app.component';
+import { AppComponent as S0208 } from '../02-08/app/app.component';
+import { AppComponent as S0301 } from '../03-01/app/app.component';
+import { AppComponent as S0302 } from '../03-02/app/app.component';
+import { AppComponent as S0303 } from '../03-03/app/app.component';
+import { AppComponent as S0304 } from '../03-04/app/app.component';
+import { AppComponent as S0305 } from '../03-05/app/app.component';
+import { AppComponent as S0306 } from '../03-06/app/app.component';
+import { AppComponent as S0410 } from '../04-10/app/app.component';
+import { AppComponent as S0414 } from '../04-14/app/app.component';
+import { AppComponent as S0502 } from '../05-02/app/app.component';
+import { AppComponent as S0503 } from '../05-03/app/app.component';
+import { AppComponent as S0504 } from '../05-04/app/app.component';
+import { AppComponent as S0512 } from '../05-12/app/app.component';
+import { AppComponent as S0513 } from '../05-13/app/app.component';
+import { AppComponent as S0514 } from '../05-14/app/app.component';
+import { AppComponent as S0515 } from '../05-15/app/app.component';
+import { AppComponent as S0516 } from '../05-16/app/app.component';
+import { AppComponent as S0517 } from '../05-17/app/app.component';
+import { AppComponent as S0601 } from '../06-01/app/app.component';
+import { AppComponent as S0603 } from '../06-03/app/app.component';
+import { AppComponent as S0701 } from '../07-01/app/app.component';
+import { AppComponent as S0703 } from '../07-03/app/app.component';
+import { AppComponent as S0704 } from '../07-04/app/app.component';
+import { AppComponent as S0901 } from '../09-01/app/app.component';
+
+@Component({
+  selector: 'my-app',
+  templateUrl: 'app/app.component.html',
+  directives: [ROUTER_DIRECTIVES]
+})
+@RouteConfig([
+  { path: '/01-01', name: '01-01', component: S0101 },
+  { path: '/02-07', name: '02-07', component: S0207 },
+  { path: '/02-08', name: '02-08', component: S0208 },
+  { path: '/03-01', name: '03-01', component: S0301 },
+  { path: '/03-02', name: '03-02', component: S0302 },
+  { path: '/03-03', name: '03-03', component: S0303 },
+  { path: '/03-04', name: '03-04', component: S0304 },
+  { path: '/03-05', name: '03-05', component: S0305 },
+  { path: '/03-06', name: '03-06', component: S0306 },
+  { path: '/04-10', name: '04-10', component: S0410 },
+  { path: '/04-14', name: '04-14', component: S0414 },
+  { path: '/05-02', name: '05-02', component: S0502 },
+  { path: '/05-03', name: '05-03', component: S0503 },
+  { path: '/05-04', name: '05-04', component: S0504 },
+  { path: '/05-12', name: '05-12', component: S0512 },
+  { path: '/05-13', name: '05-13', component: S0513 },
+  { path: '/05-14', name: '05-14', component: S0514 },
+  { path: '/05-15', name: '05-15', component: S0515 },
+  { path: '/05-16', name: '05-16', component: S0516 },
+  { path: '/05-17', name: '05-17', component: S0517 },
+  { path: '/06-01', name: '06-01', component: S0601 },
+  { path: '/06-03', name: '06-03', component: S0603 },
+  { path: '/07-01', name: '07-01', component: S0701 },
+  { path: '/07-03', name: '07-03', component: S0703 },
+  { path: '/07-04', name: '07-04', component: S0704 },
+  { path: '/09-01', name: '09-01', component: S0901 },
+
+])
+export class AppComponent { }

public/docs/_examples/style-guide/ts/app/hero-data.ts

@@ -0,0 +1,11 @@
+export class HeroData {
+  createDb() {
+    let heroes = [
+      { id: '1', name: 'Windstorm' },
+      { id: '2', name: 'Bombasto' },
+      { id: '3', name: 'Magneta' },
+      { id: '4', name: 'Tornado' }
+    ];
+    return {heroes};
+  }
+}

public/docs/_examples/style-guide/ts/app/main.ts

@@ -0,0 +1,17 @@
+import { bootstrap }        from '@angular/platform-browser-dynamic';
+import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
+import { XHRBackend, HTTP_PROVIDERS } from '@angular/http';
+import { HashLocationStrategy, LocationStrategy } from '@angular/common';
+import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
+import 'rxjs/add/operator/map';
+
+import { HeroData } from './hero-data';
+import { AppComponent }     from './app.component';
+
+bootstrap(AppComponent, [
+  ROUTER_PROVIDERS,
+  HTTP_PROVIDERS,
+  { provide: LocationStrategy, useClass: HashLocationStrategy },
+  { provide: XHRBackend, useClass: InMemoryBackendService },
+  { provide: SEED_DATA,  useClass: HeroData }
+  ]);

public/docs/_examples/style-guide/ts/index.html

@@ -17,6 +17,7 @@
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.js"></script>
+    <script src="systemjs.custom.js"></script>
     <script>
       System.import('app').catch(function(err){ console.error(err); });
     </script>

public/docs/_examples/style-guide/ts/systemjs.custom.js

@@ -0,0 +1,44 @@
+(function(global) {
+  // extra local packages
+  var packageNames = [
+    '01-01',
+    '02-07',
+    '02-08',
+    '03-01',
+    '03-02',
+    '03-03',
+    '03-04',
+    '03-05', '03-05/app/shared', '03-05/app/shared/spinner', '03-05/app/shared/toast',
+    '03-06', '03-06/app/shared', '03-06/app/shared/spinner', '03-06/app/shared/toast',
+    '04-10', '04-10/app/shared', '04-10/app/+heroes', '04-10/app/shared/spinner', '04-10/app/shared/toast',
+      '04-10/app/shared/filter-text', '04-10/app/shared/modal', '04-10/app/shared/nav',
+    '04-14',
+    '05-02',
+    '05-03',
+    '05-04',
+    '05-12',
+    '05-13',
+    '05-14',
+    '05-15', '05-15/app/heroes/shared',
+    '05-16',
+    '05-17',
+    '06-01',
+    '06-03',
+    '07-01',
+    '07-03',
+    '07-04', '07-04/app/heroes/shared',
+    '09-01'
+  ];
+
+  var packages = {};
+  packageNames.forEach(function(pkgName) {
+    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
+  });
+
+  var config = {
+    packages: packages
+  }
+
+  System.config(config);
+
+})(this);

public/docs/_examples/styleguide/js/app.js

@@ -4,11 +4,9 @@
 var AppComponent = ng
     // #docregion component
     .Component({
-      selector: 'my-app'
-    })
+      selector: 'my-app',
     // #enddocregion
     // #docregion view
-    .View({
       template: '<h1 id="output">My First Angular 2 App</h1>'
     })
     // #enddocregion

public/docs/_examples/styleguide/js/index.html

@@ -6,9 +6,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.sfx.dev.js"></script>
-    <script src="app.js"></script>
+    <!-- Polyfill(s) 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>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err); });
+    </script>
   </head>
+
   <body>
     <my-app>foo2</my-app>
   </body>

public/docs/_examples/styleguide/ts/app.ts

@@ -1,13 +1,13 @@
 // #docregion
 // #docregion import
-import {Component, View, bootstrap} from '@angular/angular2';
+import { Component } from '@angular/core';
+import { bootstrap } from '@angular/platform-browser-dynamic';
+
 // #enddocregion
 
 // #docregion class-w-annotations
 @Component({
-  selector: 'my-app'
-})
-@View({
+  selector: 'my-app',
   template: '<h1 id="output">My First Angular 2 App</h1>'
 })
 // #docregion class

public/docs/_examples/systemjs.config.js

@@ -32,15 +32,20 @@
     'upgrade',
   ];
 
-  // Add package entries for angular packages
-  ngPackageNames.forEach(function(pkgName) {
+  // Individual files (~300 requests):
+  function packIndex(pkgName) {
+    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
+  }
 
   // Bundled (~40 requests):
+  function packUmd(pkgName) {
     packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
+  };
 
-    // Individual files (~300 requests):
-    //packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
-  });
+  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
+
+  // Add package entries for angular packages
+  ngPackageNames.forEach(setPackageConfig);
 
   var config = {
     map: map,

public/docs/_examples/testing/ts/tsconfig.1.json

@@ -9,10 +9,5 @@
     "removeComments": false,
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true
-  },
-  "exclude": [
-    "node_modules",
-    "typings/main",
-    "typings/main.d.ts"
-  ]
+  }
 }

public/docs/_examples/toh-6/ts/app/dashboard.component.ts

@@ -16,17 +16,17 @@ export class DashboardComponent implements OnInit {
   heroes: Hero[] = [];
 
   constructor(
-    private _router: Router,
-    private _heroService: HeroService) {
+    private router: Router,
+    private heroService: HeroService) {
   }
 
   ngOnInit() {
-    this._heroService.getHeroes()
+    this.heroService.getHeroes()
       .then(heroes => this.heroes = heroes.slice(1,5));
   }
 
   gotoDetail(hero: Hero) {
     let link = ['HeroDetail', { id: hero.id }];
-    this._router.navigate(link);
+    this.router.navigate(link);
   }
 }

public/docs/_examples/toh-6/ts/app/hero-detail.component.ts

@@ -1,10 +1,11 @@
 // #docplaster
 // #docregion
-import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { RouteParams } from '@angular/router-deprecated';
 
 import { Hero }        from './hero';
 import { HeroService } from './hero.service';
+
 @Component({
   selector: 'my-hero-detail',
   templateUrl: 'app/hero-detail.component.html',
@@ -17,16 +18,16 @@ export class HeroDetailComponent implements OnInit {
   navigated = false; // true if navigated here
 
   constructor(
-    private _heroService: HeroService,
-    private _routeParams: RouteParams) {
+    private heroService: HeroService,
+    private routeParams: RouteParams) {
   }
 
   // #docregion ngOnInit
   ngOnInit() {
-    if (this._routeParams.get('id') !== null) {
-      let id = +this._routeParams.get('id');
+    if (this.routeParams.get('id') !== null) {
+      let id = +this.routeParams.get('id');
       this.navigated = true;
-      this._heroService.getHero(id)
+      this.heroService.getHero(id)
           .then(hero => this.hero = hero);
     } else {
       this.navigated = false;
@@ -36,7 +37,7 @@ export class HeroDetailComponent implements OnInit {
   // #enddocregion ngOnInit
   // #docregion save
   save() {
-    this._heroService
+    this.heroService
         .save(this.hero)
         .then(hero => {
           this.hero = hero; // saved hero, w/ id if new
@@ -45,9 +46,11 @@ export class HeroDetailComponent implements OnInit {
         .catch(error => this.error = error); // TODO: Display error message
   }
   // #enddocregion save
+  // #docregion goback
   goBack(savedHero: Hero = null) {
     this.close.emit(savedHero);
     if (this.navigated) { window.history.back(); }
   }
+  // #enddocregion goback
 }
 

public/docs/_examples/toh-6/ts/app/hero.service.ts

@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import { Injectable }    from '@angular/core';
-import { Http, Headers } from '@angular/http';
+import { Headers, Http } from '@angular/http';
 
 // #docregion rxjs
 import 'rxjs/add/operator/toPromise';

public/docs/_examples/toh-6/ts/app/heroes.component.ts

@@ -21,11 +21,11 @@ export class HeroesComponent implements OnInit {
   error: any;
 
   constructor(
-    private _router: Router,
-    private _heroService: HeroService) { }
+    private router: Router,
+    private heroService: HeroService) { }
 
   getHeroes() {
-    this._heroService
+    this.heroService
         .getHeroes()
         .then(heroes => this.heroes = heroes)
         .catch(error => this.error = error); // TODO: Display error message
@@ -46,7 +46,7 @@ export class HeroesComponent implements OnInit {
   // #docregion delete
   delete(hero: Hero, event: any) {
     event.stopPropagation();
-    this._heroService
+    this.heroService
         .delete(hero)
         .then(res => {
           this.heroes = this.heroes.filter(h => h !== hero);
@@ -66,6 +66,6 @@ export class HeroesComponent implements OnInit {
   }
 
   gotoDetail() {
-    this._router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
+    this.router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
   }
 }

public/docs/_examples/tsconfig.json

@@ -9,10 +9,5 @@
     "removeComments": false,
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true
-  },
-  "exclude": [
-    "node_modules",
-    "typings/main",
-    "typings/main.d.ts"
-  ]
+  }
 }

public/docs/_examples/typings.json

@@ -1,7 +1,7 @@
 {
-  "ambientDependencies": {
+  "globalDependencies": {
     "core-js": "registry:dt/core-js#0.0.0+20160317120654",
-    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
+    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
     "node": "registry:dt/node#4.0.0+20160509154515"
   }
 }

public/docs/_examples/wallaby.js

@@ -8,6 +8,7 @@ module.exports = function () {
     files: [
       // System.js for module loading
       {pattern: 'node_modules/systemjs/dist/system.js', instrument: false},
+      {pattern: 'systemjs.config.js', instrument: false},
 
       // Polyfills
       {pattern: 'node_modules/core-js/client/shim.min.js', instrument: false},
@@ -38,12 +39,18 @@ module.exports = function () {
 
     bootstrap: function (wallaby) {
       wallaby.delayStart();
-      systemConfig();
 
-      Promise.all([
+      System.config({
+        packageWithIndex: true // sadly, we can't use umd packages (yet?)
+      });
+
+      System.import('systemjs.config.js')
+        .then(function () {
+          return Promise.all([
             System.import('@angular/core/testing'),
             System.import('@angular/platform-browser-dynamic/testing')
           ])
+        })
         .then(function (providers) {
           var testing = providers[0];
           var testingBrowser = providers[1];
@@ -52,7 +59,6 @@ module.exports = function () {
             testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
             testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
 
-
           // Load all spec files
           return Promise.all(wallaby.tests.map(function (specFile) {
             return System.import(specFile);
@@ -66,58 +72,6 @@ module.exports = function () {
             throw e;
           }, 0);
         });
-
-      //////////////////////////
-      // SystemJS configuration.
-      function systemConfig() {
-
-        // map tells the System loader where to look for things
-        var map = {
-          'app':                        'app',
-
-          '@angular':                   'node_modules/@angular',
-          'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
-          'rxjs':                       'node_modules/rxjs'
-        };
-
-        // packages tells the System loader how to load when no filename and/or no extension
-        var packages = {
-          'app':                        { main: 'main.js',  defaultExtension: 'js' },
-          'rxjs':                       { defaultExtension: 'js' },
-          'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
-        };
-
-        var ngPackageNames = [
-          'common',
-          'compiler',
-          'core',
-          'http',
-          'platform-browser',
-          'platform-browser-dynamic',
-          'router',
-          'router-deprecated',
-          'upgrade',
-        ];
-
-        // Add package entries for angular packages
-        ngPackageNames.forEach(function(pkgName) {
-
-          // Bundled (~40 requests):  DOESN'T WORK IN WALLABY OR KARMA (YET?)
-          // packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
-
-          // Individual files (~300 requests):
-          packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
-        });
-
-        var config = {
-          map: map,
-          packages: packages
-        }
-
-        System.config(config);
-      }
-      //////////////////
     }
   };
-
 };

public/docs/_examples/webpack/ts/package.webpack.json

@@ -41,7 +41,7 @@
     "style-loader": "^0.13.1",
     "ts-loader": "^0.8.1",
     "typescript": "^1.8.9",
-    "typings": "^0.7.12",
+    "typings": "^1.0.4",
     "webpack": "^1.12.14",
     "webpack-dev-server": "^1.14.1",
     "webpack-merge": "^0.9.0"