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 b1a93cf7a2..bdebf09f9e 100644 --- a/public/docs/_examples/architecture/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/architecture/ts/app/hero-detail.component.ts @@ -3,8 +3,9 @@ import { Component, Input } from '@angular/core'; import { Hero } from './hero'; @Component({ + moduleId: module.id, selector: 'hero-detail', - templateUrl: 'app/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 868b9251b5..42f18aed2f 100644 --- a/public/docs/_examples/architecture/ts/app/hero-list.component.ts +++ b/public/docs/_examples/architecture/ts/app/hero-list.component.ts @@ -5,9 +5,10 @@ import { HeroService } from './hero.service'; // #docregion metadata, providers @Component({ + moduleId: module.id, selector: 'hero-list', - templateUrl: 'app/hero-list.component.html', - providers: [ HeroService ] + templateUrl: 'hero-list.component.html', + providers: [ HeroService ] }) // #enddocregion providers // #docregion class 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 b8b1fa6f08..cc57c9e6b1 100644 --- a/public/docs/_examples/attribute-directives/ts/app/app.component.ts +++ b/public/docs/_examples/attribute-directives/ts/app/app.component.ts @@ -2,8 +2,9 @@ import { Component } from '@angular/core'; @Component({ + moduleId: module.id, selector: 'my-app', - templateUrl: 'app/app.component.html' + templateUrl: 'app.component.html' }) 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 c3eb0c86f4..c6959c2da6 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 @@ -4,10 +4,11 @@ import { MovieService } from './movie.service'; import { IMovie } from './movie'; @Component({ + moduleId: module.id, selector: 'my-app', - templateUrl: 'app/app.component.html', - styleUrls: ['app/app.component.css'], - providers: [MovieService] + 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 dc6fbd6b63..951cccb6df 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 @@ -8,11 +8,12 @@ import { MovieService } from './movie.service'; // #docregion component @Component({ + moduleId: module.id, selector: 'movie-list', - templateUrl: 'app/movie-list.component.html', + templateUrl: 'movie-list.component.html', // #enddocregion component // #docregion style-url - styleUrls: ['app/movie-list.component.css'], + styleUrls: [ 'movie-list.component.css' ], // #enddocregion style-url }) // #enddocregion component 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 0a3c992498..be8d89aff7 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 @@ -1,7 +1,8 @@ import { Component } from '@angular/core'; @Component({ + moduleId: module.id, selector: 'my-app', - templateUrl: 'app/app.component.html' + templateUrl: 'app.component.html' }) export class AppComponent { } 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 ab0d9c445b..820d43d6ab 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 @@ -7,10 +7,11 @@ import { UserContextService } from './user-context.service'; import { UserService } from './user.service'; @Component({ + moduleId: module.id, selector: 'my-app', - templateUrl: 'app/app.component.html', + templateUrl: 'app.component.html', // #docregion providers - providers: [LoggerService, UserContextService, UserService] + providers: [ LoggerService, UserContextService, UserService ] // #enddocregion providers }) export class AppComponent { diff --git a/public/docs/_examples/cb-dynamic-form-deprecated/e2e-spec.ts.disabled b/public/docs/_examples/cb-dynamic-form-deprecated/e2e-spec.ts.disabled deleted file mode 100644 index 725022d0f1..0000000000 --- a/public/docs/_examples/cb-dynamic-form-deprecated/e2e-spec.ts.disabled +++ /dev/null @@ -1,27 +0,0 @@ -/// -'use strict'; -/* tslint:disable:quotemark */ -describe('Dynamic Form Deprecated', function () { - - beforeAll(function () { - browser.get(''); - }); - - it('should submit form', function () { - let firstNameElement = element.all(by.css('input[id=firstName]')).get(0); - expect(firstNameElement.getAttribute('value')).toEqual('Bombasto'); - - let emailElement = element.all(by.css('input[id=emailAddress]')).get(0); - let email = 'test@test.com'; - emailElement.sendKeys(email); - expect(emailElement.getAttribute('value')).toEqual(email); - - element(by.css('select option[value="solid"]')).click(); - - let saveButton = element.all(by.css('button')).get(0); - saveButton.click().then(function(){ - expect(element(by.xpath("//strong[contains(text(),'Saved the following values')]")).isPresent()).toBe(true); - }); - }); - -}); diff --git a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/app.component.ts b/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/app.component.ts deleted file mode 100644 index e51561770e..0000000000 --- a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/app.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { DynamicFormComponent } from './dynamic-form.component'; -import { QuestionService } from './question.service'; - -@Component({ - selector: 'my-app', - template: ` -
-

Job Application for Heroes

- -
- `, - directives: [DynamicFormComponent], - providers: [QuestionService] -}) -export class AppComponent { - questions: any[]; - - constructor(service: QuestionService) { - this.questions = service.getQuestions(); - } -} diff --git a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/dynamic-form-question.component.html b/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/dynamic-form-question.component.html deleted file mode 100644 index e580ee3027..0000000000 --- a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/dynamic-form-question.component.html +++ /dev/null @@ -1,17 +0,0 @@ - -
- - -
- - - - - -
- -
{{question.label}} is required
-
diff --git a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/dynamic-form-question.component.ts b/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/dynamic-form-question.component.ts deleted file mode 100644 index 0593fd523e..0000000000 --- a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/dynamic-form-question.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -// #docregion -import { Component, Input } from '@angular/core'; -import { ControlGroup } from '@angular/common'; - -import { QuestionBase } from './question-base'; - -@Component({ - selector: 'df-question', - templateUrl: 'app/dynamic-form-question.component.html' -}) -export class DynamicFormQuestionComponent { - @Input() question: QuestionBase; - @Input() form: ControlGroup; - get isValid() { return this.form.controls[this.question.key].valid; } -} diff --git a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/dynamic-form.component.html b/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/dynamic-form.component.html deleted file mode 100644 index e8f14612c9..0000000000 --- a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/dynamic-form.component.html +++ /dev/null @@ -1,17 +0,0 @@ - -
-
- -
- -
- -
- -
-
- -
- Saved the following values
{{payLoad}} -
-
diff --git a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/dynamic-form.component.ts b/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/dynamic-form.component.ts deleted file mode 100644 index 5d6eb833ed..0000000000 --- a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/dynamic-form.component.ts +++ /dev/null @@ -1,30 +0,0 @@ -// #docregion -import { Component, Input, OnInit } from '@angular/core'; -import { ControlGroup } from '@angular/common'; - -import { QuestionBase } from './question-base'; -import { QuestionControlService } from './question-control.service'; -import { DynamicFormQuestionComponent } from './dynamic-form-question.component'; - -@Component({ - selector: 'dynamic-form', - templateUrl: 'app/dynamic-form.component.html', - directives: [DynamicFormQuestionComponent], - providers: [QuestionControlService] -}) -export class DynamicFormComponent implements OnInit { - - @Input() questions: QuestionBase[] = []; - form: ControlGroup; - payLoad = ''; - - constructor(private qcs: QuestionControlService) { } - - ngOnInit() { - this.form = this.qcs.toControlGroup(this.questions); - } - - onSubmit() { - this.payLoad = JSON.stringify(this.form.value); - } -} diff --git a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/main.ts b/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/main.ts deleted file mode 100644 index 62ced34a31..0000000000 --- a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/main.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; - -import { AppComponent } from './app.component'; - -bootstrap(AppComponent, []); diff --git a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/question-base.ts b/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/question-base.ts deleted file mode 100644 index 2b32b00f2a..0000000000 --- a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/question-base.ts +++ /dev/null @@ -1,25 +0,0 @@ -// #docregion -export class QuestionBase{ - value: T; - key: string; - label: string; - required: boolean; - order: number; - controlType: string; - - constructor(options: { - value?: T, - key?: string, - label?: string, - required?: boolean, - order?: number, - controlType?: string - } = {}) { - this.value = options.value; - this.key = options.key || ''; - this.label = options.label || ''; - this.required = !!options.required; - this.order = options.order === undefined ? 1 : options.order; - this.controlType = options.controlType || ''; - } -} diff --git a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/question-control.service.ts b/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/question-control.service.ts deleted file mode 100644 index 3d56b0c2f6..0000000000 --- a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/question-control.service.ts +++ /dev/null @@ -1,18 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { FormBuilder, Validators } from '@angular/common'; -import { QuestionBase } from './question-base'; - -@Injectable() -export class QuestionControlService { - constructor(private fb: FormBuilder) { } - - toControlGroup(questions: QuestionBase[] ) { - let group = {}; - - questions.forEach(question => { - group[question.key] = question.required ? [question.value || '', Validators.required] : [question.value || '']; - }); - return this.fb.group(group); - } -} diff --git a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/question-dropdown.ts b/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/question-dropdown.ts deleted file mode 100644 index 35a9074c74..0000000000 --- a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/question-dropdown.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { QuestionBase } from './question-base'; - -export class DropdownQuestion extends QuestionBase { - controlType = 'dropdown'; - options: {key: string, value: string}[] = []; - - constructor(options: {} = {}) { - super(options); - this.options = options['options'] || []; - } -} diff --git a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/question-textbox.ts b/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/question-textbox.ts deleted file mode 100644 index aaa7edf267..0000000000 --- a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/question-textbox.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { QuestionBase } from './question-base'; - -export class TextboxQuestion extends QuestionBase { - controlType = 'textbox'; - type: string; - - constructor(options: {} = {}) { - super(options); - this.type = options['type'] || ''; - } -} diff --git a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/question.service.ts b/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/question.service.ts deleted file mode 100644 index ee169d0827..0000000000 --- a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/question.service.ts +++ /dev/null @@ -1,47 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; - -import { QuestionBase } from './question-base'; -import { TextboxQuestion } from './question-textbox'; -import { DropdownQuestion } from './question-dropdown'; - -@Injectable() -export class QuestionService { - - // Todo: get from a remote source of question metadata - // Todo: make asynchronous - getQuestions() { - - let questions: QuestionBase[] = [ - - new DropdownQuestion({ - key: 'brave', - label: 'Bravery Rating', - options: [ - {key: 'solid', value: 'Solid'}, - {key: 'great', value: 'Great'}, - {key: 'good', value: 'Good'}, - {key: 'unproven', value: 'Unproven'} - ], - order: 3 - }), - - new TextboxQuestion({ - key: 'firstName', - label: 'First name', - value: 'Bombasto', - required: true, - order: 1 - }), - - new TextboxQuestion({ - key: 'emailAddress', - label: 'Email', - type: 'email', - order: 2 - }) - ]; - - return questions.sort((a, b) => a.order - b.order); - } -} diff --git a/public/docs/_examples/cb-dynamic-form-deprecated/ts/example-config.json b/public/docs/_examples/cb-dynamic-form-deprecated/ts/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/public/docs/_examples/cb-dynamic-form-deprecated/ts/index.html b/public/docs/_examples/cb-dynamic-form-deprecated/ts/index.html deleted file mode 100644 index ec3e1cbbb2..0000000000 --- a/public/docs/_examples/cb-dynamic-form-deprecated/ts/index.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - Dynamic Form - - - - - - - - - - - - - - - - - - Loading app... - - - diff --git a/public/docs/_examples/cb-dynamic-form-deprecated/ts/plnkr.json b/public/docs/_examples/cb-dynamic-form-deprecated/ts/plnkr.json deleted file mode 100644 index 5034d652aa..0000000000 --- a/public/docs/_examples/cb-dynamic-form-deprecated/ts/plnkr.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Dynamic Form Deprecated", - "files":[ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1].*" - ], - "tags":["cookbook"] -} diff --git a/public/docs/_examples/cb-dynamic-form-deprecated/ts/sample.css b/public/docs/_examples/cb-dynamic-form-deprecated/ts/sample.css deleted file mode 100644 index fe2cc28481..0000000000 --- a/public/docs/_examples/cb-dynamic-form-deprecated/ts/sample.css +++ /dev/null @@ -1,7 +0,0 @@ -.errorMessage{ - color:red; -} - -.form-row{ - margin-top: 10px; -} \ No newline at end of file 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 412f2d8c55..69194fc0e7 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 @@ -1,12 +1,13 @@ // #docregion import { Component, Input } from '@angular/core'; -import { FormGroup } from '@angular/forms'; +import { FormGroup } from '@angular/forms'; import { QuestionBase } from './question-base'; @Component({ + moduleId: module.id, selector: 'df-question', - templateUrl: 'app/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 68bd1f582b..e0331797bf 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 @@ -6,8 +6,9 @@ import { QuestionBase } from './question-base'; import { QuestionControlService } from './question-control.service'; @Component({ + moduleId: module.id, selector: 'dynamic-form', - templateUrl: 'app/dynamic-form.component.html', + templateUrl: 'dynamic-form.component.html', providers: [ QuestionControlService ] }) export class DynamicFormComponent implements OnInit { 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 fb08f7833b..bc011fb4fd 100644 --- a/public/docs/_examples/forms/ts/app/hero-form.component.ts +++ b/public/docs/_examples/forms/ts/app/hero-form.component.ts @@ -6,8 +6,9 @@ import { Component } from '@angular/core'; import { Hero } from './hero'; @Component({ + moduleId: module.id, selector: 'hero-form', - templateUrl: 'app/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 308bc4547b..3db096cd75 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 @@ -2,11 +2,14 @@ import { Component } from '@angular/core'; @Component({ + // Set the base for module-relative URLs + moduleId: module.id, + // Declare the tag name in index.html to where the component attaches selector: 'hello-world', // Location of the template for this component - templateUrl: 'app/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 9b785144ab..42e09d0fe4 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts @@ -1,7 +1,8 @@ // #docregion import { Component } from '@angular/core'; @Component({ + moduleId: module.id, selector: 'my-app', - templateUrl: 'app/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 6dfcf8dd43..aadd6eb26f 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 @@ -75,8 +75,9 @@ export class DoCheckComponent implements DoCheck { /***************************************/ @Component({ + moduleId: module.id, selector: 'do-check-parent', - templateUrl: 'app/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 993eb4040d..4c83d6f864 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 @@ -49,8 +49,9 @@ export class OnChangesComponent implements OnChanges { /***************************************/ @Component({ + moduleId: module.id, selector: 'on-changes-parent', - templateUrl: 'app/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 2d487f4037..99fefac6ec 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts @@ -4,8 +4,9 @@ import { Component } from '@angular/core'; import { LoggerService } from './logger.service'; @Component({ + moduleId: module.id, selector: 'spy-parent', - templateUrl: 'app/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 392904086a..30576f8f38 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 @@ -8,7 +8,7 @@ import { UserService } from '../user.service'; moduleId: module.id, selector: 'app-contact', templateUrl: 'contact.component.html', - styleUrls: ['contact.component.css'] + 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 bb6f2e3b42..ee7c387c10 100644 --- a/public/docs/_examples/ngmodule/ts/app/contact/contact.component.ts +++ b/public/docs/_examples/ngmodule/ts/app/contact/contact.component.ts @@ -9,7 +9,7 @@ import { UserService } from '../core/user.service'; moduleId: module.id, selector: 'app-contact', templateUrl: 'contact.component.html', - styleUrls: ['contact.component.css'] + styleUrls: [ 'contact.component.css' ] }) export class ContactComponent implements OnInit { contact: Contact; diff --git a/public/docs/_examples/pipes/ts/app/app.component.ts b/public/docs/_examples/pipes/ts/app/app.component.ts index 1a53c144aa..ca83f1b6af 100644 --- a/public/docs/_examples/pipes/ts/app/app.component.ts +++ b/public/docs/_examples/pipes/ts/app/app.component.ts @@ -2,8 +2,9 @@ import { Component } from '@angular/core'; @Component({ + moduleId: module.id, selector: 'my-app', - templateUrl: 'app/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 a6a8dd08b2..26a43997aa 100644 --- a/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts +++ b/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts @@ -5,8 +5,9 @@ import { Component } from '@angular/core'; import { HEROES } from './heroes'; @Component({ + moduleId: module.id, selector: 'flying-heroes', - templateUrl: 'app/flying-heroes.component.html', + templateUrl: 'flying-heroes.component.html', styles: ['#flyers, #all {font-style: italic}'] }) // #docregion v1 @@ -49,8 +50,9 @@ export class FlyingHeroesComponent { ////// Identical except for impure pipe ////// // #docregion impure-component @Component({ + moduleId: module.id, selector: 'flying-heroes-impure', - templateUrl: 'app/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/security/ts/app/bypass-security.component.ts b/public/docs/_examples/security/ts/app/bypass-security.component.ts index 7c30903955..2aecfddab9 100644 --- a/public/docs/_examples/security/ts/app/bypass-security.component.ts +++ b/public/docs/_examples/security/ts/app/bypass-security.component.ts @@ -5,7 +5,8 @@ import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browse @Component({ selector: 'bypass-security', - templateUrl: 'app/bypass-security.component.html', + moduleId: module.id, + templateUrl: 'bypass-security.component.html', }) export class BypassSecurityComponent { dangerousUrl: string; 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 f1e6450124..f6306f1e03 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 @@ -6,7 +6,8 @@ import { HeroService } from './hero.service.promise'; @Component({ selector: 'hero-list-promise', - templateUrl: 'app/toh/hero-list.component.html', + moduleId: module.id, + templateUrl: 'hero-list.component.html', providers: [ HeroService ] }) // #docregion component 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 a12287dacd..0fa7bbad6e 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 @@ -5,8 +5,9 @@ import { Hero } from './hero'; import { HeroService } from './hero.service'; @Component({ + moduleId: module.id, selector: 'hero-list', - templateUrl: 'app/toh/hero-list.component.html', + templateUrl: 'hero-list.component.html', providers: [ HeroService ] }) // #docregion component 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 8e36da3462..d831e4960d 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 @@ -3,8 +3,9 @@ import { Component } from '@angular/core'; @Component({ + moduleId: module.id, selector: 'structural-directives', - templateUrl: 'app/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/03-06/app/shared/toast/toast.component.ts b/public/docs/_examples/style-guide/ts/03-06/app/shared/toast/toast.component.ts index 24afa50a5b..dd0bba5eba 100644 --- a/public/docs/_examples/style-guide/ts/03-06/app/shared/toast/toast.component.ts +++ b/public/docs/_examples/style-guide/ts/03-06/app/shared/toast/toast.component.ts @@ -3,9 +3,8 @@ import { Component, OnInit } from '@angular/core'; import { ToastService } from './toast.service'; @Component({ - moduleId: module.id, selector: 'toh-toast', - templateUrl: '
toast
' + template: '
toast
' }) export class ToastComponent implements OnInit { constructor(toastService: ToastService) { } diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/toast/toast.component.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/toast/toast.component.ts index 24afa50a5b..dd0bba5eba 100644 --- a/public/docs/_examples/style-guide/ts/04-10/app/shared/toast/toast.component.ts +++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/toast/toast.component.ts @@ -3,9 +3,8 @@ import { Component, OnInit } from '@angular/core'; import { ToastService } from './toast.service'; @Component({ - moduleId: module.id, selector: 'toh-toast', - templateUrl: '
toast
' + template: '
toast
' }) export class ToastComponent implements OnInit { constructor(toastService: ToastService) { } 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 0a3c992498..be8d89aff7 100644 --- a/public/docs/_examples/style-guide/ts/app/app.component.ts +++ b/public/docs/_examples/style-guide/ts/app/app.component.ts @@ -1,7 +1,8 @@ import { Component } from '@angular/core'; @Component({ + moduleId: module.id, selector: 'my-app', - templateUrl: 'app/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 9f64d3c98f..fb128c88d8 100644 --- a/public/docs/_examples/template-syntax/ts/app/app.component.ts +++ b/public/docs/_examples/template-syntax/ts/app/app.component.ts @@ -17,8 +17,9 @@ export enum Color {Red, Green, Blue}; * Giant grab bag of stuff to drive the chapter */ @Component({ + moduleId: module.id, selector: 'my-app', - templateUrl: 'app/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 9b785144ab..42e09d0fe4 100644 --- a/public/docs/_examples/testing/ts/app/app.component.ts +++ b/public/docs/_examples/testing/ts/app/app.component.ts @@ -1,7 +1,8 @@ // #docregion import { Component } from '@angular/core'; @Component({ + moduleId: module.id, selector: 'my-app', - templateUrl: 'app/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 cbe88f55f5..1c9a005b08 100644 --- a/public/docs/_examples/testing/ts/app/bag/bag.ts +++ b/public/docs/_examples/testing/ts/app/bag/bag.ts @@ -272,6 +272,7 @@ export class ExternalTemplateComponent implements OnInit { export class InnerCompWithExternalTemplateComponent { } @Component({ + moduleId: module.id, selector: 'bad-template-comp', templateUrl: 'non-existant.html' }) 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 3d8ee8a177..26daf8bb54 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 @@ -5,9 +5,10 @@ import { Hero } from '../model'; // #docregion component @Component({ + moduleId: module.id, selector: 'dashboard-hero', - templateUrl: 'app/dashboard/dashboard-hero.component.html', - styleUrls: ['app/dashboard/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 bc2b707906..a0f08df120 100644 --- a/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.ts +++ b/public/docs/_examples/testing/ts/app/dashboard/dashboard.component.ts @@ -5,9 +5,10 @@ import { Router } from '@angular/router'; import { Hero, HeroService } from '../model'; @Component({ + moduleId: module.id, selector: 'app-dashboard', - templateUrl: 'app/dashboard/dashboard.component.html', - styleUrls: ['app/dashboard/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 32a59ef2c2..7e8f23bc23 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 @@ -9,9 +9,10 @@ import { HeroDetailService } from './hero-detail.service'; // #docregion prototype @Component({ + moduleId: module.id, selector: 'app-hero-detail', - templateUrl: 'app/hero/hero-detail.component.html', - styleUrls: ['app/hero/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 625c402581..623cbaf5fd 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 @@ -4,9 +4,10 @@ import { Router } from '@angular/router'; import { Hero, HeroService } from '../model'; @Component({ + moduleId: module.id, selector: 'app-heroes', - templateUrl: 'app/hero/hero-list.component.html', - styleUrls: ['app/hero/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/dashboard.component.2.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts index 38decd2b50..4e0e8553bc 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts @@ -7,8 +7,9 @@ import { HeroService } from './hero.service'; // #enddocregion imports @Component({ + moduleId: module.id, selector: 'my-dashboard', - templateUrl: 'app/dashboard.component.html' + templateUrl: 'dashboard.component.html' }) // #docregion component export class DashboardComponent implements OnInit { 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 3deb5bc2ec..61a56463c5 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts @@ -9,12 +9,13 @@ import { Hero } from './hero'; import { HeroService } from './hero.service'; @Component({ + moduleId: module.id, selector: 'my-dashboard', // #docregion templateUrl - templateUrl: 'app/dashboard.component.html', + templateUrl: 'dashboard.component.html', // #enddocregion templateUrl // #docregion css - styleUrls: ['app/dashboard.component.css'] + styleUrls: [ 'dashboard.component.css' ] // #enddocregion css }) // #docregion component 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 5513904452..5b0474f020 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 @@ -7,11 +7,12 @@ import { Hero } from './hero'; import { HeroService } from './hero.service'; @Component({ + moduleId: module.id, selector: 'my-hero-detail', // #docregion templateUrl - templateUrl: 'app/hero-detail.component.html', + templateUrl: 'hero-detail.component.html', // #enddocregion templateUrl, v2 - styleUrls: ['app/hero-detail.component.css'] + styleUrls: [ 'hero-detail.component.css' ] // #docregion v2 }) // #docregion implement 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 da66bfa7af..5fa50a3411 100644 --- a/public/docs/_examples/toh-5/ts/app/heroes.component.ts +++ b/public/docs/_examples/toh-5/ts/app/heroes.component.ts @@ -8,10 +8,11 @@ import { HeroService } from './hero.service'; // #docregion renaming, metadata @Component({ + moduleId: module.id, selector: 'my-heroes', // #enddocregion renaming - templateUrl: 'app/heroes.component.html', - styleUrls: ['app/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/dashboard.component.ts b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts index dd2e2ef2ce..92df6569b1 100644 --- a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts +++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts @@ -6,9 +6,10 @@ import { Hero } from './hero'; import { HeroService } from './hero.service'; @Component({ + moduleId: module.id, selector: 'my-dashboard', - templateUrl: 'app/dashboard.component.html', - styleUrls: ['app/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 87333a9fe3..d13f9cd046 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 @@ -6,9 +6,10 @@ import { Hero } from './hero'; import { HeroService } from './hero.service'; @Component({ + moduleId: module.id, selector: 'my-hero-detail', - templateUrl: 'app/hero-detail.component.html', - styleUrls: ['app/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 384002098d..bcb04ad549 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 @@ -9,9 +9,10 @@ import { HeroSearchService } from './hero-search.service'; import { Hero } from './hero'; @Component({ + moduleId: module.id, selector: 'hero-search', - templateUrl: 'app/hero-search.component.html', - styleUrls: ['app/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 6c0e8f2306..c8ff6973c0 100644 --- a/public/docs/_examples/toh-6/ts/app/heroes.component.ts +++ b/public/docs/_examples/toh-6/ts/app/heroes.component.ts @@ -6,9 +6,10 @@ import { Hero } from './hero'; import { HeroService } from './hero.service'; @Component({ + moduleId: module.id, selector: 'my-heroes', - templateUrl: 'app/heroes.component.html', - styleUrls: ['app/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 bae7fd2ecf..3b3a53176b 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 @@ -8,8 +8,9 @@ import { CheckmarkPipe } from '../core/checkmark/checkmark.pipe'; // #docregion initialclass @Component({ + moduleId: module.id, selector: 'phone-detail', - templateUrl: 'phone-detail/phone-detail.template.html', + templateUrl: 'phone-detail.template.html', // #enddocregion initialclass pipes: [ CheckmarkPipe ] // #docregion initialclass diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts index 5acd35758b..ca365f327f 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts @@ -4,8 +4,9 @@ import { Component } from '@angular/core'; import { Phone, PhoneData } from '../core/phone/phone.service'; @Component({ + moduleId: module.id, selector: 'phone-list', - templateUrl: 'phone-list/phone-list.template.html' + templateUrl: 'phone-list.template.html' }) export class PhoneListComponent { phones: PhoneData[]; 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 36db78632c..7d42e20dee 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 @@ -6,8 +6,9 @@ import { Phone, PhoneData } from '../core/phone/phone.service'; import { CheckmarkPipe } from '../core/checkmark/checkmark.pipe'; @Component({ + moduleId: module.id, selector: 'phone-detail', - templateUrl: 'phone-detail/phone-detail.template.html', + templateUrl: 'phone-detail.template.html', pipes: [ CheckmarkPipe ] }) export class PhoneDetailComponent { 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 352c433838..e97e740415 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 @@ -5,8 +5,9 @@ import { RouterLink } from '@angular/router-deprecated'; import { Phone, PhoneData } from '../core/phone/phone.service'; @Component({ + moduleId: module.id, selector: 'phone-list', - templateUrl: 'phone-list/phone-list.template.html', + templateUrl: 'phone-list.template.html', directives: [ RouterLink ] }) // #enddocregion top 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 35be5f232d..9368e33455 100644 --- a/public/docs/_examples/user-input/ts/app/app.component.ts +++ b/public/docs/_examples/user-input/ts/app/app.component.ts @@ -2,7 +2,8 @@ import { Component } from '@angular/core'; @Component({ + moduleId: module.id, selector: 'my-app', - templateUrl: 'app/app.component.html' + templateUrl: 'app.component.html' }) export class AppComponent { } diff --git a/public/docs/dart/latest/guide/forms.jade b/public/docs/dart/latest/guide/forms.jade index 3eaa3ae40e..f122411f16 100644 --- a/public/docs/dart/latest/guide/forms.jade +++ b/public/docs/dart/latest/guide/forms.jade @@ -166,6 +166,8 @@ figure.image-display 1. The `@Component` selector value of "hero-form" means we can drop this form in a parent template with a `` tag. + 1. The `moduleId` property sets the base for module-relative URLs such as the `templateUrl`. + 1. The `templateUrl` property points to a separate file for template HTML called `hero_form_component.html`. 1. We defined dummy data for `model` and `powers`, as befits a demo. diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json index 87e4619d56..d5c3a60bc4 100644 --- a/public/docs/ts/latest/cookbook/_data.json +++ b/public/docs/ts/latest/cookbook/_data.json @@ -36,13 +36,6 @@ "intro": "Techniques for Dependency Injection" }, - "dynamic-form-deprecated": { - "title": "Dynamic Forms", - "intro": "Render dynamic forms with NgFormModel", - "basics": true, - "hide": true - }, - "dynamic-form": { "title": "Dynamic Forms", "intro": "Render dynamic forms with FormGroup" diff --git a/public/docs/ts/latest/cookbook/dynamic-form-deprecated.jade b/public/docs/ts/latest/cookbook/dynamic-form-deprecated.jade deleted file mode 100644 index 029c7c7743..0000000000 --- a/public/docs/ts/latest/cookbook/dynamic-form-deprecated.jade +++ /dev/null @@ -1,149 +0,0 @@ -include ../_util-fns - -.alert.is-important - :marked - This cookbook is using the deprecated forms API, which is disabled as of RC5, thus this sample only works up to RC4. - - We have created a new version of this cookbook using the new API here. - -:marked - We can't always justify the cost and time to build handcrafted forms, - especially if we'll need a great number of them, they're similar to each other, and they change frequently - to meet rapidly changing business and regulatory requirements. - - It may be more economical to create the forms dynamically, based on metadata that describe the business object model. - - In this cookbook we show how to use `ngFormModel` to dynamically render a simple form with different control types and validation. - It's a primitive start. - It might evolve to support a much richer variety of questions, more graceful rendering, and superior user experience. - All such greatness has humble beginnings. - - In our example we use a dynamic form to build an online application experience for heroes seeking employment. - The agency is constantly tinkering with the application process. - We can create the forms on the fly *without changing our application code*. - - -:marked - ## Table of contents - - [Question Model](#object-model) - - [Form Component](#form-component) - - [Questionnaire Metadata](#questionnaire-metadata) - - [Dynamic Template](#dynamic-template) - -:marked - **See the **. - -.l-main-section - -:marked - ## Question Model - - The first step is to define an object model that can describe all scenarios needed by the form functionality. - The hero application process involves a form with a lot of questions. - The "question" is the most fundamental object in the model. - - We have created `QuestionBase` as the most fundamental question class. - -+makeExample('cb-dynamic-form-deprecated/ts/app/question-base.ts','','app/question-base.ts') - -:marked - From this base we derived two new classes in `TextboxQuestion` and `DropdownQuestion` that represent Textbox and Dropdown questions. - The idea is that the form will be bound to specific question types and render the appropriate controls dynamically. - - `TextboxQuestion` supports multiple html5 types like text, email, url etc via the `type` property. - -+makeExample('cb-dynamic-form-deprecated/ts/app/question-textbox.ts',null,'app/question-textbox.ts')(format='.') - -:marked - `DropdownQuestion` presents a list of choices in a select box. - -+makeExample('cb-dynamic-form-deprecated/ts/app/question-dropdown.ts',null,'app/question-dropdown.ts')(format='.') - -:marked - Next we have defined `QuestionControlService`, a simple service for transforming our questions to an ngForm control group. - In a nutshell, the control group consumes the metadata from the question model and allows us to specify default values and validation rules. - -+makeExample('cb-dynamic-form-deprecated/ts/app/question-control.service.ts',null,'app/question-control.service.ts')(format='.') - - -:marked - ## Question form components - Now that we have defined the complete model we are ready to create components to represent the dynamic form. - -:marked - `DynamicFormComponent` is the entry point and the main container for the form. -+makeTabs( - `cb-dynamic-form-deprecated/ts/app/dynamic-form.component.html, - cb-dynamic-form-deprecated/ts/app/dynamic-form.component.ts`, - null, - `dynamic-form.component.html, - dynamic-form.component.ts` -) -:marked - It presents a list of questions, each question bound to a `` component element. - The `` tag matches the `DynamicFormQuestionComponent`, - the component responsible for rendering the details of each _individual_ question based on values in the data-bound question object. - -+makeTabs( - `cb-dynamic-form-deprecated/ts/app/dynamic-form-question.component.html, - cb-dynamic-form-deprecated/ts/app/dynamic-form-question.component.ts`, - null, - `dynamic-form-question.component.html, - dynamic-form-question.component.ts` -) -:marked - Notice this component can present any type of question in our model. - We only have two types of questions at this point but we can imagine many more. - The `ngSwitch` determines which type of question to display. - - In both components we're relying on Angular's **ngFormModel** to connect the template HTML to the - underlying control objects, populated from the question model with display and validation rules. - - -:marked - ## Questionnaire data -:marked - `DynamicFormComponent` expects the list of questions in the form of an array bound to `@Input() questions`. - - The set of questions we have defined for the job application is returned from the `QuestionService`. - In a real app we'd retrieve these questions from storage. - - The key point is that we control the hero job application questions entirely through the objects returned from `QuestionService`. - Questionnaire maintenance is a simple matter of adding, updating, and removing objects from the `questions` array. - -+makeExample('cb-dynamic-form-deprecated/ts/app/question.service.ts','','app/question.service.ts') - -:marked - Finally, we display an instance of the form in the `AppComponent` shell. - -+makeExample('cb-dynamic-form-deprecated/ts/app/app.component.ts','','app.component.ts') - - -:marked - ## Dynamic Template - Although in this example we're modelling a job application for heroes, there are no references to any specific hero question - outside the objects returned by `QuestionService`. - - This is very important since it allows us to repurpose the components for any type of survey - as long as it's compatible with our *question* object model. - The key is the dynamic data binding of metadata used to render the form - without making any hardcoded assumptions about specific questions. - In addition to control metadata, we are also adding validation dynamically. - - The *Save* button is disabled until the form is in a valid state. - When the form is valid, we can click *Save* and the app renders the current form values as JSON. - This proves that any user input is bound back to the data model. - Saving and retrieving the data is an exercise for another time. - -:marked - The final form looks like this: -figure.image-display - img(src="/resources/images/cookbooks/dynamic-form/dynamic-form.png" alt="Dynamic-Form") - - -:marked - [Back to top](#top) diff --git a/public/docs/ts/latest/guide/architecture.jade b/public/docs/ts/latest/guide/architecture.jade index b161aced7d..1d15deffd1 100644 --- a/public/docs/ts/latest/guide/architecture.jade +++ b/public/docs/ts/latest/guide/architecture.jade @@ -252,12 +252,14 @@ block ts-decorator Here are a few of the possible `@Component` configuration options: :marked + - `moduleId: module.id`: sets the base for module-relative loading of the `templateUrl`. + - `selector`: CSS selector that tells Angular to create and insert an instance of this component where it finds a `` tag in *parent* HTML. For example, if an app's HTML contains ``, then Angular inserts an instance of the `HeroListComponent` view between those tags. - - `templateUrl`: address of this component's HTML template, shown [above](#templates). + - `templateUrl`: module-relative address of this component's HTML template, shown [above](#templates). - `directives`: !{_array} of the components or directives that *this* template requires. In the last line of `hero-list.component.html`, Angular inserts a `HeroDetailComponent` diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade index bbe8b6db3a..d1e746f46b 100644 --- a/public/docs/ts/latest/guide/forms.jade +++ b/public/docs/ts/latest/guide/forms.jade @@ -141,6 +141,8 @@ code-example(format=""). 1. The `@Component` selector value of "hero-form" means we can drop this form in a parent template with a `` tag. + 1. The `moduleId: module.id` property sets the base for module-relative loading of the `templateUrl`. + 1. The `templateUrl` property points to a separate file for the template HTML called `hero-form.component.html`. 1. We defined dummy data for `model` and `powers` as befits a demo. diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index 706f3fe790..9e5e914a59 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/public/docs/ts/latest/tutorial/toh-pt5.jade @@ -370,15 +370,9 @@ block redirect-vs-use-as-default Replace the `template` metadata with a `templateUrl` property that points to a new template file. -+makeExcerpt('app/dashboard.component.ts', 'templateUrl') + Set the `moduleId` property to `module.id` for module-relative loading of the `templateUrl`. -.l-sub-section - block templateUrl-path-resolution - :marked - We specify the path _all the way back to the application root_ — - `app/` in this case — - because Angular doesn't support relative paths _by default_. - We _can_ switch to [component-relative paths](../cookbook/component-relative-paths.html) if we prefer. ++makeExcerpt('app/dashboard.component.ts', 'templateUrl') :marked Create that file with this content: @@ -718,13 +712,12 @@ figure.image-display 1. *Cut-and-paste* the template contents into a new heroes.component.html file. 1. *Cut-and-paste* the styles contents into a new heroes.component.css file. 1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files. + 1. *Set* the `moduleId` property to `module.id` so that 'templateUrl` and `styleUrls` are relative to the component. .l-sub-section :marked The `styleUrls` property is !{_an} !{_array} of style file names (with paths). We could list multiple style files from different locations if we needed them. - As with `templateUrl`, we must specify the path _all the way - back to the application root_. block heroes-component-cleanup //- Only relevant for Dart.