Adjustments to the Angular 2 Style Guide (PatrickJS#1091)

* Component class names follow the style guide
* Filenames of services, components, and directives follow the style guide

Author: dherges

src/app/+detail/detail.component.ts

@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
     <router-outlet></router-outlet>
   `
 })
-export class Detail {
+export class DetailComponent {
   constructor() {
 
   }

src/app/+detail/index.ts

@@ -3,18 +3,18 @@ import { FormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { Detail } from './detail.component';
+import { DetailComponent } from './detail.component';
 
 console.log('`Detail` bundle loaded asynchronously');
 // async components must be named routes for WebpackAsyncRoute
 export const routes = [
-  { path: '', component: Detail, pathMatch: 'full' }
+  { path: '', component: DetailComponent, pathMatch: 'full' }
 ];
 
 @NgModule({
   declarations: [
     // Components / Directives/ Pipes
-    Detail
+    DetailComponent
   ],
   imports: [
     CommonModule,

src/app/about/about.spec.ts renamed to src/app/about/about.component.spec.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 import { inject, TestBed } from '@angular/core/testing';
 
 // Load the implementations that should be tested
-import { About } from './about.component';
+import { AboutComponent } from './about.component';
 
 describe('About', () => {
   // provide our implementations or mocks to the dependency injector
@@ -20,11 +20,11 @@ describe('About', () => {
           }
         }
       },
-      About
+      AboutComponent
     ]
   }));
 
-  it('should log ngOnInit', inject([About], (about: About) => {
+  it('should log ngOnInit', inject([AboutComponent], (about: AboutComponent) => {
     spyOn(console, 'log');
     expect(console.log).not.toHaveBeenCalled();
 

src/app/about/about.component.ts

@@ -26,7 +26,7 @@ console.log('`About` component loaded asynchronously');
     <pre>this.localState = {{ localState | json }}</pre>
   `
 })
-export class About {
+export class AboutComponent {
   localState: any;
   constructor(public route: ActivatedRoute) {
 

src/app/app.spec.ts renamed to src/app/app.component.spec.ts

@@ -4,18 +4,18 @@ import {
 } from '@angular/core/testing';
 
 // Load the implementations that should be tested
-import { App } from './app.component';
+import { AppComponent } from './app.component';
 import { AppState } from './app.service';
 
 describe('App', () => {
   // provide our implementations or mocks to the dependency injector
   beforeEach(() => TestBed.configureTestingModule({
     providers: [
       AppState,
-      App
+      AppComponent
     ]}));
 
-  it('should have a url', inject([ App ], (app: App) => {
+  it('should have a url', inject([ AppComponent ], (app: AppComponent) => {
     expect(app.url).toEqual('https://twitter.com/AngularClass');
   }));
 

src/app/app.component.ts

@@ -58,7 +58,7 @@ import { AppState } from './app.service';
     </footer>
   `
 })
-export class App {
+export class AppComponent {
   angularclassLogo = 'assets/img/angularclass-avatar.png';
   name = 'Angular 2 Webpack Starter';
   url = 'https://twitter.com/AngularClass';

src/app/app.module.ts

@@ -11,12 +11,12 @@ import { removeNgStyles, createNewHosts, createInputTransfer } from '@angularcla
 import { ENV_PROVIDERS } from './environment';
 import { ROUTES } from './app.routes';
 // App is our top level component
-import { App } from './app.component';
+import { AppComponent } from './app.component';
 import { APP_RESOLVER_PROVIDERS } from './app.resolver';
 import { AppState, InternalStateType } from './app.service';
-import { Home } from './home';
-import { About } from './about';
-import { NoContent } from './no-content';
+import { HomeComponent } from './home';
+import { AboutComponent } from './about';
+import { NoContentComponent } from './no-content';
 import { XLarge } from './home/x-large';
 
 // Application wide providers
@@ -35,12 +35,12 @@ type StoreType = {
  * `AppModule` is the main entry point into Angular2's bootstraping process
  */
 @NgModule({
-  bootstrap: [ App ],
+  bootstrap: [ AppComponent ],
   declarations: [
-    App,
-    About,
-    Home,
-    NoContent,
+    AppComponent,
+    AboutComponent,
+    HomeComponent,
+    NoContentComponent,
     XLarge
   ],
   imports: [ // import Angular's modules

src/app/app.routes.ts

@@ -1,17 +1,17 @@
 import { Routes, RouterModule } from '@angular/router';
-import { Home } from './home';
-import { About } from './about';
-import { NoContent } from './no-content';
+import { HomeComponent } from './home';
+import { AboutComponent } from './about';
+import { NoContentComponent } from './no-content';
 
 import { DataResolver } from './app.resolver';
 
 
 export const ROUTES: Routes = [
-  { path: '',      component: Home },
-  { path: 'home',  component: Home },
-  { path: 'about', component: About },
+  { path: '',      component: HomeComponent },
+  { path: 'home',  component: HomeComponent },
+  { path: 'about', component: AboutComponent },
   {
     path: 'detail', loadChildren: () => System.import('./+detail')
   },
-  { path: '**',    component: NoContent },
+  { path: '**',    component: NoContentComponent },
 ];

src/app/home/home.spec.ts renamed to src/app/home/home.component.spec.ts

@@ -12,7 +12,7 @@ import { MockBackend } from '@angular/http/testing';
 
 // Load the implementations that should be tested
 import { AppState } from '../app.service';
-import { Home } from './home.component';
+import { HomeComponent } from './home.component';
 import { Title } from './title';
 
 describe('Home', () => {
@@ -30,19 +30,19 @@ describe('Home', () => {
       },
       AppState,
       Title,
-      Home
+      HomeComponent
     ]
   }));
 
-  it('should have default data', inject([ Home ], (home: Home) => {
+  it('should have default data', inject([ HomeComponent ], (home: HomeComponent) => {
     expect(home.localState).toEqual({ value: '' });
   }));
 
-  it('should have a title', inject([ Home ], (home: Home) => {
+  it('should have a title', inject([ HomeComponent ], (home: HomeComponent) => {
     expect(!!home.title).toEqual(true);
   }));
 
-  it('should log ngOnInit', inject([ Home ], (home: Home) => {
+  it('should log ngOnInit', inject([ HomeComponent ], (home: HomeComponent) => {
     spyOn(console, 'log');
     expect(console.log).not.toHaveBeenCalled();
 

src/app/home/home.component.ts

@@ -18,7 +18,7 @@ import { XLarge } from './x-large';
   // Every Angular template is first compiled by the browser before Angular runs it's compiler
   templateUrl: './home.component.html'
 })
-export class Home {
+export class HomeComponent {
   // Set our default values
   localState = { value: '' };
   // TypeScript public modifiers

src/app/home/title/title.spec.ts renamed to src/app/home/title/title.service.spec.ts

@@ -1 +1 @@
-export * from './no-content';
+export * from './no-content.component';

src/app/home/x-large/x-large.spec.ts renamed to src/app/home/x-large/x-large.directive.spec.ts

@@ -8,6 +8,6 @@ import { Component } from '@angular/core';
     </div>
   `
 })
-export class NoContent {
+export class NoContentComponent {
 
 }