chore: convert templateUrls to use moduleId where possible. (#2477)

2016-09-25 18:51:54 -07:00
parent 4a6f35f58b
commit 6def9505cc
68 changed files with 118 additions and 526 deletions
@@ -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;
@@ -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
@@ -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 { }
@@ -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 {

@@ -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
@@ -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 { }
@@ -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 {
@@ -1,27 +0,0 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'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 = '[email protected]';
-      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);
-      });
-  });
-
-});
@@ -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: `
-    <div>
-      <h2>Job Application for Heroes</h2>
-      <dynamic-form [questions]="questions"></dynamic-form>
-    </div>
-  `,
-  directives: [DynamicFormComponent],
-  providers:  [QuestionService]
-})
-export class AppComponent {
-  questions: any[];
-
-  constructor(service: QuestionService) {
-    this.questions = service.getQuestions();
-  }
-}
@@ -1,17 +0,0 @@
-<!-- #docregion -->
-<div [ngFormModel]="form">
-  <label [attr.for]="question.key">{{question.label}}</label>
-
-  <div [ngSwitch]="question.controlType">
-
-    <input *ngSwitchCase="'textbox'" [ngControl]="question.key"
-            [id]="question.key" [type]="question.type">
-
-    <select [id]="question.key" *ngSwitchCase="'dropdown'" [ngControl]="question.key">
-      <option *ngFor="let opt of question.options" [value]="opt.key">{{opt.value}}</option>
-    </select>
-
-  </div>
-
-  <div class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div>
-</div>
@@ -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<any>;
-  @Input() form: ControlGroup;
-  get isValid() { return this.form.controls[this.question.key].valid; }
-}
@@ -1,17 +0,0 @@
-<!-- #docregion -->
-<div>
-  <form (ngSubmit)="onSubmit()" [ngFormModel]="form">
-
-    <div *ngFor="let question of questions" class="form-row">
-      <df-question [question]="question" [form]="form"></df-question>
-    </div>
-
-    <div class="form-row">
-      <button type="submit" [disabled]="!form.valid">Save</button>
-    </div>
-  </form>
-
-  <div *ngIf="payLoad" class="form-row">
-    <strong>Saved the following values</strong><br>{{payLoad}}
-  </div>
-</div>
@@ -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<any>[] = [];
-  form: ControlGroup;
-  payLoad = '';
-
-  constructor(private qcs: QuestionControlService) {  }
-
-  ngOnInit() {
-    this.form = this.qcs.toControlGroup(this.questions);
-  }
-
-  onSubmit() {
-    this.payLoad = JSON.stringify(this.form.value);
-  }
-}
@@ -1,5 +0,0 @@
-import { bootstrap }    from '@angular/platform-browser-dynamic';
-
-import { AppComponent } from './app.component';
-
-bootstrap(AppComponent, []);
@@ -1,25 +0,0 @@
-// #docregion
-export class QuestionBase<T>{
-  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 || '';
-  }
-}
@@ -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<any>[] ) {
-    let group = {};
-
-    questions.forEach(question => {
-      group[question.key] = question.required ? [question.value || '', Validators.required] : [question.value || ''];
-    });
-    return this.fb.group(group);
-  }
-}
@@ -1,12 +0,0 @@
-// #docregion
-import { QuestionBase } from './question-base';
-
-export class DropdownQuestion extends QuestionBase<string> {
-  controlType = 'dropdown';
-  options: {key: string, value: string}[] = [];
-
-  constructor(options: {} = {}) {
-    super(options);
-    this.options = options['options'] || [];
-  }
-}
@@ -1,12 +0,0 @@
-// #docregion
-import { QuestionBase } from './question-base';
-
-export class TextboxQuestion extends QuestionBase<string> {
-  controlType = 'textbox';
-  type: string;
-
-  constructor(options: {} = {}) {
-    super(options);
-    this.type = options['type'] || '';
-  }
-}
@@ -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<any>[] = [
-
-      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);
-  }
-}
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <base href="/">
-    <title>Dynamic Form</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!-- #docregion style -->
-    <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="sample.css">
-    <!-- #enddocregion style -->
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-      System.import('app').catch(function(err){ console.error(err); });
-    </script>
-  </head>
-  <body>
-    <my-app>Loading app...</my-app>
-  </body>
-
-</html>
@@ -1,9 +0,0 @@
-{
-  "description": "Dynamic Form Deprecated",
-  "files":[
-    "!**/*.d.ts",  
-    "!**/*.js",
-    "!**/*.[1].*"
-  ],
-  "tags":["cookbook"]
-}
@@ -1,7 +0,0 @@
-.errorMessage{
-  color:red;
-}
-
-.form-row{
-  margin-top: 10px;
-}
@@ -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<any>;
@@ -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 {
@@ -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 {

@@ -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 {

@@ -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 { }
@@ -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 {
@@ -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 {
--- a/Show More
+++ b/Show More