docs(cb-barrels): Add barrels cookbook recipe

public/_includes/_util-fns.jade

@@ -2,7 +2,7 @@
 
 //- _docsFor: used to identify the language this version of the docs if for;
 //- Should be one of: 'ts', 'dart' or 'js'. Set in lang specific _util-fns file.
-- var _docsFor = ''; 
+- var _docsFor = '';
 
 //- Should match `_docsFor`, but in this case provides the full capitalized
 //- name of the language.
@@ -29,6 +29,10 @@
 - var _Promise = 'Promise';
 - var _Observable = 'Observable';
 
+//- Location of sample code
+- var _liveLink = 'live link';
+
+
 //- Used to prefix identifiers that are private. In Dart this will be '_'.
 - var _priv = '';
 
@@ -46,7 +50,7 @@ mixin adjExPath(path)
     | #{adjustExamplePath(path)}
   else
     | #{path}
-  
+
 mixin includeShared(filePath, region)
   - var newPath = translatePath(filePath, region);
   !=partial(newPath)
@@ -68,13 +72,43 @@ mixin makeExample(_filePath, region, _title, stylePatterns)
       .example-title #{title}
   code-example(language="#{language}" format="#{format}")
     != styleString(frag, stylePatterns)
-
-//- Like makeExample, but doesn't show line numbers and
-//- title is appened with `(excerpt)` if it doesn't already
-//- end with a parenthetical remark.
-mixin makeExcerpt(_filePath, region, _title, stylePatterns)
-  - if (_title && !_title.match(/\([\w ]+\)$/)) _title = _title + ' (excerpt)';
-  +makeExample(_filePath, region, _title, stylePatterns)(format='.')
+
+//- Like makeExample, but the first argument is a path that is
+//- relative to the project root. Unless title is defined,
+//- the project relative path will be used.
+mixin makeProjExample(projRootRelativePath, region, title, stylePatterns)
+  - var relPath = projRootRelativePath.trim();
+  - var filePath = getExampleName() + '/ts/' + relPath;
+  - if (!title) {
+  -   // Is path like styles.1.css? Then drop the '.1' qualifier:
+  -   var matches = relPath.match(/^(.*)\.\d(\.\w+)$/);
+  -   title = matches ? matches[1] + matches[2] : relPath;
+  - }
+  +makeExample(filePath, region, title, stylePatterns)
+
+//- Like makeExample, but doesn't show line numbers, and the first
+//- argument is a path that is relative to the example project root.
+//- Unless title is defined, the project relative path will be used.
+//- Title will always end with a phrase in parentheses; if no such
+//- ending is given, then the title will be suffixed with
+//- either "(excerpt)", or "(#{region})" when region is defined.
+mixin makeExcerpt(projRootRelativePath, region, title, stylePatterns)
+  - var relPath = projRootRelativePath.trim();
+  - var filePath = getExampleName() + '/ts/' + relPath;
+  - if (!title) {
+  -   // Is path like styles.1.css? Then drop the '.1' qualifier:
+  -   var matches = relPath.match(/^(.*)\.\d(\.\w+)$/);
+  -   title = matches ? matches[1] + matches[2] : relPath;
+  - }
+  - var excerpt = region || 'excerpt';
+  - if (title && !title.match(/\([\w ]+\)$/)) title = title + ' (' + excerpt + ')';
+  +makeExample(filePath, region, title, stylePatterns)(format='.')
+
+//- Extract the doc example name from `current`.
+- var getExampleName = function() {
+-   var dir = current.path[current.path.length - 1];
+-   return dir == 'latest' ? current.source : dir;
+- };
 
 mixin makeTabs(filePaths, regions, tabNames, stylePatterns)
   - filePaths = strSplit(filePaths);
@@ -134,7 +168,7 @@ script.
     el.style.display = isVerbose ? 'block' : 'none';
     var el = document.querySelector('button.verbose.on');
     el.style.display = isVerbose ? 'none' : 'block';
-    
+
     CCSStylesheetRuleStyle('main','.l-verbose-section', 'display',
       isVerbose ? 'block' : 'none');
   }

public/docs/_examples/architecture/ts/index.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <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>

public/docs/_examples/attribute-directives/ts/index.html

@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <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>

public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html

@@ -10,7 +10,7 @@
     <!-- #enddocregion style -->
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <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>

public/docs/_examples/tutorial/e2e-spec.js → public/docs/_examples/cb-barrels/e2e-spec.js

@@ -4,7 +4,6 @@ describe('Tutorial', function () {
     browser.get('');
   });
 
-
   function getPageStruct() {
     hrefEles = element.all(by.css('my-app a'));
 

public/docs/_examples/tutorial/ts/app/app.component.ts → public/docs/_examples/cb-barrels/ts/app/app.component.ts

@@ -1,12 +1,11 @@
+// #docregion imports
 import { Component } from '@angular/core';
 import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
-
-import { HeroesComponent } from './heroes.component';
-import { HeroDetailComponent } from './hero-detail.component';
+import { HeroesComponent, HeroDetailComponent, HeroService } from './heroes';
 import { DashboardComponent } from './dashboard.component';
-import { HeroService } from './hero.service';
 
 @Component({
+// #enddocregion
   selector: 'my-app',
   template: `
     <h1>{{title}}</h1>
@@ -27,5 +26,5 @@ import { HeroService } from './hero.service';
   {path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent}
 ])
 export class AppComponent {
-  title = 'Tour of Heroes';
+  title = 'Tour of Heroes - Barrels';
 }

public/docs/_examples/cb-barrels/ts/app/dashboard.component.css

@@ -0,0 +1,60 @@
+[class*='col-'] {
+  float: left;
+}
+*, *:after, *:before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+h3 {
+  text-align: center; margin-bottom: 0;
+}
+[class*='col-'] {
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+[class*='col-']:last-of-type {
+  padding-right: 0;
+}
+.grid {
+  margin: 0;
+}
+.col-1-4 {
+  width: 25%;
+}
+.module {
+  padding: 20px;
+  text-align: center;
+  color: #eee;
+  max-height: 120px;
+  min-width: 120px;
+  background-color: #607D8B;
+  border-radius: 2px;
+}
+h4 {
+  position: relative;
+}
+.module:hover {
+  background-color: #EEE;
+  cursor: pointer;
+  color: #607d8b;
+}
+.grid-pad {
+  padding: 10px 0;
+}
+.grid-pad > [class*='col-']:last-of-type {
+  padding-right: 20px;
+}
+@media (max-width: 600px) {
+  .module {
+    font-size: 10px;
+    max-height: 75px; }
+}
+@media (max-width: 1024px) {
+  .grid {
+    margin: 0;
+  }
+  .module {
+    min-width: 60px;
+  }
+}

public/docs/_examples/tutorial/ts/app/dashboard.component.ts → public/docs/_examples/cb-barrels/ts/app/dashboard.component.ts

@@ -1,10 +1,10 @@
+// #docregion imports
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router-deprecated';
-
-import { Hero } from './hero';
-import { HeroService } from './hero.service';
+import { Hero, HeroService } from './heroes';
 
 @Component({
+// #enddocregion
   selector: 'my-dashboard',
   templateUrl: 'app/dashboard.component.html',
   styleUrls: ['app/dashboard.component.css']

public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.html

@@ -0,0 +1,10 @@
+<div *ngIf="hero">
+  <h2>{{hero.name}} details!</h2>
+  <div>
+    <label>id: </label>{{hero.id}}</div>
+  <div>
+    <label>name: </label>
+    <input [(ngModel)]="hero.name" placeholder="name"/>
+  </div>
+  <button (click)="goBack()">Back</button>
+</div>

public/docs/_examples/tutorial/ts/app/hero-detail.component.ts → public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.ts

@@ -1,13 +1,13 @@
+// #docregion imports
 import { Component, OnInit } from '@angular/core';
 import { RouteParams } from '@angular/router-deprecated';
-
-import { Hero } from './hero';
-import { HeroService } from './hero.service';
+import { HeroService, Hero } from '../shared';
 
 @Component({
+// #enddocregion
   selector: 'my-hero-detail',
-  templateUrl: 'app/hero-detail.component.html',
-  styleUrls: ['app/hero-detail.component.css']
+  templateUrl: 'app/heroes/hero-detail/hero-detail.component.html',
+  styleUrls: ['app/heroes/hero-detail/hero-detail.component.css']
 })
 export class HeroDetailComponent implements OnInit {
   hero: Hero;

public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/index.ts

@@ -0,0 +1,2 @@
+// #docregion
+export * from './hero-detail.component';

public/docs/_examples/tutorial/ts/app/heroes.component.ts → public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.ts

@@ -1,13 +1,14 @@
+// #docregion imports
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router-deprecated';
-import { HeroService } from './hero.service';
-import { HeroDetailComponent } from './hero-detail.component';
-import { Hero } from './hero';
+import { HeroService, Hero } from './shared';
+import { HeroDetailComponent } from './hero-detail'
 
 @Component({
+// #enddocregion
   selector: 'my-heroes',
-  templateUrl: 'app/heroes.component.html',
-  styleUrls: ['app/heroes.component.css'],
+  templateUrl: 'app/heroes/heroes.component.html',
+  styleUrls: ['app/heroes/heroes.component.css'],
   directives: [HeroDetailComponent]
 })
 export class HeroesComponent implements OnInit {

public/docs/_examples/cb-barrels/ts/app/heroes/index.ts

@@ -0,0 +1,4 @@
+// #docregion
+export * from './hero-detail';
+export * from './heroes.component';
+export * from './shared';

public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.model.ts

@@ -0,0 +1,5 @@
+export class Hero {
+  id: number;
+  name: string;
+}
+

public/docs/_examples/tutorial/ts/app/hero.service.ts → public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.service.ts

@@ -1,9 +1,10 @@
+// #docregion imports
 import { Injectable } from '@angular/core';
-
 import { HEROES }     from './mock-heroes';
 
 @Injectable()
 export class HeroService {
+// #enddocregion
   getHeroes() {
     return Promise.resolve(HEROES);
   }

public/docs/_examples/cb-barrels/ts/app/heroes/shared/index.ts

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

public/docs/_examples/cb-barrels/ts/app/heroes/shared/mock-heroes.ts

@@ -0,0 +1,17 @@
+// #docregion imports
+import { Hero } from './hero.model';
+
+export var HEROES: Hero[] = [
+// #enddocregion
+
+  {"id": 11, "name": "Mr. Nice"},
+  {"id": 12, "name": "Narco"},
+  {"id": 13, "name": "Bombasto"},
+  {"id": 14, "name": "Celeritas"},
+  {"id": 15, "name": "Magneta"},
+  {"id": 16, "name": "RubberMan"},
+  {"id": 17, "name": "Dynama"},
+  {"id": 18, "name": "Dr IQ"},
+  {"id": 19, "name": "Magma"},
+  {"id": 20, "name": "Tornado"}
+];

public/docs/_examples/tutorial/ts/app/main.ts → public/docs/_examples/cb-barrels/ts/app/main.ts

@@ -1,10 +1,11 @@
+// #docregion imports
 import { bootstrap } from '@angular/platform-browser-dynamic';
 import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
-
-import { HeroService } from './hero.service';
+import { HeroService } from './heroes';
 import { AppComponent } from './app.component';
 
 bootstrap(AppComponent, [
+// #enddocregion
   ROUTER_PROVIDERS,
   HeroService
 ]);

public/docs/_examples/cb-barrels/ts/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <title>Angular 2 Tour of Heroes - Barrels</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <!--#docregion packages  -->
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.config({
+        packages: {
+          'app/heroes': {main: 'index.js', defaultExtension: 'js'},
+          'app/heroes/hero-detail': {main: 'index.js', defaultExtension: 'js'},
+          'app/heroes/shared': {main: 'index.js', defaultExtension: 'js'}
+        }
+      });
+      System.import('app').catch(function(err){ console.error(err); });
+    </script>
+    <!--#enddocregion packages  -->
+  </head>
+
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+</html>

public/docs/_examples/cb-barrels/ts/plnkr.json

@@ -0,0 +1,8 @@
+{
+  "description": "Cookbook: Barrels",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags": ["cookbook", "barrels"]
+}

public/docs/_examples/cb-component-communication/ts/index.html

@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="demo.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <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>

public/docs/_examples/cb-dependency-injection/ts/index.html

@@ -11,7 +11,7 @@
     <!-- #enddocregion style -->
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <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>