clean ups modules

src/menu/index.ts

@@ -1,19 +1,20 @@
 import * as angular from 'angular';
-import 'angular-route'
+import {NgModule} from '@angular/core';
+import {UpgradeAdapter} from '@angular/upgrade';
+
+import {MenuCmp} from './menu_cmp';
 
 export const MenuModule = angular.module('MenuModule', ['ngRoute']);
 
-MenuModule.component('menu', {
-  template : `
-    <h1>Messages</h1>
-    <ul>
-      <li><a href="#/messages/inbox">Inbox</a></li>
-      <li><a href="#/settings">Settings</a></li>
-    </ul>
-  `
-});
+MenuModule.component('menu', MenuCmp);
 
 MenuModule.config(($routeProvider) => {
-  $routeProvider
-    .when('/',     {template : '<menu></menu>'});
-});
+  $routeProvider.when('/', {template : '<menu></menu>'});
+});
+
+@NgModule({})
+export class MenuNgModule {
+  static setAdapter(adapter: UpgradeAdapter) {
+    //no components are migrated to angular2
+  }
+}

src/menu/menu_cmp.ts

@@ -0,0 +1,9 @@
+export const MenuCmp = {
+  template : `
+    <h1>Messages</h1>
+    <ul>
+      <li><a href="#/messages/inbox">Inbox</a></li>
+      <li><a href="#/settings">Settings</a></li>
+    </ul>
+  `
+};

src/messages/index.ts

@@ -2,77 +2,25 @@ import * as angular from 'angular';
 import {NgModule} from '@angular/core';
 import {UpgradeAdapter} from '@angular/upgrade';
 
-import {Message, Repository} from '../repository';
-import {MessageText} from './message_text';
+import {MessageTextCmp} from './message_text_cmp';
+import {MessagesCmp} from './messages_cmp';
+import {MessageCmp} from './message_cmp';
 
 export const MessagesModule = angular.module('MessagesModule', ['ngRoute']);
 
-
-/** @ngInject */
-export class MessagesComponent {
-  folder: string;
-  messages: Message[];
-
-  constructor($routeParams, repository: Repository) {
-    this.folder = $routeParams.folder;
-    this.messages = repository.messagesFor(this.folder);
-  }
-}
-
-MessagesModule.component('messages', {
-  template : `
-    <h1>Messages</h1>
-    <ul>
-      <li ng-repeat="m in ctrl.messages">
-        {{m.id}} - <a href="#/messages/{{ctrl.folder}}/{{m.id}}">{{m.text}}</a>
-      </li>
-    </ul>
-    <a href="#/settings/pagesize">Change Page Size</a>
-    <a href="#/">Back</a>
-  `,
-  controller : MessagesComponent,
-  controllerAs: 'ctrl'
-});
-
-
-
-/** @ngInject */
-export class MessageComponent {
-  folder: string;
-  id: number;
-  message: Message;
-
-  constructor($routeParams, repository: Repository) {
-    this.folder = $routeParams.folder;
-    this.id = +$routeParams.id;
-    this.message = repository.message(this.id);
-  }
-}
-
-MessagesModule.component('message', {
-  template : `
-    <h1>Message {{ctrl.id}}</h1>
-    <message-text [text]="ctrl.message.text"></message-text>
-    <div>
-      <a href="#/messages/{{ctrl.folder}}">Go to Folder</a>
-    </div>
-  `,
-  controller : MessageComponent,
-  controllerAs: 'ctrl'
-});
-
+MessagesModule.component('messages', MessagesCmp);
+MessagesModule.component('message', MessageCmp);
 
 MessagesModule.config(($routeProvider) => {
   $routeProvider
     .when('/messages/:folder',     {template : '<messages></messages>'})
     .when('/messages/:folder/:id', {template : '<message></message>'});
 });
 
-@NgModule({
-  declarations: [MessageText]
-})
+@NgModule({declarations: [MessageTextCmp]})
 export class MessagesNgModule {
   static setAdapter(adapter: UpgradeAdapter) {
-    MessagesModule.directive('messageText', <any>adapter.downgradeNg2Component(MessageText));
+    // all components migrated to angular 2 can be downgraded here
+    MessagesModule.directive('messageText', <any>adapter.downgradeNg2Component(MessageTextCmp));
   }
 }

src/messages/message_cmp.ts

@@ -0,0 +1,25 @@
+import {Message, Repository} from '../repository';
+
+export class MessageController {
+  folder: string;
+  id: number;
+  message: Message;
+
+  constructor($routeParams, repository: Repository) {
+    this.folder = $routeParams.folder;
+    this.id = +$routeParams.id;
+    this.message = repository.message(this.id);
+  }
+}
+
+export const MessageCmp = {
+  template : `
+    <h1>Message {{ctrl.id}}</h1>
+    <message-text [text]="ctrl.message.text"></message-text>
+    <div>
+      <a href="#/messages/{{ctrl.folder}}">Go to Folder</a>
+    </div>
+  `,
+  controller : MessageController,
+  controllerAs: 'ctrl'
+};

src/messages/message_text.ts → src/messages/message_text_cmp.ts

@@ -6,6 +6,6 @@ import {Component, Input} from '@angular/core';
     <p><b>Text:</b> {{text}}</p>
   `
 })
-export class MessageText {
+export class MessageTextCmp {
   @Input() text: string;
 }

src/messages/messages_cmp.ts

@@ -0,0 +1,26 @@
+import {Message, Repository} from '../repository';
+
+export class MessagesController {
+  folder: string;
+  messages: Message[];
+
+  constructor($routeParams, repository: Repository) {
+    this.folder = $routeParams.folder;
+    this.messages = repository.messagesFor(this.folder);
+  }
+}
+
+export const MessagesCmp = {
+  template : `
+    <h1>Messages</h1>
+    <ul>
+      <li ng-repeat="m in ctrl.messages">
+        {{m.id}} - <a href="#/messages/{{ctrl.folder}}/{{m.id}}">{{m.text}}</a>
+      </li>
+    </ul>
+    <a href="#/settings/pagesize">Change Page Size</a>
+    <a href="#/">Back</a>
+  `,
+  controller : MessagesController,
+  controllerAs: 'ctrl'
+};

src/settings/index.ts

@@ -1,35 +1,9 @@
-import {NgModule, Component} from '@angular/core';
+import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
 import {FormsModule} from '@angular/forms';
-import {Repository} from '../repository'
-
-@Component({
-  selector: 'settings',
-  template: `
-    <h1>Settings</h1>
-    <a routerLink="pagesize">Page Size Settings</a>
-    <a routerLink="../">Back</a>
-  `
-})
-export class SettingsCmp {
-}
-
-@Component({
-  selector: 'page-settings',
-  template: `
-    <h1>Page Size Settings</h1>
-
-    <div *ngFor="let p of repository.folders">
-      Page size for '{{p}}' <input [(ngModel)]="repository.pageSize[p]"> (<a [routerLink]="['/messages', p]">open</a>)
-    </div>
-
-    <a routerLink="../">Back</a>
-  `
-})
-export class PageSizeCmp {
-  constructor(private repository: Repository) {}
-}
+import {SettingsCmp} from './settings_cmp';
+import {PageSizeCmp} from './page_size_cmp';
 
 @NgModule({
   imports: [

src/settings/page_size_cmp.ts

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+import {Repository} from '../repository'
+
+@Component({
+  selector: 'page-settings',
+  template: `
+    <h1>Page Size Settings</h1>
+
+    <div *ngFor="let p of repository.folders">
+      Page size for '{{p}}' <input [(ngModel)]="repository.pageSize[p]"> (<a [routerLink]="['/messages', p]">open</a>)
+    </div>
+
+    <a routerLink="../">Back</a>
+  `
+})
+export class PageSizeCmp {
+  constructor(private repository: Repository) {}
+}

src/settings/settings_cmp.ts

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'settings',
+  template: `
+    <h1>Settings</h1>
+    <a routerLink="pagesize">Page Size Settings</a>
+    <a routerLink="../">Back</a>
+  `
+})
+export class SettingsCmp {
+}