From 4ec1736f1842f9fdf9dd85b37f73565df918ada0 Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Wed, 4 Jan 2017 18:56:49 +0000 Subject: [PATCH 1/2] chore: convert relative templateUrl/styleUrls to have ./ --- .../_examples/animations/ts/app/hero-list-auto.component.ts | 2 +- .../_examples/animations/ts/app/hero-list-basic.component.ts | 2 +- .../ts/app/hero-list-combined-transitions.component.ts | 2 +- .../ts/app/hero-list-enter-leave-states.component.ts | 2 +- .../animations/ts/app/hero-list-enter-leave.component.ts | 2 +- .../_examples/animations/ts/app/hero-list-groups.component.ts | 2 +- .../animations/ts/app/hero-list-inline-styles.component.ts | 2 +- .../animations/ts/app/hero-list-multistep.component.ts | 2 +- .../animations/ts/app/hero-list-timings.component.ts | 2 +- .../_examples/animations/ts/app/hero-list-twoway.component.ts | 2 +- .../_examples/architecture/ts/app/hero-detail.component.ts | 2 +- .../docs/_examples/architecture/ts/app/hero-list.component.ts | 2 +- .../_examples/attribute-directives/ts/app/app.component.1.ts | 2 +- .../_examples/attribute-directives/ts/app/app.component.ts | 2 +- .../cb-a1-a2-quick-reference/ts/app/app.component.ts | 4 ++-- .../cb-a1-a2-quick-reference/ts/app/movie-list.component.ts | 4 ++-- public/docs/_examples/cb-aot-compiler/ts/app/app.component.ts | 2 +- .../cb-component-communication/ts/app/app.component.ts | 2 +- .../cb-component-relative-paths/ts/app/some.component.ts | 4 ++-- .../_examples/cb-dependency-injection/ts/app/app.component.ts | 2 +- .../cb-dynamic-form/ts/app/dynamic-form-question.component.ts | 2 +- .../cb-dynamic-form/ts/app/dynamic-form.component.ts | 2 +- .../ts/app/reactive/hero-form-reactive.component.ts | 2 +- .../ts/app/template/hero-form-template1.component.ts | 2 +- .../ts/app/template/hero-form-template2.component.ts | 2 +- public/docs/_examples/cb-i18n/ts/app/app.component.ts | 2 +- .../cb-ts-to-js/js-es6-decorators/app/app.component.es6 | 2 +- .../cb-ts-to-js/js-es6-decorators/app/confirm.component.es6 | 2 +- .../js-es6-decorators/app/hero-title.component.es6 | 2 +- .../docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6 | 2 +- .../_examples/cb-ts-to-js/js-es6/app/confirm.component.es6 | 2 +- .../_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6 | 2 +- public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts | 2 +- public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts | 2 +- .../docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts | 2 +- .../cli-quickstart/ts/src/app/cli-quickstart.component.ts | 4 ++-- .../component-styles/ts/app/quest-summary.component.ts | 4 ++-- public/docs/_examples/forms/ts/app/hero-form.component.ts | 2 +- .../docs/_examples/homepage-hello-world/ts/app/hello_world.ts | 2 +- public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts | 2 +- .../_examples/lifecycle-hooks/ts/app/do-check.component.ts | 2 +- .../_examples/lifecycle-hooks/ts/app/on-changes.component.ts | 2 +- public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts | 2 +- .../_examples/ngmodule/ts/app/contact/contact.component.3.ts | 4 ++-- .../_examples/ngmodule/ts/app/contact/contact.component.ts | 4 ++-- public/docs/_examples/ngmodule/ts/app/core/title.component.ts | 2 +- public/docs/_examples/ngmodule/ts/app/title.component.ts | 2 +- public/docs/_examples/pipes/ts/app/app.component.ts | 2 +- public/docs/_examples/pipes/ts/app/flying-heroes.component.ts | 4 ++-- .../docs/_examples/router/ts/app/compose-message.component.ts | 2 +- .../_examples/security/ts/app/bypass-security.component.ts | 2 +- .../_examples/security/ts/app/inner-html-binding.component.ts | 2 +- .../ts/app/toh/hero-list.component.promise.ts | 2 +- .../server-communication/ts/app/toh/hero-list.component.ts | 2 +- .../server-communication/ts/app/wiki/wiki-smart.component.ts | 2 +- .../ts/app/structural-directives.component.ts | 2 +- .../docs/_examples/style-guide/ts/01-01/app/app.component.ts | 2 +- .../docs/_examples/style-guide/ts/03-06/app/app.component.ts | 2 +- .../style-guide/ts/04-08/app/heroes/heroes.component.ts | 2 +- .../style-guide/ts/04-10/app/heroes/heroes.component.ts | 2 +- .../style-guide/ts/04-11/app/core/nav/nav.component.ts | 4 ++-- .../ts/04-11/app/core/spinner/spinner.component.ts | 4 ++-- .../style-guide/ts/04-11/app/heroes/heroes.component.ts | 2 +- .../style-guide/ts/04-12/app/core/nav/nav.component.ts | 4 ++-- .../style-guide/ts/04-12/app/heroes/heroes.component.ts | 2 +- .../docs/_examples/style-guide/ts/05-02/app/app.component.ts | 2 +- .../heroes/shared/hero-button/hero-button.component.avoid.ts | 2 +- .../app/heroes/shared/hero-button/hero-button.component.ts | 2 +- .../docs/_examples/style-guide/ts/05-03/app/app.component.ts | 2 +- .../heroes/shared/hero-button/hero-button.component.avoid.ts | 2 +- .../app/heroes/shared/hero-button/hero-button.component.ts | 2 +- .../style-guide/ts/05-04/app/heroes/heroes.component.ts | 4 ++-- .../docs/_examples/style-guide/ts/05-13/app/app.component.ts | 2 +- .../docs/_examples/style-guide/ts/05-16/app/app.component.ts | 2 +- .../docs/_examples/style-guide/ts/06-01/app/app.component.ts | 2 +- .../docs/_examples/style-guide/ts/07-01/app/app.component.ts | 2 +- public/docs/_examples/style-guide/ts/app/app.component.ts | 2 +- public/docs/_examples/template-syntax/ts/app/app.component.ts | 2 +- public/docs/_examples/testing/ts/app/app.component.ts | 2 +- public/docs/_examples/testing/ts/app/bag/bag.ts | 4 ++-- public/docs/_examples/testing/ts/app/banner.component.ts | 4 ++-- .../testing/ts/app/dashboard/dashboard-hero.component.ts | 4 ++-- .../_examples/testing/ts/app/dashboard/dashboard.component.ts | 4 ++-- .../_examples/testing/ts/app/hero/hero-detail.component.ts | 4 ++-- .../docs/_examples/testing/ts/app/hero/hero-list.component.ts | 4 ++-- public/docs/_examples/toh-5/ts/app/app.component.ts | 2 +- public/docs/_examples/toh-5/ts/app/dashboard.component.ts | 4 ++-- public/docs/_examples/toh-5/ts/app/hero-detail.component.ts | 4 ++-- public/docs/_examples/toh-5/ts/app/heroes.component.ts | 4 ++-- public/docs/_examples/toh-6/ts/app/app.component.ts | 2 +- public/docs/_examples/toh-6/ts/app/dashboard.component.ts | 4 ++-- public/docs/_examples/toh-6/ts/app/hero-detail.component.ts | 4 ++-- public/docs/_examples/toh-6/ts/app/hero-search.component.ts | 4 ++-- public/docs/_examples/toh-6/ts/app/heroes.component.ts | 4 ++-- .../ts/app/phone-detail/phone-detail.component.ts | 2 +- .../ts/app/phone-detail/phone-detail.component.ts | 2 +- .../ts/app/phone-list/phone-list.component.ts | 2 +- public/docs/_examples/user-input/ts/app/app.component.ts | 2 +- public/docs/ts/latest/cookbook/component-relative-paths.jade | 3 ++- public/docs/ts/latest/cookbook/ts-to-js.jade | 2 +- 100 files changed, 126 insertions(+), 125 deletions(-) diff --git a/public/docs/_examples/animations/ts/app/hero-list-auto.component.ts b/public/docs/_examples/animations/ts/app/hero-list-auto.component.ts index 39d69f2c91..df7280d3ea 100644 --- a/public/docs/_examples/animations/ts/app/hero-list-auto.component.ts +++ b/public/docs/_examples/animations/ts/app/hero-list-auto.component.ts @@ -23,7 +23,7 @@ import { Heroes } from './hero.service'; `, // #enddocregion template - styleUrls: ['hero-list.component.css'], + styleUrls: ['./hero-list.component.css'], /* When the element leaves (transition "in => void" occurs), * get the element's current computed height and animate diff --git a/public/docs/_examples/animations/ts/app/hero-list-basic.component.ts b/public/docs/_examples/animations/ts/app/hero-list-basic.component.ts index c74ef90b8b..a40f9ade94 100644 --- a/public/docs/_examples/animations/ts/app/hero-list-basic.component.ts +++ b/public/docs/_examples/animations/ts/app/hero-list-basic.component.ts @@ -34,7 +34,7 @@ import { Heroes } from './hero.service'; `, // #enddocregion template - styleUrls: ['hero-list.component.css'], + styleUrls: ['./hero-list.component.css'], // #enddocregion /** * Define two states, "inactive" and "active", and the end diff --git a/public/docs/_examples/animations/ts/app/hero-list-combined-transitions.component.ts b/public/docs/_examples/animations/ts/app/hero-list-combined-transitions.component.ts index 7fe59f9ab9..b40a0c3514 100644 --- a/public/docs/_examples/animations/ts/app/hero-list-combined-transitions.component.ts +++ b/public/docs/_examples/animations/ts/app/hero-list-combined-transitions.component.ts @@ -27,7 +27,7 @@ import { Heroes } from './hero.service'; `, // #enddocregion template - styleUrls: ['hero-list.component.css'], + styleUrls: ['./hero-list.component.css'], /* * Define two states, "inactive" and "active", and the end * styles that apply whenever the element is in those states. diff --git a/public/docs/_examples/animations/ts/app/hero-list-enter-leave-states.component.ts b/public/docs/_examples/animations/ts/app/hero-list-enter-leave-states.component.ts index 6e6fe6cd3f..a88e08f251 100644 --- a/public/docs/_examples/animations/ts/app/hero-list-enter-leave-states.component.ts +++ b/public/docs/_examples/animations/ts/app/hero-list-enter-leave-states.component.ts @@ -24,7 +24,7 @@ import { Heroes } from './hero.service'; `, // #enddocregion template - styleUrls: ['hero-list.component.css'], + styleUrls: ['./hero-list.component.css'], /* The elements here have two possible states based * on the hero state, "active", or "inactive". We animate * six transitions: Between the two states in both directions, diff --git a/public/docs/_examples/animations/ts/app/hero-list-enter-leave.component.ts b/public/docs/_examples/animations/ts/app/hero-list-enter-leave.component.ts index a37efb6464..05944c84f1 100644 --- a/public/docs/_examples/animations/ts/app/hero-list-enter-leave.component.ts +++ b/public/docs/_examples/animations/ts/app/hero-list-enter-leave.component.ts @@ -23,7 +23,7 @@ import { Heroes } from './hero.service'; `, // #enddocregion template - styleUrls: ['hero-list.component.css'], + styleUrls: ['./hero-list.component.css'], /* The element here always has the state "in" when it * is present. We animate two transitions: From void * to in and from in to void, to achieve an animated diff --git a/public/docs/_examples/animations/ts/app/hero-list-groups.component.ts b/public/docs/_examples/animations/ts/app/hero-list-groups.component.ts index 70fb11d426..dda696eca2 100644 --- a/public/docs/_examples/animations/ts/app/hero-list-groups.component.ts +++ b/public/docs/_examples/animations/ts/app/hero-list-groups.component.ts @@ -22,7 +22,7 @@ import { Heroes } from './hero.service'; `, - styleUrls: ['hero-list.component.css'], + styleUrls: ['./hero-list.component.css'], styles: [` li { padding: 0 !important; diff --git a/public/docs/_examples/animations/ts/app/hero-list-inline-styles.component.ts b/public/docs/_examples/animations/ts/app/hero-list-inline-styles.component.ts index e22bd3121f..19e6fb8cce 100644 --- a/public/docs/_examples/animations/ts/app/hero-list-inline-styles.component.ts +++ b/public/docs/_examples/animations/ts/app/hero-list-inline-styles.component.ts @@ -26,7 +26,7 @@ import { Heroes } from './hero.service'; `, // #enddocregion template - styleUrls: ['hero-list.component.css'], + styleUrls: ['./hero-list.component.css'], /** * Define two states, "inactive" and "active", and the end * styles that apply whenever the element is in those states. diff --git a/public/docs/_examples/animations/ts/app/hero-list-multistep.component.ts b/public/docs/_examples/animations/ts/app/hero-list-multistep.component.ts index adea35047c..25c10cc533 100644 --- a/public/docs/_examples/animations/ts/app/hero-list-multistep.component.ts +++ b/public/docs/_examples/animations/ts/app/hero-list-multistep.component.ts @@ -27,7 +27,7 @@ import { Heroes } from './hero.service'; `, // #enddocregion template - styleUrls: ['hero-list.component.css'], + styleUrls: ['./hero-list.component.css'], /* The element here always has the state "in" when it * is present. We animate two transitions: From void * to in and from in to void, to achieve an animated diff --git a/public/docs/_examples/animations/ts/app/hero-list-timings.component.ts b/public/docs/_examples/animations/ts/app/hero-list-timings.component.ts index 07fdcfb828..eed6f90004 100644 --- a/public/docs/_examples/animations/ts/app/hero-list-timings.component.ts +++ b/public/docs/_examples/animations/ts/app/hero-list-timings.component.ts @@ -22,7 +22,7 @@ import { Heroes } from './hero.service'; `, - styleUrls: ['hero-list.component.css'], + styleUrls: ['./hero-list.component.css'], /* The element here always has the state "in" when it * is present. We animate two transitions: From void * to in and from in to void, to achieve an animated diff --git a/public/docs/_examples/animations/ts/app/hero-list-twoway.component.ts b/public/docs/_examples/animations/ts/app/hero-list-twoway.component.ts index d5c9b2a3dd..c9ec43f904 100644 --- a/public/docs/_examples/animations/ts/app/hero-list-twoway.component.ts +++ b/public/docs/_examples/animations/ts/app/hero-list-twoway.component.ts @@ -27,7 +27,7 @@ import { Heroes } from './hero.service'; `, // #enddocregion template - styleUrls: ['hero-list.component.css'], + styleUrls: ['./hero-list.component.css'], /* * Define two states, "inactive" and "active", and the end * styles that apply whenever the element is in those states. diff --git a/public/docs/_examples/architecture/ts/app/hero-detail.component.ts b/public/docs/_examples/architecture/ts/app/hero-detail.component.ts index bdebf09f9e..44a702ad49 100644 --- a/public/docs/_examples/architecture/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/architecture/ts/app/hero-detail.component.ts @@ -5,7 +5,7 @@ import { Hero } from './hero'; @Component({ moduleId: module.id, selector: 'hero-detail', - templateUrl: 'hero-detail.component.html' + templateUrl: './hero-detail.component.html' }) export class HeroDetailComponent { @Input() hero: Hero; diff --git a/public/docs/_examples/architecture/ts/app/hero-list.component.ts b/public/docs/_examples/architecture/ts/app/hero-list.component.ts index 42f18aed2f..f72f57eef4 100644 --- a/public/docs/_examples/architecture/ts/app/hero-list.component.ts +++ b/public/docs/_examples/architecture/ts/app/hero-list.component.ts @@ -7,7 +7,7 @@ import { HeroService } from './hero.service'; @Component({ moduleId: module.id, selector: 'hero-list', - templateUrl: 'hero-list.component.html', + templateUrl: './hero-list.component.html', providers: [ HeroService ] }) // #enddocregion providers diff --git a/public/docs/_examples/attribute-directives/ts/app/app.component.1.ts b/public/docs/_examples/attribute-directives/ts/app/app.component.1.ts index 13bb5ef1f4..d65cb57850 100644 --- a/public/docs/_examples/attribute-directives/ts/app/app.component.1.ts +++ b/public/docs/_examples/attribute-directives/ts/app/app.component.1.ts @@ -3,7 +3,7 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'my-app', - templateUrl: 'app.component.1.html' + templateUrl: './app.component.1.html' }) // #docregion class export class AppComponent { diff --git a/public/docs/_examples/attribute-directives/ts/app/app.component.ts b/public/docs/_examples/attribute-directives/ts/app/app.component.ts index 800a5864d6..a88e8e49a3 100644 --- a/public/docs/_examples/attribute-directives/ts/app/app.component.ts +++ b/public/docs/_examples/attribute-directives/ts/app/app.component.ts @@ -4,7 +4,7 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'my-app', - templateUrl: 'app.component.html' + templateUrl: './app.component.html' }) // #docregion class export class AppComponent { diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts index c6959c2da6..689e7a22aa 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts @@ -6,8 +6,8 @@ import { IMovie } from './movie'; @Component({ moduleId: module.id, selector: 'my-app', - templateUrl: 'app.component.html', - styleUrls: [ 'app.component.css' ], + templateUrl: './app.component.html', + styleUrls: [ './app.component.css' ], providers: [ MovieService ] }) export class AppComponent { diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts index 951cccb6df..2481710bb1 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts @@ -10,10 +10,10 @@ import { MovieService } from './movie.service'; @Component({ moduleId: module.id, selector: 'movie-list', - templateUrl: 'movie-list.component.html', + templateUrl: './movie-list.component.html', // #enddocregion component // #docregion style-url - styleUrls: [ 'movie-list.component.css' ], + styleUrls: [ './movie-list.component.css' ], // #enddocregion style-url }) // #enddocregion component diff --git a/public/docs/_examples/cb-aot-compiler/ts/app/app.component.ts b/public/docs/_examples/cb-aot-compiler/ts/app/app.component.ts index cd2d700db8..680c07d682 100644 --- a/public/docs/_examples/cb-aot-compiler/ts/app/app.component.ts +++ b/public/docs/_examples/cb-aot-compiler/ts/app/app.component.ts @@ -4,7 +4,7 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'my-app', - templateUrl: 'app.component.html' + templateUrl: './app.component.html' }) export class AppComponent { showHeading = true; diff --git a/public/docs/_examples/cb-component-communication/ts/app/app.component.ts b/public/docs/_examples/cb-component-communication/ts/app/app.component.ts index be8d89aff7..ab2d3d9c33 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/app.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/app.component.ts @@ -3,6 +3,6 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'my-app', - templateUrl: 'app.component.html' + templateUrl: './app.component.html' }) export class AppComponent { } diff --git a/public/docs/_examples/cb-component-relative-paths/ts/app/some.component.ts b/public/docs/_examples/cb-component-relative-paths/ts/app/some.component.ts index 2bd56c6930..327727873c 100644 --- a/public/docs/_examples/cb-component-relative-paths/ts/app/some.component.ts +++ b/public/docs/_examples/cb-component-relative-paths/ts/app/some.component.ts @@ -24,8 +24,8 @@ export class SomeAbsoluteComponent { moduleId: module.id, // #enddocregion module-id selector: 'relative-path', - templateUrl: 'some.component.html', - styleUrls: ['some.component.css'] + templateUrl: './some.component.html', + styleUrls: ['./some.component.css'] }) // #enddocregion relative-config diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts index 820d43d6ab..a3b938f7e5 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts @@ -9,7 +9,7 @@ import { UserService } from './user.service'; @Component({ moduleId: module.id, selector: 'my-app', - templateUrl: 'app.component.html', + templateUrl: './app.component.html', // #docregion providers providers: [ LoggerService, UserContextService, UserService ] // #enddocregion providers diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts index 69194fc0e7..24d0bd168b 100644 --- a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts +++ b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts @@ -7,7 +7,7 @@ import { QuestionBase } from './question-base'; @Component({ moduleId: module.id, selector: 'df-question', - templateUrl: 'dynamic-form-question.component.html' + templateUrl: './dynamic-form-question.component.html' }) export class DynamicFormQuestionComponent { @Input() question: QuestionBase; diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts index e0331797bf..32aaf73114 100644 --- a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts +++ b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts @@ -8,7 +8,7 @@ import { QuestionControlService } from './question-control.service'; @Component({ moduleId: module.id, selector: 'dynamic-form', - templateUrl: 'dynamic-form.component.html', + templateUrl: './dynamic-form.component.html', providers: [ QuestionControlService ] }) export class DynamicFormComponent implements OnInit { diff --git a/public/docs/_examples/cb-form-validation/ts/app/reactive/hero-form-reactive.component.ts b/public/docs/_examples/cb-form-validation/ts/app/reactive/hero-form-reactive.component.ts index 7e7dfa0739..d4924e7ef9 100644 --- a/public/docs/_examples/cb-form-validation/ts/app/reactive/hero-form-reactive.component.ts +++ b/public/docs/_examples/cb-form-validation/ts/app/reactive/hero-form-reactive.component.ts @@ -10,7 +10,7 @@ import { forbiddenNameValidator } from '../shared/forbidden-name.directive'; @Component({ moduleId: module.id, selector: 'hero-form-reactive3', - templateUrl: 'hero-form-reactive.component.html' + templateUrl: './hero-form-reactive.component.html' }) export class HeroFormReactiveComponent implements OnInit { diff --git a/public/docs/_examples/cb-form-validation/ts/app/template/hero-form-template1.component.ts b/public/docs/_examples/cb-form-validation/ts/app/template/hero-form-template1.component.ts index 845fcc9abc..b096ca8cf4 100644 --- a/public/docs/_examples/cb-form-validation/ts/app/template/hero-form-template1.component.ts +++ b/public/docs/_examples/cb-form-validation/ts/app/template/hero-form-template1.component.ts @@ -9,7 +9,7 @@ import { Hero } from '../shared/hero'; @Component({ moduleId: module.id, selector: 'hero-form-template1', - templateUrl: 'hero-form-template1.component.html' + templateUrl: './hero-form-template1.component.html' }) // #docregion class export class HeroFormTemplate1Component { diff --git a/public/docs/_examples/cb-form-validation/ts/app/template/hero-form-template2.component.ts b/public/docs/_examples/cb-form-validation/ts/app/template/hero-form-template2.component.ts index e2781ec617..8b3e150347 100644 --- a/public/docs/_examples/cb-form-validation/ts/app/template/hero-form-template2.component.ts +++ b/public/docs/_examples/cb-form-validation/ts/app/template/hero-form-template2.component.ts @@ -9,7 +9,7 @@ import { Hero } from '../shared/hero'; @Component({ moduleId: module.id, selector: 'hero-form-template2', - templateUrl: 'hero-form-template2.component.html' + templateUrl: './hero-form-template2.component.html' }) export class HeroFormTemplate2Component implements AfterViewChecked { diff --git a/public/docs/_examples/cb-i18n/ts/app/app.component.ts b/public/docs/_examples/cb-i18n/ts/app/app.component.ts index e8f93321a4..09adc99d2a 100644 --- a/public/docs/_examples/cb-i18n/ts/app/app.component.ts +++ b/public/docs/_examples/cb-i18n/ts/app/app.component.ts @@ -4,7 +4,7 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'my-app', - templateUrl: 'app.component.html' + templateUrl: './app.component.html' }) export class AppComponent { wolves = 0; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6 index e5f158dbed..6a16666aa8 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6 +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6 @@ -3,7 +3,7 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'my-app', - templateUrl: 'app.component.html', + templateUrl: './app.component.html', styles: [ // See hero-di-inject-additional.component 'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}', diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6 index 08a0ed6c60..ee9ee6f884 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6 +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6 @@ -4,7 +4,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ moduleId: module.id, selector: 'app-confirm', - templateUrl: 'confirm.component.html' + templateUrl: './confirm.component.html' }) export class ConfirmComponent { @Input() okMsg = ''; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6 index 25460d34f7..32988dcdda 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6 +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6 @@ -5,7 +5,7 @@ import { Attribute, Component, Inject, Optional } from '@angular/core'; @Component({ moduleId: module.id, selector: 'hero-title', - templateUrl: 'hero-title.component.html' + templateUrl: './hero-title.component.html' }) // #enddocregion templateUrl export class HeroTitleComponent { diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6 index 9615b98a1f..e8fd92620b 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6 +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6 @@ -10,7 +10,7 @@ AppComponent.annotations = [ new Component({ moduleId: module.id, selector: 'my-app', - templateUrl: 'app.component.html', + templateUrl: './app.component.html', styles: [ // See hero-di-inject-additional.component 'hero-host { border: 1px dashed black; display: block; padding: 4px;}', diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6 index d42a553688..20c3288766 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6 +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6 @@ -18,7 +18,7 @@ ConfirmComponent.annotations = [ new Component({ moduleId: module.id, selector: 'app-confirm', - templateUrl: 'confirm.component.html', + templateUrl: './confirm.component.html', inputs: [ 'okMsg', 'notOkMsg: cancelMsg' diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6 index ff1e6ce026..1656226602 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6 +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6 @@ -18,7 +18,7 @@ HeroTitleComponent.annotations = [ new Component({ moduleId: module.id, selector: 'hero-title', - templateUrl: 'hero-title.component.html' + templateUrl: './hero-title.component.html' }) ]; // #enddocregion templateUrl diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts index 722d812f63..8c33f6e994 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts @@ -3,7 +3,7 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'my-app', - templateUrl: 'app.component.html', + templateUrl: './app.component.html', styles: [ // See hero-di-inject-additional.component 'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}', diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts index 08a0ed6c60..ee9ee6f884 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts @@ -4,7 +4,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ moduleId: module.id, selector: 'app-confirm', - templateUrl: 'confirm.component.html' + templateUrl: './confirm.component.html' }) export class ConfirmComponent { @Input() okMsg = ''; diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts index 074f2edd61..e8e68684e2 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts @@ -5,7 +5,7 @@ import { Attribute, Component, Inject, Optional } from '@angular/core'; @Component({ moduleId: module.id, selector: 'hero-title', - templateUrl: 'hero-title.component.html' + templateUrl: './hero-title.component.html' }) // #enddocregion templateUrl export class HeroTitleComponent { diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/cli-quickstart.component.ts b/public/docs/_examples/cli-quickstart/ts/src/app/cli-quickstart.component.ts index 8c6b3a43cc..2d58ec04ff 100644 --- a/public/docs/_examples/cli-quickstart/ts/src/app/cli-quickstart.component.ts +++ b/public/docs/_examples/cli-quickstart/ts/src/app/cli-quickstart.component.ts @@ -6,8 +6,8 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'cli-quickstart-app', - templateUrl: 'cli-quickstart.component.html', - styleUrls: ['cli-quickstart.component.css'] + templateUrl: './cli-quickstart.component.html', + styleUrls: ['./cli-quickstart.component.css'] }) // #enddocregion metadata // #docregion title, class diff --git a/public/docs/_examples/component-styles/ts/app/quest-summary.component.ts b/public/docs/_examples/component-styles/ts/app/quest-summary.component.ts index 9952702ddf..c43239e368 100644 --- a/public/docs/_examples/component-styles/ts/app/quest-summary.component.ts +++ b/public/docs/_examples/component-styles/ts/app/quest-summary.component.ts @@ -7,8 +7,8 @@ import { Component, ViewEncapsulation } from '@angular/core'; moduleId: module.id, selector: 'quest-summary', // #docregion urls - templateUrl: 'quest-summary.component.html', - styleUrls: ['quest-summary.component.css'] + templateUrl: './quest-summary.component.html', + styleUrls: ['./quest-summary.component.css'] // #enddocregion urls }) export class QuestSummaryComponent { } diff --git a/public/docs/_examples/forms/ts/app/hero-form.component.ts b/public/docs/_examples/forms/ts/app/hero-form.component.ts index a4da9bbf92..9c86266ce3 100644 --- a/public/docs/_examples/forms/ts/app/hero-form.component.ts +++ b/public/docs/_examples/forms/ts/app/hero-form.component.ts @@ -8,7 +8,7 @@ import { Hero } from './hero'; @Component({ moduleId: module.id, selector: 'hero-form', - templateUrl: 'hero-form.component.html' + templateUrl: './hero-form.component.html' }) export class HeroFormComponent { diff --git a/public/docs/_examples/homepage-hello-world/ts/app/hello_world.ts b/public/docs/_examples/homepage-hello-world/ts/app/hello_world.ts index 3db096cd75..7bdf994436 100644 --- a/public/docs/_examples/homepage-hello-world/ts/app/hello_world.ts +++ b/public/docs/_examples/homepage-hello-world/ts/app/hello_world.ts @@ -9,7 +9,7 @@ import { Component } from '@angular/core'; selector: 'hello-world', // Location of the template for this component - templateUrl: 'hello_world.html' + templateUrl: './hello_world.html' }) export class HelloWorldComponent { diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts index 42e09d0fe4..a917088410 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts @@ -3,6 +3,6 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'my-app', - templateUrl: 'app.component.html' + templateUrl: './app.component.html' }) export class AppComponent { } diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts index aadd6eb26f..bdd96ed65b 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts @@ -77,7 +77,7 @@ export class DoCheckComponent implements DoCheck { @Component({ moduleId: module.id, selector: 'do-check-parent', - templateUrl: 'do-check-parent.component.html', + templateUrl: './do-check-parent.component.html', styles: ['.parent {background: Lavender}'] }) export class DoCheckParentComponent { diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts index da3aa70716..c9a243a5f0 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts @@ -51,7 +51,7 @@ export class OnChangesComponent implements OnChanges { @Component({ moduleId: module.id, selector: 'on-changes-parent', - templateUrl: 'on-changes-parent.component.html', + templateUrl: './on-changes-parent.component.html', styles: ['.parent {background: Lavender;}'] }) export class OnChangesParentComponent { diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts index 99fefac6ec..6cbed98d1d 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts @@ -6,7 +6,7 @@ import { LoggerService } from './logger.service'; @Component({ moduleId: module.id, selector: 'spy-parent', - templateUrl: 'spy.component.html', + templateUrl: './spy.component.html', styles: [ '.parent {background: khaki;}', '.heroes {background: LightYellow; padding: 0 8px}' diff --git a/public/docs/_examples/ngmodule/ts/app/contact/contact.component.3.ts b/public/docs/_examples/ngmodule/ts/app/contact/contact.component.3.ts index 30576f8f38..fcc409b9af 100644 --- a/public/docs/_examples/ngmodule/ts/app/contact/contact.component.3.ts +++ b/public/docs/_examples/ngmodule/ts/app/contact/contact.component.3.ts @@ -7,8 +7,8 @@ import { UserService } from '../user.service'; @Component({ moduleId: module.id, selector: 'app-contact', - templateUrl: 'contact.component.html', - styleUrls: [ 'contact.component.css' ] + templateUrl: './contact.component.html', + styleUrls: [ './contact.component.css' ] }) export class ContactComponent implements OnInit { contact: Contact; diff --git a/public/docs/_examples/ngmodule/ts/app/contact/contact.component.ts b/public/docs/_examples/ngmodule/ts/app/contact/contact.component.ts index ee7c387c10..f9116a4213 100644 --- a/public/docs/_examples/ngmodule/ts/app/contact/contact.component.ts +++ b/public/docs/_examples/ngmodule/ts/app/contact/contact.component.ts @@ -8,8 +8,8 @@ import { UserService } from '../core/user.service'; @Component({ moduleId: module.id, selector: 'app-contact', - templateUrl: 'contact.component.html', - styleUrls: [ 'contact.component.css' ] + templateUrl: './contact.component.html', + styleUrls: [ './contact.component.css' ] }) export class ContactComponent implements OnInit { contact: Contact; diff --git a/public/docs/_examples/ngmodule/ts/app/core/title.component.ts b/public/docs/_examples/ngmodule/ts/app/core/title.component.ts index be2df3acf1..5fbd64d5fd 100644 --- a/public/docs/_examples/ngmodule/ts/app/core/title.component.ts +++ b/public/docs/_examples/ngmodule/ts/app/core/title.component.ts @@ -5,7 +5,7 @@ import { UserService } from '../core/user.service'; @Component({ moduleId: module.id, selector: 'app-title', - templateUrl: 'title.component.html', + templateUrl: './title.component.html', }) export class TitleComponent { @Input() subtitle = ''; diff --git a/public/docs/_examples/ngmodule/ts/app/title.component.ts b/public/docs/_examples/ngmodule/ts/app/title.component.ts index cd5a19aad0..c5815edcbd 100644 --- a/public/docs/_examples/ngmodule/ts/app/title.component.ts +++ b/public/docs/_examples/ngmodule/ts/app/title.component.ts @@ -9,7 +9,7 @@ import { UserService } from './user.service'; @Component({ moduleId: module.id, selector: 'app-title', - templateUrl: 'title.component.html', + templateUrl: './title.component.html', }) export class TitleComponent { @Input() subtitle = ''; diff --git a/public/docs/_examples/pipes/ts/app/app.component.ts b/public/docs/_examples/pipes/ts/app/app.component.ts index ca83f1b6af..d21801ddcf 100644 --- a/public/docs/_examples/pipes/ts/app/app.component.ts +++ b/public/docs/_examples/pipes/ts/app/app.component.ts @@ -4,7 +4,7 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'my-app', - templateUrl: 'app.component.html' + templateUrl: './app.component.html' }) export class AppComponent { birthday = new Date(1988, 3, 15); // April 15, 1988 diff --git a/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts b/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts index 26a43997aa..5e7e4bd3f9 100644 --- a/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts +++ b/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts @@ -7,7 +7,7 @@ import { HEROES } from './heroes'; @Component({ moduleId: module.id, selector: 'flying-heroes', - templateUrl: 'flying-heroes.component.html', + templateUrl: './flying-heroes.component.html', styles: ['#flyers, #all {font-style: italic}'] }) // #docregion v1 @@ -52,7 +52,7 @@ export class FlyingHeroesComponent { @Component({ moduleId: module.id, selector: 'flying-heroes-impure', - templateUrl: 'flying-heroes-impure.component.html', + templateUrl: './flying-heroes-impure.component.html', // #enddocregion impure-component styles: ['.flyers, .all {font-style: italic}'], // #docregion impure-component diff --git a/public/docs/_examples/router/ts/app/compose-message.component.ts b/public/docs/_examples/router/ts/app/compose-message.component.ts index d6b15ad38c..38fd47fded 100644 --- a/public/docs/_examples/router/ts/app/compose-message.component.ts +++ b/public/docs/_examples/router/ts/app/compose-message.component.ts @@ -6,7 +6,7 @@ import { slideInDownAnimation } from './animations'; @Component({ moduleId: module.id, - templateUrl: 'compose-message.component.html', + templateUrl: './compose-message.component.html', styles: [ ':host { position: relative; bottom: 10%; }' ], animations: [ slideInDownAnimation ] }) diff --git a/public/docs/_examples/security/ts/app/bypass-security.component.ts b/public/docs/_examples/security/ts/app/bypass-security.component.ts index 2aecfddab9..769c0ba95a 100644 --- a/public/docs/_examples/security/ts/app/bypass-security.component.ts +++ b/public/docs/_examples/security/ts/app/bypass-security.component.ts @@ -6,7 +6,7 @@ import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browse @Component({ selector: 'bypass-security', moduleId: module.id, - templateUrl: 'bypass-security.component.html', + templateUrl: './bypass-security.component.html', }) export class BypassSecurityComponent { dangerousUrl: string; diff --git a/public/docs/_examples/security/ts/app/inner-html-binding.component.ts b/public/docs/_examples/security/ts/app/inner-html-binding.component.ts index 603a1981d6..23c921e979 100644 --- a/public/docs/_examples/security/ts/app/inner-html-binding.component.ts +++ b/public/docs/_examples/security/ts/app/inner-html-binding.component.ts @@ -4,7 +4,7 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'inner-html-binding', - templateUrl: 'inner-html-binding.component.html', + templateUrl: './inner-html-binding.component.html', }) // #docregion class export class InnerHtmlBindingComponent { diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.promise.ts b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.promise.ts index cde90d34bf..abe6a554e9 100644 --- a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.promise.ts +++ b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.promise.ts @@ -7,7 +7,7 @@ import { HeroService } from './hero.service.promise'; @Component({ selector: 'hero-list-promise', moduleId: module.id, - templateUrl: 'hero-list.component.html', + templateUrl: './hero-list.component.html', providers: [ HeroService ], styles: ['.error {color:red;}'] }) diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts index f52144dcff..e28faacc0e 100644 --- a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts +++ b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts @@ -7,7 +7,7 @@ import { HeroService } from './hero.service'; @Component({ moduleId: module.id, selector: 'hero-list', - templateUrl: 'hero-list.component.html', + templateUrl: './hero-list.component.html', providers: [ HeroService ], styles: ['.error {color:red;}'] }) diff --git a/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts b/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts index e23138a560..31d7ae731e 100644 --- a/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts +++ b/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts @@ -12,7 +12,7 @@ import { WikipediaService } from './wikipedia.service'; @Component({ moduleId: module.id, selector: 'my-wiki-smart', - templateUrl: 'wiki.component.html', + templateUrl: './wiki.component.html', providers: [ WikipediaService ] }) export class WikiSmartComponent implements OnInit { diff --git a/public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts b/public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts index d831e4960d..1c073c74e1 100644 --- a/public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts +++ b/public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts @@ -5,7 +5,7 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'structural-directives', - templateUrl: 'structural-directives.component.html', + templateUrl: './structural-directives.component.html', styles: ['button { min-width: 100px; }'] }) export class StructuralDirectivesComponent { diff --git a/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts index a9f29647a0..7997c4433c 100644 --- a/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts @@ -9,7 +9,7 @@ import { HeroService } from './heroes'; template: ` `, - styleUrls: ['app.component.css'], + styleUrls: ['./app.component.css'], providers: [ HeroService ] }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/03-06/app/app.component.ts b/public/docs/_examples/style-guide/ts/03-06/app/app.component.ts index 0cf424afd7..b7c47f72d0 100644 --- a/public/docs/_examples/style-guide/ts/03-06/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/03-06/app/app.component.ts @@ -6,7 +6,7 @@ import { ExceptionService, SpinnerService, ToastService } from './core'; @Component({ moduleId: module.id, selector: 'sg-app', - templateUrl: 'app.component.html', + templateUrl: './app.component.html', providers: [HeroService, ExceptionService, SpinnerService, ToastService] }) export class AppComponent implements OnInit { diff --git a/public/docs/_examples/style-guide/ts/04-08/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/04-08/app/heroes/heroes.component.ts index b3a76ff120..f6653cdf53 100644 --- a/public/docs/_examples/style-guide/ts/04-08/app/heroes/heroes.component.ts +++ b/public/docs/_examples/style-guide/ts/04-08/app/heroes/heroes.component.ts @@ -8,7 +8,7 @@ import { Component, OnInit } from '@angular/core'; moduleId: module.id, // #docregion example selector: 'toh-heroes', - templateUrl: 'heroes.component.html' + templateUrl: './heroes.component.html' }) export class HeroesComponent implements OnInit { // #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.ts index 14eb56a7f0..e22b39843d 100644 --- a/public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.ts +++ b/public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.ts @@ -10,7 +10,7 @@ import { FilterTextService } from '../shared/filter-text/filter-text.service'; moduleId: module.id, // #docregion example selector: 'toh-heroes', - templateUrl: 'heroes.component.html' + templateUrl: './heroes.component.html' }) export class HeroesComponent implements OnInit { // #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/04-11/app/core/nav/nav.component.ts b/public/docs/_examples/style-guide/ts/04-11/app/core/nav/nav.component.ts index ba8796251b..571040cce5 100644 --- a/public/docs/_examples/style-guide/ts/04-11/app/core/nav/nav.component.ts +++ b/public/docs/_examples/style-guide/ts/04-11/app/core/nav/nav.component.ts @@ -4,8 +4,8 @@ import { Component, OnInit } from '@angular/core'; @Component({ moduleId: module.id, selector: 'toh-nav', - templateUrl: 'nav.component.html', - styleUrls: ['nav.component.css'], + templateUrl: './nav.component.html', + styleUrls: ['./nav.component.css'], }) export class NavComponent implements OnInit { menuItems = [ diff --git a/public/docs/_examples/style-guide/ts/04-11/app/core/spinner/spinner.component.ts b/public/docs/_examples/style-guide/ts/04-11/app/core/spinner/spinner.component.ts index 7260eb8d88..ccd6ece7fb 100644 --- a/public/docs/_examples/style-guide/ts/04-11/app/core/spinner/spinner.component.ts +++ b/public/docs/_examples/style-guide/ts/04-11/app/core/spinner/spinner.component.ts @@ -8,8 +8,8 @@ import { SpinnerState, SpinnerService } from './spinner.service'; @Component({ moduleId: module.id, selector: 'toh-spinner', - templateUrl: 'spinner.component.html', - styleUrls: ['spinner.component.css'] + templateUrl: './spinner.component.html', + styleUrls: ['./spinner.component.css'] }) export class SpinnerComponent implements OnDestroy, OnInit { visible = false; diff --git a/public/docs/_examples/style-guide/ts/04-11/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/04-11/app/heroes/heroes.component.ts index b15d2dc8bc..8d86b30d89 100644 --- a/public/docs/_examples/style-guide/ts/04-11/app/heroes/heroes.component.ts +++ b/public/docs/_examples/style-guide/ts/04-11/app/heroes/heroes.component.ts @@ -11,7 +11,7 @@ import { SpinnerService } from '../core/spinner/spinner.service'; moduleId: module.id, // #docregion example selector: 'toh-heroes', - templateUrl: 'heroes.component.html' + templateUrl: './heroes.component.html' }) export class HeroesComponent { // #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/04-12/app/core/nav/nav.component.ts b/public/docs/_examples/style-guide/ts/04-12/app/core/nav/nav.component.ts index ba8796251b..571040cce5 100644 --- a/public/docs/_examples/style-guide/ts/04-12/app/core/nav/nav.component.ts +++ b/public/docs/_examples/style-guide/ts/04-12/app/core/nav/nav.component.ts @@ -4,8 +4,8 @@ import { Component, OnInit } from '@angular/core'; @Component({ moduleId: module.id, selector: 'toh-nav', - templateUrl: 'nav.component.html', - styleUrls: ['nav.component.css'], + templateUrl: './nav.component.html', + styleUrls: ['./nav.component.css'], }) export class NavComponent implements OnInit { menuItems = [ diff --git a/public/docs/_examples/style-guide/ts/04-12/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/04-12/app/heroes/heroes.component.ts index ee60b88178..44b3efb5c6 100644 --- a/public/docs/_examples/style-guide/ts/04-12/app/heroes/heroes.component.ts +++ b/public/docs/_examples/style-guide/ts/04-12/app/heroes/heroes.component.ts @@ -10,7 +10,7 @@ import { LoggerService } from '../core/logger.service'; moduleId: module.id, // #docregion example selector: 'toh-heroes', - templateUrl: 'heroes.component.html' + templateUrl: './heroes.component.html' }) export class HeroesComponent { // #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-02/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-02/app/app.component.ts index 03062c57fd..d57163f06f 100644 --- a/public/docs/_examples/style-guide/ts/05-02/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/05-02/app/app.component.ts @@ -3,6 +3,6 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'sg-app', - templateUrl: 'app.component.html' + templateUrl: './app.component.html' }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts index 7be30dc913..9e8d05905f 100644 --- a/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts +++ b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts @@ -9,7 +9,7 @@ import { Component } from '@angular/core'; moduleId: module.id, // #docregion example selector: 'tohHeroButton', - templateUrl: 'hero-button.component.html' + templateUrl: './hero-button.component.html' }) export class HeroButtonComponent {} // #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts index 439ce328d5..48de306193 100644 --- a/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts +++ b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts @@ -8,7 +8,7 @@ import { Component } from '@angular/core'; moduleId: module.id, // #docregion example selector: 'toh-hero-button', - templateUrl: 'hero-button.component.html' + templateUrl: './hero-button.component.html' }) export class HeroButtonComponent {} // #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-03/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-03/app/app.component.ts index 03062c57fd..d57163f06f 100644 --- a/public/docs/_examples/style-guide/ts/05-03/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/05-03/app/app.component.ts @@ -3,6 +3,6 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'sg-app', - templateUrl: 'app.component.html' + templateUrl: './app.component.html' }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts index 4cbf731912..34f2f08ca1 100644 --- a/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts +++ b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts @@ -9,7 +9,7 @@ import { Component } from '@angular/core'; moduleId: module.id, // #docregion example selector: '[tohHeroButton]', - templateUrl: 'hero-button.component.html' + templateUrl: './hero-button.component.html' }) export class HeroButtonComponent {} // #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts index 439ce328d5..48de306193 100644 --- a/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts +++ b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts @@ -8,7 +8,7 @@ import { Component } from '@angular/core'; moduleId: module.id, // #docregion example selector: 'toh-hero-button', - templateUrl: 'hero-button.component.html' + templateUrl: './hero-button.component.html' }) export class HeroButtonComponent {} // #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts index 9db7e50a35..ee5a414e1a 100644 --- a/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts +++ b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts @@ -10,8 +10,8 @@ import { Hero } from './shared'; moduleId: module.id, // #docregion example selector: 'toh-heroes', - templateUrl: 'heroes.component.html', - styleUrls: ['heroes.component.css'] + templateUrl: './heroes.component.html', + styleUrls: ['./heroes.component.css'] }) export class HeroesComponent implements OnInit { heroes: Hero[]; diff --git a/public/docs/_examples/style-guide/ts/05-13/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-13/app/app.component.ts index 03062c57fd..d57163f06f 100644 --- a/public/docs/_examples/style-guide/ts/05-13/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/05-13/app/app.component.ts @@ -3,6 +3,6 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'sg-app', - templateUrl: 'app.component.html' + templateUrl: './app.component.html' }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/05-16/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-16/app/app.component.ts index 03062c57fd..d57163f06f 100644 --- a/public/docs/_examples/style-guide/ts/05-16/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/05-16/app/app.component.ts @@ -3,6 +3,6 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'sg-app', - templateUrl: 'app.component.html' + templateUrl: './app.component.html' }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/06-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/06-01/app/app.component.ts index 03062c57fd..d57163f06f 100644 --- a/public/docs/_examples/style-guide/ts/06-01/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/06-01/app/app.component.ts @@ -3,6 +3,6 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'sg-app', - templateUrl: 'app.component.html' + templateUrl: './app.component.html' }) export class AppComponent { } diff --git a/public/docs/_examples/style-guide/ts/07-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/07-01/app/app.component.ts index 5b10b49c37..638da66caf 100644 --- a/public/docs/_examples/style-guide/ts/07-01/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/07-01/app/app.component.ts @@ -5,7 +5,7 @@ import { Hero, HeroService } from './heroes'; @Component({ moduleId: module.id, selector: 'sg-app', - templateUrl: 'app.component.html', + templateUrl: './app.component.html', providers: [HeroService] }) export class AppComponent implements OnInit { diff --git a/public/docs/_examples/style-guide/ts/app/app.component.ts b/public/docs/_examples/style-guide/ts/app/app.component.ts index be8d89aff7..ab2d3d9c33 100644 --- a/public/docs/_examples/style-guide/ts/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/app/app.component.ts @@ -3,6 +3,6 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'my-app', - templateUrl: 'app.component.html' + templateUrl: './app.component.html' }) export class AppComponent { } diff --git a/public/docs/_examples/template-syntax/ts/app/app.component.ts b/public/docs/_examples/template-syntax/ts/app/app.component.ts index 77221587a7..45ab0fc695 100644 --- a/public/docs/_examples/template-syntax/ts/app/app.component.ts +++ b/public/docs/_examples/template-syntax/ts/app/app.component.ts @@ -19,7 +19,7 @@ export enum Color {Red, Green, Blue}; @Component({ moduleId: module.id, selector: 'my-app', - templateUrl: 'app.component.html' + templateUrl: './app.component.html' }) export class AppComponent implements AfterViewInit, OnInit { diff --git a/public/docs/_examples/testing/ts/app/app.component.ts b/public/docs/_examples/testing/ts/app/app.component.ts index 42e09d0fe4..a917088410 100644 --- a/public/docs/_examples/testing/ts/app/app.component.ts +++ b/public/docs/_examples/testing/ts/app/app.component.ts @@ -3,6 +3,6 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'my-app', - templateUrl: 'app.component.html' + templateUrl: './app.component.html' }) export class AppComponent { } diff --git a/public/docs/_examples/testing/ts/app/bag/bag.ts b/public/docs/_examples/testing/ts/app/bag/bag.ts index 55731e33bd..a3fc0964fa 100644 --- a/public/docs/_examples/testing/ts/app/bag/bag.ts +++ b/public/docs/_examples/testing/ts/app/bag/bag.ts @@ -251,7 +251,7 @@ export class TestViewProvidersComponent { @Component({ moduleId: module.id, selector: 'external-template-comp', - templateUrl: 'bag-external-template.html' + templateUrl: './bag-external-template.html' }) export class ExternalTemplateComponent implements OnInit { serviceValue: string; @@ -275,7 +275,7 @@ export class InnerCompWithExternalTemplateComponent { } @Component({ moduleId: module.id, selector: 'bad-template-comp', - templateUrl: 'non-existant.html' + templateUrl: './non-existant.html' }) export class BadTemplateUrlComponent { } diff --git a/public/docs/_examples/testing/ts/app/banner.component.ts b/public/docs/_examples/testing/ts/app/banner.component.ts index a8c0023189..333f37bbcd 100644 --- a/public/docs/_examples/testing/ts/app/banner.component.ts +++ b/public/docs/_examples/testing/ts/app/banner.component.ts @@ -4,8 +4,8 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'app-banner', - templateUrl: 'banner.component.html', - styleUrls: ['banner.component.css'] + templateUrl: './banner.component.html', + styleUrls: ['./banner.component.css'] }) export class BannerComponent { title = 'Test Tour of Heroes'; diff --git a/public/docs/_examples/testing/ts/app/dashboard/dashboard-hero.component.ts b/public/docs/_examples/testing/ts/app/dashboard/dashboard-hero.component.ts index 6363058f75..4a8c4974fd 100644 --- a/public/docs/_examples/testing/ts/app/dashboard/dashboard-hero.component.ts +++ b/public/docs/_examples/testing/ts/app/dashboard/dashboard-hero.component.ts @@ -7,8 +7,8 @@ import { Hero } from '../model'; @Component({ moduleId: module.id, selector: 'dashboard-hero', - templateUrl: 'dashboard-hero.component.html', - styleUrls: [ 'dashboard-hero.component.css' ] + templateUrl: './dashboard-hero.component.html', + styleUrls: [ './dashboard-hero.component.css' ] }) export class DashboardHeroComponent { @Input() hero: Hero; diff --git a/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.ts b/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.ts index a0f08df120..40581094f6 100644 --- a/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.ts +++ b/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.ts @@ -7,8 +7,8 @@ import { Hero, HeroService } from '../model'; @Component({ moduleId: module.id, selector: 'app-dashboard', - templateUrl: 'dashboard.component.html', - styleUrls: [ 'dashboard.component.css' ] + templateUrl: './dashboard.component.html', + styleUrls: [ './dashboard.component.css' ] }) export class DashboardComponent implements OnInit { diff --git a/public/docs/_examples/testing/ts/app/hero/hero-detail.component.ts b/public/docs/_examples/testing/ts/app/hero/hero-detail.component.ts index 8c7a58a512..cb09da00ae 100644 --- a/public/docs/_examples/testing/ts/app/hero/hero-detail.component.ts +++ b/public/docs/_examples/testing/ts/app/hero/hero-detail.component.ts @@ -11,8 +11,8 @@ import { HeroDetailService } from './hero-detail.service'; @Component({ moduleId: module.id, selector: 'app-hero-detail', - templateUrl: 'hero-detail.component.html', - styleUrls: ['hero-detail.component.css' ], + templateUrl: './hero-detail.component.html', + styleUrls: ['./hero-detail.component.css' ], providers: [ HeroDetailService ] }) export class HeroDetailComponent implements OnInit { diff --git a/public/docs/_examples/testing/ts/app/hero/hero-list.component.ts b/public/docs/_examples/testing/ts/app/hero/hero-list.component.ts index 623cbaf5fd..501e0000b6 100644 --- a/public/docs/_examples/testing/ts/app/hero/hero-list.component.ts +++ b/public/docs/_examples/testing/ts/app/hero/hero-list.component.ts @@ -6,8 +6,8 @@ import { Hero, HeroService } from '../model'; @Component({ moduleId: module.id, selector: 'app-heroes', - templateUrl: 'hero-list.component.html', - styleUrls: [ 'hero-list.component.css' ] + templateUrl: './hero-list.component.html', + styleUrls: [ './hero-list.component.css' ] }) export class HeroListComponent implements OnInit { heroes: Promise; diff --git a/public/docs/_examples/toh-5/ts/app/app.component.ts b/public/docs/_examples/toh-5/ts/app/app.component.ts index e0cb229f57..c3f92ec46b 100644 --- a/public/docs/_examples/toh-5/ts/app/app.component.ts +++ b/public/docs/_examples/toh-5/ts/app/app.component.ts @@ -15,7 +15,7 @@ import { Component } from '@angular/core'; `, // #enddocregion template // #docregion styleUrls - styleUrls: ['app.component.css'], + styleUrls: ['./app.component.css'], // #enddocregion styleUrls }) export class AppComponent { diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts index 3ca1630f70..eb026eb6be 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts @@ -10,10 +10,10 @@ import { HeroService } from './hero.service'; @Component({ moduleId: module.id, selector: 'my-dashboard', - templateUrl: 'dashboard.component.html', + templateUrl: './dashboard.component.html', // #enddocregion metadata // #docregion css - styleUrls: [ 'dashboard.component.css' ] + styleUrls: [ './dashboard.component.css' ] // #enddocregion css // #docregion metadata }) diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts index 3557aa31d5..5b9bea89fa 100644 --- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts @@ -12,9 +12,9 @@ import { HeroService } from './hero.service'; @Component({ moduleId: module.id, selector: 'my-hero-detail', - templateUrl: 'hero-detail.component.html', + templateUrl: './hero-detail.component.html', // #enddocregion metadata, v2 - styleUrls: [ 'hero-detail.component.css' ] + styleUrls: [ './hero-detail.component.css' ] // #docregion metadata, v2 }) // #enddocregion metadata diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.ts b/public/docs/_examples/toh-5/ts/app/heroes.component.ts index 1f2290c853..ab6928addd 100644 --- a/public/docs/_examples/toh-5/ts/app/heroes.component.ts +++ b/public/docs/_examples/toh-5/ts/app/heroes.component.ts @@ -13,8 +13,8 @@ import { HeroService } from './hero.service'; // #docregion renaming selector: 'my-heroes', // #enddocregion renaming - templateUrl: 'heroes.component.html', - styleUrls: [ 'heroes.component.css' ] + templateUrl: './heroes.component.html', + styleUrls: [ './heroes.component.css' ] // #docregion renaming }) // #enddocregion metadata diff --git a/public/docs/_examples/toh-6/ts/app/app.component.ts b/public/docs/_examples/toh-6/ts/app/app.component.ts index c9bb797d62..d8a8507985 100644 --- a/public/docs/_examples/toh-6/ts/app/app.component.ts +++ b/public/docs/_examples/toh-6/ts/app/app.component.ts @@ -13,7 +13,7 @@ import { Component } from '@angular/core'; `, - styleUrls: ['app.component.css'] + styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Tour of Heroes'; diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts index a66ec3b89b..1eb93f9c01 100644 --- a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts +++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts @@ -7,8 +7,8 @@ import { HeroService } from './hero.service'; @Component({ moduleId: module.id, selector: 'my-dashboard', - templateUrl: 'dashboard.component.html', - styleUrls: [ 'dashboard.component.css' ] + templateUrl: './dashboard.component.html', + styleUrls: [ './dashboard.component.css' ] }) // #enddocregion search export class DashboardComponent implements OnInit { diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts index a0342415f2..3f1c7b72f9 100644 --- a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts @@ -10,8 +10,8 @@ import { HeroService } from './hero.service'; @Component({ moduleId: module.id, selector: 'my-hero-detail', - templateUrl: 'hero-detail.component.html', - styleUrls: [ 'hero-detail.component.css' ] + templateUrl: './hero-detail.component.html', + styleUrls: [ './hero-detail.component.css' ] }) export class HeroDetailComponent implements OnInit { hero: Hero; diff --git a/public/docs/_examples/toh-6/ts/app/hero-search.component.ts b/public/docs/_examples/toh-6/ts/app/hero-search.component.ts index bcb04ad549..78c490ef93 100644 --- a/public/docs/_examples/toh-6/ts/app/hero-search.component.ts +++ b/public/docs/_examples/toh-6/ts/app/hero-search.component.ts @@ -11,8 +11,8 @@ import { Hero } from './hero'; @Component({ moduleId: module.id, selector: 'hero-search', - templateUrl: 'hero-search.component.html', - styleUrls: [ 'hero-search.component.css' ], + templateUrl: './hero-search.component.html', + styleUrls: [ './hero-search.component.css' ], providers: [HeroSearchService] }) export class HeroSearchComponent implements OnInit { diff --git a/public/docs/_examples/toh-6/ts/app/heroes.component.ts b/public/docs/_examples/toh-6/ts/app/heroes.component.ts index c8ff6973c0..2a92adfaa8 100644 --- a/public/docs/_examples/toh-6/ts/app/heroes.component.ts +++ b/public/docs/_examples/toh-6/ts/app/heroes.component.ts @@ -8,8 +8,8 @@ import { HeroService } from './hero.service'; @Component({ moduleId: module.id, selector: 'my-heroes', - templateUrl: 'heroes.component.html', - styleUrls: [ 'heroes.component.css' ] + templateUrl: './heroes.component.html', + styleUrls: [ './heroes.component.css' ] }) export class HeroesComponent implements OnInit { heroes: Hero[]; diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts index 98f05ca599..16a2a87f7f 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts @@ -14,7 +14,7 @@ import { Phone, PhoneData } from '../core/phone/phone.service'; @Component({ moduleId: module.id, selector: 'phone-detail', - templateUrl: 'phone-detail.template.html', + templateUrl: './phone-detail.template.html', // #enddocregion initialclass // #docregion initialclass }) diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.ts index ceba9a6f70..579dd5601e 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.ts +++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.ts @@ -8,7 +8,7 @@ import { Phone, PhoneData } from '../core/phone/phone.service'; @Component({ moduleId: module.id, selector: 'phone-detail', - templateUrl: 'phone-detail.template.html' + templateUrl: './phone-detail.template.html' }) export class PhoneDetailComponent { phone: PhoneData; diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.ts index abbe27c5f2..f5dca210d8 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.ts +++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.ts @@ -7,7 +7,7 @@ import { Phone, PhoneData } from '../core/phone/phone.service'; @Component({ moduleId: module.id, selector: 'phone-list', - templateUrl: 'phone-list.template.html', + templateUrl: './phone-list.template.html', }) // #enddocregion top export class PhoneListComponent { diff --git a/public/docs/_examples/user-input/ts/app/app.component.ts b/public/docs/_examples/user-input/ts/app/app.component.ts index 9368e33455..56906ef048 100644 --- a/public/docs/_examples/user-input/ts/app/app.component.ts +++ b/public/docs/_examples/user-input/ts/app/app.component.ts @@ -4,6 +4,6 @@ import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'my-app', - templateUrl: 'app.component.html' + templateUrl: './app.component.html' }) export class AppComponent { } diff --git a/public/docs/ts/latest/cookbook/component-relative-paths.jade b/public/docs/ts/latest/cookbook/component-relative-paths.jade index b37a95ef98..4a0f08bde9 100644 --- a/public/docs/ts/latest/cookbook/component-relative-paths.jade +++ b/public/docs/ts/latest/cookbook/component-relative-paths.jade @@ -64,7 +64,8 @@ include ../_util-fns relative to the component class file simply by setting the `moduleId` property of the `@Component` metadata like this +makeExample('cb-component-relative-paths/ts/app/some.component.ts','module-id')(format='.') :marked - We strip the `app/` base path from the `templateUrl` and `styleUrls`. The result looks like this: + We strip the `app/` base path from the `templateUrl` and `styleUrls` and replace it with `./`. + The result looks like this: +makeExample('cb-component-relative-paths/ts/app/some.component.ts','relative-config')(format='.') .alert.is-helpful diff --git a/public/docs/ts/latest/cookbook/ts-to-js.jade b/public/docs/ts/latest/cookbook/ts-to-js.jade index 2413f80ba0..a31ec9c837 100644 --- a/public/docs/ts/latest/cookbook/ts-to-js.jade +++ b/public/docs/ts/latest/cookbook/ts-to-js.jade @@ -249,7 +249,7 @@ a#class-metadata `)(format='.') :marked - Note that the _TypeScript_ and both _ES6_ `templateUrl` properties identify the location of the template file _relative to the component module_. + Note that both the _TypeScript_ and _ES6_ `templateUrl` properties identify the location of the template file _relative to the component module_. All three metadata configurations specify the `moduleId` property so that Angular can calculate the proper module address. From 0056a68ec81d15e52ba450212a67a00cd9a45118 Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Wed, 4 Jan 2017 13:59:19 -0800 Subject: [PATCH 2/2] docs(style-guide): `./` prefix for template/style URLs and other improvements --- .../app/heroes/shared/hero.service.avoid.ts | 6 +- .../03-06/app/heroes/shared/hero.service.ts | 6 +- .../style-guide/ts/04-08/app/app.module.ts | 4 +- .../ts/04-08/app/heroes/heroes.component.ts | 13 +- .../ts/04-10/app/heroes/heroes.component.ts | 22 +-- .../ts/04-11/app/heroes/heroes.component.ts | 10 +- .../ts/04-12/app/heroes/heroes.component.ts | 8 - .../hero-button.component.avoid.ts | 3 - .../hero-button/hero-button.component.ts | 4 - .../hero-button.component.avoid.ts | 4 - .../hero-button/hero-button.component.ts | 4 - .../style-guide/ts/05-04/app/app.module.ts | 10 +- .../app/heroes/heroes.component.avoid.ts | 15 +- .../ts/05-04/app/heroes/heroes.component.html | 2 +- .../ts/05-04/app/heroes/heroes.component.ts | 15 +- .../05-04/app/heroes/shared/hero.service.ts | 18 ++ .../ts/05-04/app/heroes/shared/index.ts | 1 + .../ts/05-13/app/app.component.html | 3 + .../style-guide/ts/05-13/app/app.module.ts | 4 +- .../hero-button.component.avoid.ts | 4 +- .../hero-button/hero-button.component.ts | 1 + .../heroes/shared/hero-highlight.directive.ts | 15 ++ .../ts/05-13/app/heroes/shared/index.ts | 1 + public/docs/ts/latest/guide/style-guide.jade | 170 ++++++++++-------- 24 files changed, 183 insertions(+), 160 deletions(-) create mode 100644 public/docs/_examples/style-guide/ts/05-04/app/heroes/shared/hero.service.ts create mode 100644 public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-highlight.directive.ts diff --git a/public/docs/_examples/style-guide/ts/03-06/app/heroes/shared/hero.service.avoid.ts b/public/docs/_examples/style-guide/ts/03-06/app/heroes/shared/hero.service.avoid.ts index bb02f3a9ae..8287c567a7 100644 --- a/public/docs/_examples/style-guide/ts/03-06/app/heroes/shared/hero.service.avoid.ts +++ b/public/docs/_examples/style-guide/ts/03-06/app/heroes/shared/hero.service.avoid.ts @@ -3,7 +3,7 @@ /* avoid */ import { ExceptionService, SpinnerService, ToastService } from '../../core'; -import { Http, Response } from '@angular/http'; +import { Http } from '@angular/http'; import { Injectable } from '@angular/core'; import { Hero } from './hero.model'; // #enddocregion example @@ -20,12 +20,12 @@ export class HeroService { getHero(id: number) { return this.http.get(`api/heroes/${id}`) - .map((res: Response) => res.json().data); + .map(response => response.json().data as Hero); } getHeroes() { return this.http.get(`api/heroes`) - .map((res: Response) => res.json().data); + .map(response => response.json().data as Hero[]); } } diff --git a/public/docs/_examples/style-guide/ts/03-06/app/heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/03-06/app/heroes/shared/hero.service.ts index a1711e0fe4..5792cd1ab2 100644 --- a/public/docs/_examples/style-guide/ts/03-06/app/heroes/shared/hero.service.ts +++ b/public/docs/_examples/style-guide/ts/03-06/app/heroes/shared/hero.service.ts @@ -1,7 +1,7 @@ // #docregion // #docregion example import { Injectable } from '@angular/core'; -import { Http, Response } from '@angular/http'; +import { Http } from '@angular/http'; import { Hero } from './hero.model'; import { ExceptionService, SpinnerService, ToastService } from '../../core'; @@ -20,12 +20,12 @@ export class HeroService { getHero(id: number) { return this.http.get(`api/heroes/${id}`) - .map((res: Response) => res.json().data); + .map(response => response.json().data as Hero); } getHeroes() { return this.http.get(`api/heroes`) - .map((res: Response) => res.json().data); + .map(response => response.json().data as Hero[]); } } diff --git a/public/docs/_examples/style-guide/ts/04-08/app/app.module.ts b/public/docs/_examples/style-guide/ts/04-08/app/app.module.ts index e24bf2c038..25568b7fb4 100644 --- a/public/docs/_examples/style-guide/ts/04-08/app/app.module.ts +++ b/public/docs/_examples/style-guide/ts/04-08/app/app.module.ts @@ -4,10 +4,10 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; // #enddocregion example -import { RouterModule } from '@angular/router'; +import { RouterModule } from '@angular/router'; // #docregion example -import { AppComponent } from './app.component'; +import { AppComponent } from './app.component'; import { HeroesComponent } from './heroes/heroes.component'; @NgModule({ diff --git a/public/docs/_examples/style-guide/ts/04-08/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/04-08/app/heroes/heroes.component.ts index f6653cdf53..f9e67391ec 100644 --- a/public/docs/_examples/style-guide/ts/04-08/app/heroes/heroes.component.ts +++ b/public/docs/_examples/style-guide/ts/04-08/app/heroes/heroes.component.ts @@ -1,21 +1,12 @@ -// #docplaster -// #docregion -// #docregion example import { Component, OnInit } from '@angular/core'; @Component({ - // #enddocregion example moduleId: module.id, - // #docregion example selector: 'toh-heroes', templateUrl: './heroes.component.html' }) export class HeroesComponent implements OnInit { - // #enddocregion example - // #docregion example - constructor() { } + constructor() { /* ... */ } - ngOnInit() { } + ngOnInit() { /* ... */ } } -// #enddocregion example - diff --git a/public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.ts index e22b39843d..eb496ccde5 100644 --- a/public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.ts +++ b/public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.ts @@ -1,23 +1,14 @@ -// #docplaster // #docregion -// #docregion example -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { FilterTextService } from '../shared/filter-text/filter-text.service'; @Component({ - // #enddocregion example moduleId: module.id, - // #docregion example selector: 'toh-heroes', templateUrl: './heroes.component.html' }) -export class HeroesComponent implements OnInit { - // #enddocregion example - // #docregion example - filteredHeroes: any[] = []; - - constructor(private filterService: FilterTextService) { } +export class HeroesComponent { heroes = [ { id: 1, name: 'Windstorm' }, @@ -26,13 +17,12 @@ export class HeroesComponent implements OnInit { { id: 4, name: 'Tornado' } ]; + filteredHeroes = this.heroes; + + constructor(private filterService: FilterTextService) { } + filterChanged(searchText: string) { this.filteredHeroes = this.filterService.filter(searchText, ['id', 'name'], this.heroes); } - - ngOnInit() { - this.filteredHeroes = this.heroes; - } } -// #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/04-11/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/04-11/app/heroes/heroes.component.ts index 8d86b30d89..cdbf1135f2 100644 --- a/public/docs/_examples/style-guide/ts/04-11/app/heroes/heroes.component.ts +++ b/public/docs/_examples/style-guide/ts/04-11/app/heroes/heroes.component.ts @@ -1,21 +1,14 @@ -// #docplaster -// #docregion -// #docregion example import { Component } from '@angular/core'; -import { LoggerService } from '../core/logger.service'; +import { LoggerService } from '../core/logger.service'; import { SpinnerService } from '../core/spinner/spinner.service'; @Component({ - // #enddocregion example moduleId: module.id, - // #docregion example selector: 'toh-heroes', templateUrl: './heroes.component.html' }) export class HeroesComponent { - // #enddocregion example - // #docregion example heroes: any[]; constructor( @@ -38,4 +31,3 @@ export class HeroesComponent { }, 2000); } } -// #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/04-12/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/04-12/app/heroes/heroes.component.ts index 44b3efb5c6..3b3e169c0c 100644 --- a/public/docs/_examples/style-guide/ts/04-12/app/heroes/heroes.component.ts +++ b/public/docs/_examples/style-guide/ts/04-12/app/heroes/heroes.component.ts @@ -1,20 +1,13 @@ -// #docplaster -// #docregion -// #docregion example import { Component } from '@angular/core'; import { LoggerService } from '../core/logger.service'; @Component({ - // #enddocregion example moduleId: module.id, - // #docregion example selector: 'toh-heroes', templateUrl: './heroes.component.html' }) export class HeroesComponent { - // #enddocregion example - // #docregion example heroes: any[]; constructor(private loggerService: LoggerService) { } @@ -30,4 +23,3 @@ export class HeroesComponent { this.loggerService.log(`We have ${HeroesComponent.length} heroes`); } } -// #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts index 9e8d05905f..fd055bf64f 100644 --- a/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts +++ b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts @@ -1,13 +1,10 @@ // #docplaster -// #docregion import { Component } from '@angular/core'; // #docregion example /* avoid */ @Component({ - // #enddocregion example moduleId: module.id, - // #docregion example selector: 'tohHeroButton', templateUrl: './hero-button.component.html' }) diff --git a/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts index 48de306193..8b9fbf95e5 100644 --- a/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts +++ b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts @@ -1,12 +1,8 @@ -// #docplaster -// #docregion import { Component } from '@angular/core'; // #docregion example @Component({ - // #enddocregion example moduleId: module.id, - // #docregion example selector: 'toh-hero-button', templateUrl: './hero-button.component.html' }) diff --git a/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts index 34f2f08ca1..6edbc4cd9e 100644 --- a/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts +++ b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts @@ -1,13 +1,9 @@ -// #docplaster -// #docregion import { Component } from '@angular/core'; // #docregion example /* avoid */ @Component({ - // #enddocregion example moduleId: module.id, - // #docregion example selector: '[tohHeroButton]', templateUrl: './hero-button.component.html' }) diff --git a/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts index 48de306193..8b9fbf95e5 100644 --- a/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts +++ b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts @@ -1,12 +1,8 @@ -// #docplaster -// #docregion import { Component } from '@angular/core'; // #docregion example @Component({ - // #enddocregion example moduleId: module.id, - // #docregion example selector: 'toh-hero-button', templateUrl: './hero-button.component.html' }) diff --git a/public/docs/_examples/style-guide/ts/05-04/app/app.module.ts b/public/docs/_examples/style-guide/ts/05-04/app/app.module.ts index 9cae85085a..07f97cc6e4 100644 --- a/public/docs/_examples/style-guide/ts/05-04/app/app.module.ts +++ b/public/docs/_examples/style-guide/ts/05-04/app/app.module.ts @@ -1,9 +1,10 @@ -import { NgModule } from '@angular/core'; +import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; +import { RouterModule } from '@angular/router'; -import { AppComponent } from './app.component'; +import { AppComponent } from './app.component'; import { HeroesComponent } from './heroes'; +import { HeroService } from './heroes/shared'; @NgModule({ imports: [ @@ -14,6 +15,7 @@ import { HeroesComponent } from './heroes'; AppComponent, HeroesComponent ], - exports: [ AppComponent ] + exports: [ AppComponent ], + providers: [ HeroService ] }) export class AppModule {} diff --git a/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.avoid.ts index cced0be5dc..22be77d9d8 100644 --- a/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.avoid.ts +++ b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.avoid.ts @@ -1,7 +1,8 @@ -// #docregion import { Component, OnInit } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; + +import { Hero, HeroService } from './shared'; -import { Hero } from './shared/hero.model'; // #docregion example /* avoid */ @@ -11,7 +12,7 @@ import { Hero } from './shared/hero.model';

My Heroes

    -
  • +
  • {{hero.id}} {{hero.name}}
@@ -51,9 +52,13 @@ import { Hero } from './shared/hero.model'; `] }) export class HeroesComponent implements OnInit { - heroes: Hero[]; + heroes: Observable; selectedHero: Hero; - ngOnInit() {} + constructor(private heroService: HeroService) { } + + ngOnInit() { + this.heroes = this.heroService.getHeroes(); + } } // #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.html b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.html index b6bf75ef1a..bab05ceb2b 100644 --- a/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.html +++ b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.html @@ -2,7 +2,7 @@

My Heroes

    -
  • +
  • {{hero.id}} {{hero.name}}
diff --git a/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts index ee5a414e1a..ec5dadc4a0 100644 --- a/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts +++ b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts @@ -1,22 +1,23 @@ -// #docplaster -// #docregion import { Component, OnInit } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; -import { Hero } from './shared'; +import { Hero, HeroService } from './shared'; // #docregion example @Component({ - // #enddocregion example moduleId: module.id, - // #docregion example selector: 'toh-heroes', templateUrl: './heroes.component.html', styleUrls: ['./heroes.component.css'] }) export class HeroesComponent implements OnInit { - heroes: Hero[]; + heroes: Observable; selectedHero: Hero; - ngOnInit() { } + constructor(private heroService: HeroService) { } + + ngOnInit() { + this.heroes = this.heroService.getHeroes(); + } } // #enddocregion example diff --git a/public/docs/_examples/style-guide/ts/05-04/app/heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/05-04/app/heroes/shared/hero.service.ts new file mode 100644 index 0000000000..80e1d97455 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-04/app/heroes/shared/hero.service.ts @@ -0,0 +1,18 @@ +import { Injectable } from '@angular/core'; +import { Http } from '@angular/http'; + +import { Observable } from 'rxjs/Observable'; +import 'rxjs/add/operator/map'; + +import { Hero } from './hero.model'; + +@Injectable() +export class HeroService { + + constructor(private http: Http) {} + + getHeroes(): Observable { + return this.http.get('api/heroes') + .map(resp => resp.json().data as Hero[]); + } +} diff --git a/public/docs/_examples/style-guide/ts/05-04/app/heroes/shared/index.ts b/public/docs/_examples/style-guide/ts/05-04/app/heroes/shared/index.ts index 0dceb684c4..dbb150d3f8 100644 --- a/public/docs/_examples/style-guide/ts/05-04/app/heroes/shared/index.ts +++ b/public/docs/_examples/style-guide/ts/05-04/app/heroes/shared/index.ts @@ -1 +1,2 @@ export * from './hero.model'; +export * from './hero.service'; diff --git a/public/docs/_examples/style-guide/ts/05-13/app/app.component.html b/public/docs/_examples/style-guide/ts/05-13/app/app.component.html index 094f24b258..3cd94ca772 100644 --- a/public/docs/_examples/style-guide/ts/05-13/app/app.component.html +++ b/public/docs/_examples/style-guide/ts/05-13/app/app.component.html @@ -1,3 +1,6 @@ + + +

The Great Bombasto

diff --git a/public/docs/_examples/style-guide/ts/05-13/app/app.module.ts b/public/docs/_examples/style-guide/ts/05-13/app/app.module.ts index 102ed0f617..7ebe91dbbc 100644 --- a/public/docs/_examples/style-guide/ts/05-13/app/app.module.ts +++ b/public/docs/_examples/style-guide/ts/05-13/app/app.module.ts @@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; -import { HeroButtonComponent } from './heroes'; +import { HeroButtonComponent, HeroHighlightDirective } from './heroes'; @NgModule({ imports: [ @@ -10,7 +10,7 @@ import { HeroButtonComponent } from './heroes'; ], declarations: [ AppComponent, - HeroButtonComponent + HeroButtonComponent, HeroHighlightDirective ], exports: [ AppComponent ] }) diff --git a/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts index 9724ad437d..4e67a14113 100644 --- a/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts +++ b/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts @@ -1,13 +1,13 @@ -// #docregion import { Component, EventEmitter, Input, Output } from '@angular/core'; // #docregion example -/* avoid */ +/* avoid pointless aliasing */ @Component({ selector: 'toh-hero-button', template: `` }) export class HeroButtonComponent { + // Pointless aliases @Output('changeEvent') change = new EventEmitter(); @Input('labelAttribute') label: string; } diff --git a/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.ts index b299740765..af6e7d46b7 100644 --- a/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.ts +++ b/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.ts @@ -7,6 +7,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; template: `` }) export class HeroButtonComponent { + // No aliases @Output() change = new EventEmitter(); @Input() label: string; } diff --git a/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-highlight.directive.ts b/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-highlight.directive.ts new file mode 100644 index 0000000000..f9e76248a8 --- /dev/null +++ b/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-highlight.directive.ts @@ -0,0 +1,15 @@ +// #docregion +import { Directive, ElementRef, Input, OnChanges } from '@angular/core'; + +@Directive({ selector: '[heroHighlight]' }) +export class HeroHighlightDirective implements OnChanges { + + // Aliased because `color` is a better property name than `heroHighlight` + @Input('heroHighlight') color: string; + + constructor(private el: ElementRef) {} + + ngOnChanges() { + this.el.nativeElement.style.backgroundColor = this.color || 'yellow'; + } +} diff --git a/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/index.ts b/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/index.ts index 2334d49c9a..565f46cf4f 100644 --- a/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/index.ts +++ b/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/index.ts @@ -1 +1,2 @@ export * from './hero-button'; +export * from './hero-highlight.directive'; diff --git a/public/docs/ts/latest/guide/style-guide.jade b/public/docs/ts/latest/guide/style-guide.jade index 2a9e52b935..3d34dad65a 100644 --- a/public/docs/ts/latest/guide/style-guide.jade +++ b/public/docs/ts/latest/guide/style-guide.jade @@ -11,7 +11,7 @@ include ../_util-fns .l-main-section :marked - ## Style Vocabulary + ## Style vocabulary Each guideline describes either a good or bad practice, and all have a consistent presentation. @@ -35,7 +35,7 @@ include ../_util-fns .l-main-section :marked - ## File Structure Conventions + ## File structure conventions Some code examples display a file that has one or more similarly named companion files. For example, `hero.component.ts` and `hero.component.html`. @@ -46,7 +46,7 @@ include ../_util-fns a(id='toc') :marked - ## Table of Contents + ## Table of contents 1. [Single responsibility](#single-responsibility) 1. [Naming](#naming) @@ -61,12 +61,14 @@ a(id='toc') .l-main-section :marked - ## Single Responsibility + ## Single responsibility - Apply the [Single Responsibility Principle (SPR)](https://wikipedia.org/wiki/Single_responsibility_principle) to all components, services, and other symbols. + Apply the + Single Responsibility Principle (SPR) + to all components, services, and other symbols. This helps make the app cleaner, easier to read and maintain, and more testable. - ### Rule of One + ### _Rule of One_ #### Style 01-01 .s-rule.do :marked @@ -122,7 +124,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Small Functions + ### Small functions #### Style 01-02 .s-rule.do :marked @@ -189,7 +191,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Separate File Names with Dots and Dashes + ### Separate file names with dots and dashes #### Style 02-02 .s-rule.do @@ -230,7 +232,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Symbols and File Names + ### Symbols and file names #### Style 02-03 .s-rule.do @@ -336,7 +338,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Service Names + ### Service names #### Style 02-04 .s-rule.do @@ -434,7 +436,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Directive Selectors + ### Directive selectors #### Style 02-06 .s-rule.do @@ -453,7 +455,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Custom Prefix for Components + ### Custom prefix for components #### Style 02-07 .s-rule.do @@ -495,7 +497,7 @@ a(href="#toc") Back to top :marked :marked - ### Custom Prefix for Directives + ### Custom prefix for directives #### Style 02-08 .s-rule.do @@ -524,7 +526,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Pipe Names + ### Pipe names #### Style 02-09 .s-rule.do @@ -564,7 +566,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Unit Test File Names + ### Unit test file names #### Style 02-10 .s-rule.do @@ -628,7 +630,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### End to End Test File Names + ### _End-to-End_ (E2E) test file names #### Style 02-11 .s-rule.do @@ -667,7 +669,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Angular NgModule Names + ### Angular _NgModule_ names #### Style 02-12 .s-rule.do @@ -759,7 +761,7 @@ a(href="#toc") Back to top .l-main-section :marked - ## Coding Conventions + ## Coding conventions Have consistent set of coding, naming, and whitespace conventions. @@ -881,7 +883,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Properties and Methods + ### Properties and methods #### Style 03-04 .s-rule.do @@ -914,7 +916,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Import Line Spacing + ### Import line spacing #### Style 03-06 .s-rule.consider @@ -927,15 +929,15 @@ a(href="#toc") Back to top .s-rule.consider :marked - **Consider** listing destructured imported assets alphabetically. + **Consider** listing destructured imported symbols alphabetically. .s-why :marked - **Why?** The empty line makes it easy to read and locate imports. + **Why?** The empty line separates _your_ stuff from _their_ stuff. .s-why.s-why-last :marked - **Why?** Alphabetizing makes it easier to read and locate imports. + **Why?** Alphabetizing makes it easier to read and locate symbols. +makeExample('style-guide/ts/03-06/app/heroes/shared/hero.service.avoid.ts', 'example', 'app/heroes/shared/hero.service.ts')(avoid=1) :marked @@ -947,7 +949,7 @@ a(href="#toc") Back to top .l-main-section :marked - ## App Structure and Angular Modules + ## Application structure and Angular modules Have a near-term view of implementation and a long-term vision. Start small but keep in mind where the app is heading down the road. @@ -963,7 +965,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### LIFT + ### _LIFT_ #### Style 04-01 .s-rule.do @@ -1068,7 +1070,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### T-DRY (Try to be DRY) + ### _T-DRY_ (Try to be _DRY_) #### Style 04-05 .s-rule.do @@ -1090,7 +1092,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Overall Structural Guidelines + ### Overall structural guidelines #### Style 04-06 .s-rule.do @@ -1186,7 +1188,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Folders-by-Feature Structure + ### _Folders-by-feature_ structure #### Style 04-07 .s-rule.do @@ -1230,7 +1232,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### App Root Module + ### App _root module_ #### Style 04-08 .s-rule.do @@ -1256,7 +1258,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Feature Modules + ### Feature modules #### Style 04-09 .s-rule.do @@ -1303,7 +1305,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Shared Feature Module + ### Shared feature module #### Style 04-10 .s-rule.do @@ -1400,7 +1402,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Core Feature Module + ### Core feature module #### Style 04-11 .s-rule.consider @@ -1531,7 +1533,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Prevent Reimport of Core Module + ### Prevent re-import of the core module #### Style 04-12 Only the root `AppModule` should import the `CoreModule`. @@ -1563,7 +1565,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Lazy Loaded Folders + ### Lazy Loaded folders #### Style 04-13 A distinct application feature or workflow may be *lazy loaded* or *loaded on demand* rather than when the application starts. @@ -1580,7 +1582,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Never Directly Import Lazy Loaded Folders + ### Never directly import lazy loaded folders #### Style 04-14 .s-rule.avoid @@ -1597,7 +1599,7 @@ a(href="#toc") Back to top :marked ## Components - ### Component Selector Naming + ### Component selector names #### Style 05-02 .s-rule.do @@ -1623,25 +1625,22 @@ a(href="#toc") Back to top .l-main-section :marked - ### Components as Elements + ### Components as elements #### Style 05-03 .s-rule.do :marked - **Do** define components as elements via the selector. + **Do** give components an _element_ selector, as opposed to _attribute_ or _class_ selectors. .s-why :marked - **Why?** components have templates containing HTML and optional Angular template syntax. They are most associated with putting content on a page, and thus are more closely aligned with elements. - -.s-why - :marked - **Why?** A component represents a visual element on the page. - Defining the selector as an HTML element tag is consistent with native HTML elements and WebComponents. + **Why?** components have templates containing HTML and optional Angular template syntax. + They display content. + Developers place components on the page as they would native HTML elements and WebComponents. .s-why.s-why-last :marked - **Why?** It is easier to recognize that a symbol is a component vs a directive by looking at the template's html. + **Why?** It is easier to recognize that a symbol is a component by looking at the template's html. +makeExample('style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts', 'example', 'app/heroes/hero-button/hero-button.component.ts')(avoid=1) :marked @@ -1661,7 +1660,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Extract Template and Styles to Their Own Files + ### Extract templates and styles to their own files #### Style 05-04 .s-rule.do @@ -1676,14 +1675,34 @@ a(href="#toc") Back to top :marked **Do** name the style file `[component-name].component.css`, where [component-name] is the component name. +.s-rule.do + :marked + **Do** specify _component-relative_ URLs, prefixed with `./`, and add `moduleId: module.id` to the component metadata. + .s-why :marked - **Why?** Syntax hints for inline templates in (*.js and *.ts) code files are not supported by some editors. + **Why?** Large, inline templates and styles obscure the component's purpose and implementation, reducing readability and maintainability. + +.s-why + :marked + **Why?** In most editors, syntax hints and code snippets aren't available when developing inline templates and styles. + The Angular TypeScript Language Service (forthcoming) promises to overcome this deficiency for HTML templates + in those editors that support it; it won't help with CSS styles. + +.s-why + :marked + **Why?** A _component relative_ URL requires no change when you move the component files, as long as the files stay together. + +.s-why + :marked + **Why?** The JIT compiler requires the `moduleId` for relative URLs; the AOT compiler, + which doesn't need it, safely ignores this property. .s-why.s-why-last :marked - **Why?** A component file's logic is easier to read when not mixed with inline template and styles. + **Why?** The `./` prefix is standard syntax for relative URLs; don't depend on Angular's current ability to do without that prefix. + +makeExample('style-guide/ts/05-04/app/heroes/heroes.component.avoid.ts', 'example', 'app/heroes/heroes.component.ts')(avoid=1) :marked @@ -1701,17 +1720,17 @@ a(href="#toc") Back to top .l-main-section :marked - ### Decorate Input and Output Properties Inline + ### Decorate _input_ and _output_ properties #### Style 05-12 .s-rule.do :marked - **Do** use `@Input` and `@Output` instead of the `inputs` and `outputs` properties of the - `@Directive` and `@Component` decorators: + **Do** use the `@Input` and `@Output` class decorators instead of the `inputs` and `outputs` properties of the + `@Directive` and `@Component` metadata: .s-rule.do :marked - **Do** place the `@Input()` or `@Output()` on the same line as the property they decorate. + **Consider** placing `@Input()` or `@Output()` on the same line as the property it decorates. .s-why :marked @@ -1728,7 +1747,8 @@ a(href="#toc") Back to top .s-why.s-why-last :marked - **Why?** Placing the decorator on the same line makes for shorter code and still easily identifies the property as an input or output. + **Why?** Placing the decorator on the same line _usually_ makes for shorter code and still easily identifies the property as an input or output. + Put it on the line above when doing so is clearly more readable. +makeExample('style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts', 'example', 'app/heroes/shared/hero-button/hero-button.component.ts')(avoid=1) :marked @@ -1740,17 +1760,21 @@ a(href="#toc") Back to top .l-main-section :marked - ### Avoid Renaming Inputs and Outputs + ### Avoid aliasing _inputs_ and _outputs_ #### Style 05-13 .s-rule.avoid :marked - **Avoid** renaming inputs and outputs, when possible. + **Avoid** _input_ and _output_ aliases except when it serves an important purpose. + +.s-why + :marked + **Why?** Two names for the same property (one private, one public) is inherently confusing. .s-why.s-why-last :marked - **Why?** May lead to confusion when the output or the input - properties of a given directive are named one way but exported differently as a public API. + **Why?** You should use an alias when the directive name is also an _input_ property, + and the directive name doesn't describe the property. +makeExample('style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts', 'example', 'app/heroes/shared/hero-button/hero-button.component.ts')(avoid=1) :marked @@ -1760,9 +1784,11 @@ a(href="#toc") Back to top +makeTabs( `style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.ts, + style-guide/ts/05-13/app/heroes/shared/hero-highlight.directive.ts, style-guide/ts/05-13/app/app.component.html`, 'example,', `app/heroes/shared/hero-button/hero-button.component.ts, + app/heroes/shared/hero-button/hero-highlight.directive.ts, app/app.component.html`) :marked @@ -1770,7 +1796,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Member Sequence + ### Member sequence #### Style 05-14 .s-rule.do @@ -1796,7 +1822,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Put Logic in Services + ### Delegate complex component logic to services #### Style 05-15 .s-rule.do @@ -1833,7 +1859,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Don't Prefix Output Properties + ### Don't prefix _output_ properties #### Style 05-16 .s-rule.do @@ -1870,7 +1896,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Put Presentation Logic in the Component Class + ### Put presentation logic in the component class #### Style 05-17 .s-rule.do @@ -1901,7 +1927,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Use Directives to Enhance an Existing Element + ### Use directives to enhance an element #### Style 06-01 .s-rule.do @@ -1926,7 +1952,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Use HostListener and HostBinding Class Decorators + ### _HostListener_/_HostBinding_ decorators versus _host_ metadata #### Style 06-03 .s-rule.consider @@ -1962,7 +1988,7 @@ a(href="#toc") Back to top :marked ## Services - ### Services are Singletons within an Injector + ### Services are singletons #### Style 07-01 .s-rule.do @@ -1984,7 +2010,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Single Responsibility + ### Single responsibility #### Style 07-02 .s-rule.do @@ -2007,7 +2033,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Providing a Service + ### Providing a service #### Style 07-03 .s-rule.do @@ -2043,7 +2069,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### Use the @Injectable() Class Decorator + ### Use the @Injectable() class decorator #### Style 07-04 .s-rule.do @@ -2071,7 +2097,7 @@ a(href="#toc") Back to top :marked ## Data Services - ### Separate Data Calls + ### Talk to the server through a service #### Style 08-01 .s-rule.do @@ -2104,15 +2130,15 @@ a(href="#toc") Back to top .l-main-section :marked - ## Lifecycle Hooks + ## Lifecycle hooks - Use Lifecycle Hooks to tap into important events exposed by Angular. + Use Lifecycle hooks to tap into important events exposed by Angular. a(href="#toc") Back to top .l-main-section :marked - ### Implement Lifecycle Hooks Interfaces + ### Implement lifecycle hook interfaces #### Style 09-01 .s-rule.do @@ -2157,7 +2183,7 @@ a(href="#toc") Back to top .l-main-section :marked - ### File Templates and Snippets + ### File templates and snippets #### Style A-02 .s-rule.do