From 9f83cf53210583daf0b450aa728f591ee55401d6 Mon Sep 17 00:00:00 2001 From: Jim Cooper Date: Mon, 16 May 2016 00:26:36 -0600 Subject: [PATCH] docs(cb-barrels): add barrels cookbook --- public/docs/_examples/cb-barrels/e2e-spec.js | 110 ++++++++++++++++++ .../cb-barrels/ts/app/app.component.css | 28 +++++ .../cb-barrels/ts/app/app.component.ts | 30 +++++ .../cb-barrels/ts/app/dashboard.component.css | 60 ++++++++++ .../ts/app/dashboard.component.html | 8 ++ .../cb-barrels/ts/app/dashboard.component.ts | 25 ++++ .../hero-detail/hero-detail.component.css | 29 +++++ .../hero-detail/hero-detail.component.html | 10 ++ .../hero-detail/hero-detail.component.ts | 27 +++++ .../ts/app/heroes/hero-detail/index.ts | 2 + .../ts/app/heroes/heroes.component.css | 59 ++++++++++ .../ts/app/heroes/heroes.component.html | 14 +++ .../ts/app/heroes/heroes.component.ts | 33 ++++++ .../cb-barrels/ts/app/heroes/index.ts | 4 + .../ts/app/heroes/shared/hero.model.ts | 5 + .../ts/app/heroes/shared/hero.service.ts | 17 +++ .../cb-barrels/ts/app/heroes/shared/index.ts | 3 + .../ts/app/heroes/shared/mock-heroes.ts | 17 +++ .../docs/_examples/cb-barrels/ts/app/main.ts | 11 ++ .../cb-barrels/ts/example-config.json | 0 .../docs/_examples/cb-barrels/ts/index.html | 35 ++++++ .../docs/_examples/cb-barrels/ts/plnkr.json | 8 ++ public/docs/dart/latest/cookbook/_data.json | 6 + public/docs/dart/latest/cookbook/barrels.jade | 1 + public/docs/js/latest/cookbook/_data.json | 5 + public/docs/js/latest/cookbook/barrels.jade | 1 + public/docs/ts/latest/cookbook/_data.json | 5 + public/docs/ts/latest/cookbook/barrels.jade | 106 +++++++++++++++++ 28 files changed, 659 insertions(+) create mode 100644 public/docs/_examples/cb-barrels/e2e-spec.js create mode 100644 public/docs/_examples/cb-barrels/ts/app/app.component.css create mode 100644 public/docs/_examples/cb-barrels/ts/app/app.component.ts create mode 100644 public/docs/_examples/cb-barrels/ts/app/dashboard.component.css create mode 100644 public/docs/_examples/cb-barrels/ts/app/dashboard.component.html create mode 100644 public/docs/_examples/cb-barrels/ts/app/dashboard.component.ts create mode 100644 public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.css create mode 100644 public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.html create mode 100644 public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.ts create mode 100644 public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/index.ts create mode 100644 public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.css create mode 100644 public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.html create mode 100644 public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.ts create mode 100644 public/docs/_examples/cb-barrels/ts/app/heroes/index.ts create mode 100644 public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.model.ts create mode 100644 public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.service.ts create mode 100644 public/docs/_examples/cb-barrels/ts/app/heroes/shared/index.ts create mode 100644 public/docs/_examples/cb-barrels/ts/app/heroes/shared/mock-heroes.ts create mode 100644 public/docs/_examples/cb-barrels/ts/app/main.ts create mode 100644 public/docs/_examples/cb-barrels/ts/example-config.json create mode 100644 public/docs/_examples/cb-barrels/ts/index.html create mode 100644 public/docs/_examples/cb-barrels/ts/plnkr.json create mode 100644 public/docs/dart/latest/cookbook/barrels.jade create mode 100644 public/docs/js/latest/cookbook/barrels.jade create mode 100644 public/docs/ts/latest/cookbook/barrels.jade diff --git a/public/docs/_examples/cb-barrels/e2e-spec.js b/public/docs/_examples/cb-barrels/e2e-spec.js new file mode 100644 index 0000000000..a109efb5a8 --- /dev/null +++ b/public/docs/_examples/cb-barrels/e2e-spec.js @@ -0,0 +1,110 @@ +describe('Tutorial', function () { + + beforeAll(function () { + browser.get(''); + }); + + function getPageStruct() { + hrefEles = element.all(by.css('my-app a')); + + return { + hrefs: hrefEles, + myDashboardHref: hrefEles.get(0), + myDashboardParent: element(by.css('my-app my-dashboard')), + topHeroes: element.all(by.css('my-app my-dashboard .module.hero')), + + myHeroesHref: hrefEles.get(1), + myHeroesParent: element(by.css('my-app my-heroes')), + allHeroes: element.all(by.css('my-app my-heroes li')), + + heroDetail: element(by.css('my-app my-hero-detail')) + } + } + + it('should be able to see the start screen', function () { + var page = getPageStruct(); + expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices'); + expect(page.myDashboardHref.getText()).toEqual("Dashboard"); + expect(page.myHeroesHref.getText()).toEqual("Heroes"); + }); + + it('should be able to see dashboard choices', function () { + var page = getPageStruct(); + expect(page.topHeroes.count()).toBe(4, "should be 4 dashboard hero choices"); + }); + + it('should be able to toggle the views', function () { + var page = getPageStruct(); + + expect(page.myDashboardParent.element(by.css('h3')).getText()).toEqual('Top Heroes'); + page.myHeroesHref.click().then(function() { + expect(page.myDashboardParent.isPresent()).toBe(false, 'should no longer see dashboard element'); + expect(page.allHeroes.count()).toBeGreaterThan(4, "should be more than 4 heroes shown"); + return page.myDashboardHref.click(); + }).then(function() { + expect(page.myDashboardParent.isPresent()).toBe(true, 'should once again see the dashboard element'); + }); + + }); + + it('should be able to edit details from "Dashboard" view', function () { + var page = getPageStruct(); + expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available'); + var heroEle = page.topHeroes.get(3); + var heroDescrEle = heroEle.element(by.css('h4')); + var heroDescr; + return heroDescrEle.getText().then(function(text) { + heroDescr = text; + return heroEle.click(); + }).then(function() { + return editDetails(page, heroDescr, '-foo'); + }).then(function() { + expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be back'); + expect(heroDescrEle.getText()).toEqual(heroDescr + '-foo'); + }); + }); + + it('should be able to edit details from "Heroes" view', function () { + var page = getPageStruct(); + expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be present'); + var viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details')); + var heroEle, heroDescr; + page.myHeroesHref.click().then(function() { + expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present'); + expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be present'); + expect(viewDetailsButtonEle.isPresent()).toBe(false, 'viewDetails button should not yet be present'); + heroEle = page.allHeroes.get(2); + return heroEle.getText(); + }).then(function(text) { + // remove leading 'id' from the element + heroDescr = text.substr(text.indexOf(' ')+1); + return heroEle.click(); + }).then(function() { + expect(viewDetailsButtonEle.isDisplayed()).toBe(true, 'viewDetails button should now be visible'); + return viewDetailsButtonEle.click(); + }).then(function() { + return editDetails(page, heroDescr, '-bar'); + }).then(function() { + expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be back'); + expect(heroEle.getText()).toContain(heroDescr + '-bar'); + expect(viewDetailsButtonEle.isPresent()).toBe(false, 'viewDetails button should again NOT be present'); + }); + }); + + function editDetails(page, origValue, textToAdd) { + expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present'); + expect(page.myHeroesParent.isPresent()).toBe(false, 'myHeroes element should NOT be present'); + expect(page.heroDetail.isDisplayed()).toBe(true, 'should be able to see hero-details'); + var inputEle = page.heroDetail.element(by.css('input')); + expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box'); + var backButtonEle = page.heroDetail.element(by.css('button')); + expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button'); + var detailTextEle = page.heroDetail.element(by.css('div h2')); + expect(detailTextEle.getText()).toContain(origValue); + return sendKeys(inputEle, textToAdd).then(function () { + expect(detailTextEle.getText()).toContain(origValue + textToAdd); + return backButtonEle.click(); + }); + } + +}); diff --git a/public/docs/_examples/cb-barrels/ts/app/app.component.css b/public/docs/_examples/cb-barrels/ts/app/app.component.css new file mode 100644 index 0000000000..246b8c875b --- /dev/null +++ b/public/docs/_examples/cb-barrels/ts/app/app.component.css @@ -0,0 +1,28 @@ +nav a { + padding: 5px 10px; + text-decoration: none; + margin-top: 10px; + display: inline-block; + background-color: #eee; + border-radius: 4px; +} +nav a:visited, a:link { + color: #607D8B; +} +nav a:hover { + color: #039be5; + background-color: #CFD8DC; +} +nav a.router-link-active { + color: #039be5; +} +h1 { + font-size: 1.2em; + color: #999; + margin-bottom: 0; +} +h2 { + font-size: 2em; + margin-top: 0; + padding-top: 0; +} \ No newline at end of file diff --git a/public/docs/_examples/cb-barrels/ts/app/app.component.ts b/public/docs/_examples/cb-barrels/ts/app/app.component.ts new file mode 100644 index 0000000000..926eafc1c9 --- /dev/null +++ b/public/docs/_examples/cb-barrels/ts/app/app.component.ts @@ -0,0 +1,30 @@ +// #docregion imports +import { Component } from '@angular/core'; +import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated'; +import { HeroesComponent, HeroDetailComponent, HeroService } from './heroes'; +import { DashboardComponent } from './dashboard.component'; + +@Component({ +// #enddocregion + selector: 'my-app', + template: ` +

{{title}}

+ + + `, + styleUrls: ['app/app.component.css'], + directives: [ROUTER_DIRECTIVES], + providers: [HeroService] +}) +@RouteConfig([ + // {path: '/', redirectTo: ['Dashboard'] }, + {path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true}, + {path: '/heroes', name: 'Heroes', component: HeroesComponent}, + {path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent} +]) +export class AppComponent { + title = 'Tour of Heroes - Barrels'; +} diff --git a/public/docs/_examples/cb-barrels/ts/app/dashboard.component.css b/public/docs/_examples/cb-barrels/ts/app/dashboard.component.css new file mode 100644 index 0000000000..82349dc658 --- /dev/null +++ b/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; + } +} diff --git a/public/docs/_examples/cb-barrels/ts/app/dashboard.component.html b/public/docs/_examples/cb-barrels/ts/app/dashboard.component.html new file mode 100644 index 0000000000..dfec651c4a --- /dev/null +++ b/public/docs/_examples/cb-barrels/ts/app/dashboard.component.html @@ -0,0 +1,8 @@ +

Top Heroes

+
+
+
+

{{hero.name}}

+
+
+
diff --git a/public/docs/_examples/cb-barrels/ts/app/dashboard.component.ts b/public/docs/_examples/cb-barrels/ts/app/dashboard.component.ts new file mode 100644 index 0000000000..1239207374 --- /dev/null +++ b/public/docs/_examples/cb-barrels/ts/app/dashboard.component.ts @@ -0,0 +1,25 @@ +// #docregion imports +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router-deprecated'; +import { Hero, HeroService } from './heroes'; + +@Component({ +// #enddocregion + selector: 'my-dashboard', + templateUrl: 'app/dashboard.component.html', + styleUrls: ['app/dashboard.component.css'] +}) +export class DashboardComponent implements OnInit { + heroes: Hero[] = []; + + constructor(private heroService: HeroService, private _router: Router) { } + + ngOnInit() { + this.heroService.getHeroes().then(heroes => this.heroes = heroes.slice(1,5)); + } + + gotoDetail(hero: Hero) { + let link = ['HeroDetail', { id: hero.id }]; + this._router.navigate(link); + } +} diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.css b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.css new file mode 100644 index 0000000000..b5ab6e6e0b --- /dev/null +++ b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.css @@ -0,0 +1,29 @@ +label { + display: inline-block; + width: 3em; + margin: .5em 0; + color: #607D8B; + font-weight: bold; +} +input { + height: 2em; + font-size: 1em; + padding-left: .4em; +} +button { + margin-top: 20px; + font-family: Arial; + background-color: #eee; + border: none; + padding: 5px 10px; + border-radius: 4px; + cursor: pointer; cursor: hand; +} +button:hover { + background-color: #cfd8dc; +} +button:disabled { + background-color: #eee; + color: #ccc; + cursor: auto; +} diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.html b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.html new file mode 100644 index 0000000000..deb47fb3e5 --- /dev/null +++ b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.html @@ -0,0 +1,10 @@ +
+

{{hero.name}} details!

+
+ {{hero.id}}
+
+ + +
+ +
diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.ts new file mode 100644 index 0000000000..c945a8f6dd --- /dev/null +++ b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.ts @@ -0,0 +1,27 @@ +// #docregion imports +import { Component, OnInit } from '@angular/core'; +import { RouteParams } from '@angular/router-deprecated'; +import { HeroService, Hero } from '../shared'; + +@Component({ +// #enddocregion + selector: 'my-hero-detail', + 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; + + constructor(private heroService: HeroService, + private routeParams: RouteParams) { + } + + ngOnInit() { + let id = +this.routeParams.get('id'); + this.heroService.getHero(id).then(hero => this.hero = hero); + } + + goBack() { + window.history.back(); + } +} diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/index.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/index.ts new file mode 100644 index 0000000000..e7552e28b4 --- /dev/null +++ b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/index.ts @@ -0,0 +1,2 @@ +// #docregion +export * from './hero-detail.component'; diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.css b/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.css new file mode 100644 index 0000000000..35e45af98d --- /dev/null +++ b/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.css @@ -0,0 +1,59 @@ +.selected { + background-color: #CFD8DC !important; + color: white; +} +.heroes { + margin: 0 0 2em 0; + list-style-type: none; + padding: 0; + width: 15em; +} +.heroes li { + cursor: pointer; + position: relative; + left: 0; + background-color: #EEE; + margin: .5em; + padding: .3em 0; + height: 1.6em; + border-radius: 4px; +} +.heroes li:hover { + color: #607D8B; + background-color: #DDD; + left: .1em; +} +.heroes li.selected:hover { + background-color: #BBD8DC !important; + color: white; +} +.heroes .text { + position: relative; + top: -3px; +} +.heroes .badge { + display: inline-block; + font-size: small; + color: white; + padding: 0.8em 0.7em 0 0.7em; + background-color: #607D8B; + line-height: 1em; + position: relative; + left: -1px; + top: -4px; + height: 1.8em; + margin-right: .8em; + border-radius: 4px 0 0 4px; +} +button { + font-family: Arial; + background-color: #eee; + border: none; + padding: 5px 10px; + border-radius: 4px; + cursor: pointer; + cursor: hand; +} +button:hover { + background-color: #cfd8dc; +} diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.html b/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.html new file mode 100644 index 0000000000..6a973bb007 --- /dev/null +++ b/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.html @@ -0,0 +1,14 @@ +
+

My Heroes

+ +
+

{{selectedHero.name | uppercase}} is my hero

+ +
+
diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.ts new file mode 100644 index 0000000000..6e3b2848f2 --- /dev/null +++ b/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.ts @@ -0,0 +1,33 @@ +// #docregion imports +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router-deprecated'; +import { HeroService, Hero } from './shared'; +import { HeroDetailComponent } from './hero-detail' + +@Component({ +// #enddocregion + selector: 'my-heroes', + templateUrl: 'app/heroes/heroes.component.html', + styleUrls: ['app/heroes/heroes.component.css'], + directives: [HeroDetailComponent] +}) +export class HeroesComponent implements OnInit { + heroes: Hero[]; + selectedHero: Hero; + + constructor(private heroService: HeroService, private router: Router) { } + + getHeroes() { + this.heroService.getHeroes().then(heroes => this.heroes = heroes); + } + + gotoDetail() { + this.router.navigate(['HeroDetail', { id: this.selectedHero.id }]); + } + + ngOnInit() { + this.getHeroes(); + } + + onSelect(hero: Hero) { this.selectedHero = hero; } +} diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/index.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/index.ts new file mode 100644 index 0000000000..45fa911acd --- /dev/null +++ b/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'; diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.model.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.model.ts new file mode 100644 index 0000000000..ce714d1c00 --- /dev/null +++ b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.model.ts @@ -0,0 +1,5 @@ +export class Hero { + id: number; + name: string; +} + diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.service.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.service.ts new file mode 100644 index 0000000000..11d60b97a6 --- /dev/null +++ b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.service.ts @@ -0,0 +1,17 @@ +// #docregion imports +import { Injectable } from '@angular/core'; +import { HEROES } from './mock-heroes'; + +@Injectable() +export class HeroService { +// #enddocregion + getHeroes() { + return Promise.resolve(HEROES); + } + + getHero(id: number) { + return Promise.resolve(HEROES).then( + heroes => heroes.filter(hero => hero.id === id)[0] + ); + } +} diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/shared/index.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/index.ts new file mode 100644 index 0000000000..27516fdedd --- /dev/null +++ b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/index.ts @@ -0,0 +1,3 @@ +// #docregion +export * from './hero.model'; +export * from './hero.service'; diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/shared/mock-heroes.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/mock-heroes.ts new file mode 100644 index 0000000000..80d661a439 --- /dev/null +++ b/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"} +]; diff --git a/public/docs/_examples/cb-barrels/ts/app/main.ts b/public/docs/_examples/cb-barrels/ts/app/main.ts new file mode 100644 index 0000000000..09288fb174 --- /dev/null +++ b/public/docs/_examples/cb-barrels/ts/app/main.ts @@ -0,0 +1,11 @@ +// #docregion imports +import { bootstrap } from '@angular/platform-browser-dynamic'; +import { ROUTER_PROVIDERS } from '@angular/router-deprecated'; +import { HeroService } from './heroes'; +import { AppComponent } from './app.component'; + +bootstrap(AppComponent, [ +// #enddocregion + ROUTER_PROVIDERS, + HeroService +]); diff --git a/public/docs/_examples/cb-barrels/ts/example-config.json b/public/docs/_examples/cb-barrels/ts/example-config.json new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/_examples/cb-barrels/ts/index.html b/public/docs/_examples/cb-barrels/ts/index.html new file mode 100644 index 0000000000..a09ff8c91f --- /dev/null +++ b/public/docs/_examples/cb-barrels/ts/index.html @@ -0,0 +1,35 @@ + + + + + Angular 2 Tour of Heroes - Barrels + + + + + + + + + + + + + + + + + + + Loading... + + diff --git a/public/docs/_examples/cb-barrels/ts/plnkr.json b/public/docs/_examples/cb-barrels/ts/plnkr.json new file mode 100644 index 0000000000..5f0eca25e7 --- /dev/null +++ b/public/docs/_examples/cb-barrels/ts/plnkr.json @@ -0,0 +1,8 @@ +{ + "description": "Cookbook: Barrels", + "files":[ + "!**/*.d.ts", + "!**/*.js" + ], + "tags": ["cookbook", "barrels"] +} diff --git a/public/docs/dart/latest/cookbook/_data.json b/public/docs/dart/latest/cookbook/_data.json index 9b2545ec5e..9113b5d0ff 100644 --- a/public/docs/dart/latest/cookbook/_data.json +++ b/public/docs/dart/latest/cookbook/_data.json @@ -12,6 +12,12 @@ "hide": true }, + "barrels": { + "title": "Creating Barrels", + "intro": "Use a barrel to import from a single module that consolidate many related modules", + "hide": true + }, + "component-communication": { "title": "Component Interaction", "intro": "Share information between different directives and components" diff --git a/public/docs/dart/latest/cookbook/barrels.jade b/public/docs/dart/latest/cookbook/barrels.jade new file mode 100644 index 0000000000..6778b6af28 --- /dev/null +++ b/public/docs/dart/latest/cookbook/barrels.jade @@ -0,0 +1 @@ +!= partial("../../../_includes/_ts-temp") diff --git a/public/docs/js/latest/cookbook/_data.json b/public/docs/js/latest/cookbook/_data.json index 2d9ada59f1..08ea9eb0b8 100644 --- a/public/docs/js/latest/cookbook/_data.json +++ b/public/docs/js/latest/cookbook/_data.json @@ -11,6 +11,11 @@ "intro": "Learn how Angular 1 concepts and techniques map to Angular 2" }, + "barrels": { + "title": "Creating Barrels", + "intro": "Use a barrel to import from a single module that consolidate many related modules" + }, + "component-communication": { "title": "Component Interaction", "intro": "Share information between different directives and components" diff --git a/public/docs/js/latest/cookbook/barrels.jade b/public/docs/js/latest/cookbook/barrels.jade new file mode 100644 index 0000000000..6778b6af28 --- /dev/null +++ b/public/docs/js/latest/cookbook/barrels.jade @@ -0,0 +1 @@ +!= partial("../../../_includes/_ts-temp") diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json index a90160de7b..b3d8131c18 100644 --- a/public/docs/ts/latest/cookbook/_data.json +++ b/public/docs/ts/latest/cookbook/_data.json @@ -11,6 +11,11 @@ "intro": "Learn how Angular 1 concepts and techniques map to Angular 2" }, + "barrels": { + "title": "Creating Barrels", + "intro": "Use a barrel to import from a single module that consolidate many related modules" + }, + "component-communication": { "title": "Component Interaction", "intro": "Share information between different directives and components" diff --git a/public/docs/ts/latest/cookbook/barrels.jade b/public/docs/ts/latest/cookbook/barrels.jade new file mode 100644 index 0000000000..be113555ed --- /dev/null +++ b/public/docs/ts/latest/cookbook/barrels.jade @@ -0,0 +1,106 @@ +include ../_util-fns + + +:marked + This cookbook contains recipes for creating barrels to simplify file imports. In Angular 2 apps, we frequently find + ouselves importing multiple files together (for example, in the tutorial app, the hero component and the hero service + are both frequently imported together into other components). We can create a single export that contains them both + so they can be easily imported together. This is called a barrel. + + +:marked + ## Table of contents + + [Creating a barrel](#creating-a-barrel) + + [Importing a barrel](#importing-a-barrel) + +:marked + **See the [live example](/resources/live-examples/cb-barrels/ts/plnkr.html)**. + +.l-main-section + +:marked + ## Creating a barrel + + The `Hero` model, `HeroDetailComponent`, `HeroesComponent`, and `HeroService` are all frequently used together. + It would make things easier if we could import them all together. To make this possible, each of them + is moved into a `heroes` directory and organized into sub-directories with their supporting files: + +.filetree + .file heroes + .children + .file heroes.component.css + .file heroes.component.html + .file heroes.component.ts + .file hero-detail + .children + .file hero-detail.component.css + .file hero-detail.component.html + .file hero-detail.component.ts + .file shared + .children + .file hero.service.ts + .file hero.ts + .file mock-heroes.ts + +:marked + Since there are two exportable items in the shared folder, an `index.ts` file is created in that + folder, and then each of the files in that folder are imported and re-exported. This is our first + barrel. Since `mock-heroes.ts` is not used outside of the barrel it is not re-exported: ++makeExample('cb-barrels/ts/app/heroes/shared/index.ts', '', 'app/heroes/shared/index.ts') + +:marked + Even though there is only a single exportable item in the hero-detail folder, a barrel is + created in that folder so that all our imports are consistent, rather than some importing + barrels like this: + + (`import { ... } from './shared'`) + + and others importing files like this: + + `import { ... } from './hero-detail/hero-detail.component'` ++makeExample('cb-barrels/ts/app/heroes/hero-detail/index.ts', '', 'app/heroes/hero-detail/index.ts') + +:marked + Our final barrel is in the heroes folder and it consolidates each of the other barrels into one. + An `index.ts` file is created in the heroes folder and then the components and barrels we just + created are all imported and re-exported: ++makeExample('cb-barrels/ts/app/heroes/index.ts', '', 'app/heroes/index.ts') + +:marked + The SystemJs module loader is not yet able to identify our new barrels, so + they are added manually as packages in index.html. ++makeExample('cb-barrels/ts/index.html', 'packages', 'index.html') + +:marked + The files inside the barrels can now be imported through a single import. + + +:marked + ## Importing a barrel + The app component imports the `HeroesComponent`, `HeroDetailComponent`, and `HeroService` with a + single import: ++makeExample('cb-barrels/ts/app/app.component.ts', 'imports', 'app/app.component.ts') + +:marked + The dashboard component imports `Hero` and `HeroService` with a single import: ++makeExample('cb-barrels/ts/app/dashboard.component.ts', 'imports', 'app/dashboard.component.ts') + +:marked + The `main.ts` bootstrap file imports `HeroService`: ++makeExample('cb-barrels/ts/app/main.ts', 'imports', 'app/main.ts') + +.alert.is-helpful + :marked + Do not attempt to reference the barrel index file from within the barrel. + These files are still imported individually as shown below. + +:marked + The `HeroDetailComponent` is updated to import the `HeroService` and `Hero` model from the + `shared` barrel. ++makeExample('cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.ts', 'imports', 'app/heroes/hero-detail/hero-detail.component.ts') + +:marked + And finally, the `HeroesComponent` imports the the `HeroDetailComponent` from it's barrel: ++makeExample('cb-barrels/ts/app/heroes/heroes.component.ts', 'imports', 'app/heroes/heroes.component.ts')