Re-arrange components/files structure and Update README

README.md

@@ -1,14 +1,20 @@
-## angular2-seed
+# angular2-seed
 
 A simple starter project demonstrating the basic concepts of Angular 2.
 
+## Getting Started
+
+### Prerequisites
+
+- Make sure you have installed [node.js](https://nodejs.org/) (Version 5+)
+- Make sure you have installed NPM (Version 3+)
 
 ### Usage
-- Clone or fork this repository
-- Make sure you have [node.js](https://nodejs.org/) installed version 5+
-- Make sure you have NPM installed version 3+
-- `WINDOWS ONLY` run `npm install -g webpack webpack-dev-server typescript` to install global dependencies
-- run `npm install` to install dependencies
-- run `npm start` to fire up dev server
-- open browser to [`http://localhost:3000`](http://localhost:3000)
-- if you want to use other port, open `package.json` file, then change port in `--port 3000` script
+
+- Clone this repository
+- Change into the clonned directory and run `npm install`
+- (Windows Only) Run `npm install -g webpack webpack-dev-server typescript` to install global dependencies
+- Run `npm start` to fire up dev server
+- Open web browser to [`http://localhost:3000`](http://localhost:3000)
+
+> If you want to use a different PORT, open `package.json` file, then change port in `--port 3000` script

src/app/app.routes.ts

@@ -1,11 +1,11 @@
 import { Routes } from '@angular/router';
 
-import { AboutComponent } from './about/about.component';
-import { HomeComponent } from './home/home.component';
-import { RepoBrowserComponent } from './github/repo-browser/repo-browser.component';
-import { RepoListComponent } from './github/repo-list/repo-list.component';
-import { RepoDetailComponent } from './github/repo-detail/repo-detail.component';
-import { ContactComponent } from './contact/contact.component';
+import { AboutComponent } from './components/about';
+import { HomeComponent } from './components/home';
+import { RepoBrowserComponent } from './components/github/repo-browser';
+import { RepoListComponent } from './components/github/repo-list';
+import { RepoDetailComponent } from './components/github/repo-detail';
+import { ContactComponent } from './components/contact';
 
 export const rootRouterConfig: Routes = [
   { path: '', redirectTo: 'home', pathMatch: 'full' },

src/app/components/about/index.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'about',
+  styleUrls: ['./styles.css'],
+  templateUrl: './template.html'
+})
+export class AboutComponent {}

src/app/components/app/index.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app',
+  templateUrl: './template.html',
+})
+export class AppComponent {}

src/app/contact/contact.component.ts → src/app/components/contact/index.ts

@@ -1,11 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import CustomValidators from '../forms/CustomValidators';
+import CustomValidators from '../../utils/forms/custom-validators';
 
 @Component({
   selector: 'app-contact',
-  templateUrl: './contact.component.html',
-  styleUrls: ['./contact-component.css']
+  templateUrl: './template.html',
+  styleUrls: ['./styles.css']
 })
 export class ContactComponent implements OnInit {
   contactForm: FormGroup;

src/app/github/repo-browser/repo-browser.component.ts → src/app/components/github/repo-browser/index.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { GithubService } from '../shared/github.service';
+import { GithubService } from '../../../services/github';
 
 @Component({
   selector: 'repo-browser',
-  templateUrl: './repo-browser.component.html',
-  styleUrls: ['./repo-browser.component.css']
+  templateUrl: './template.html',
+  styleUrls: ['./styles.css']
 })
 export class RepoBrowserComponent {
 

src/app/github/repo-detail/repo-detail.component.ts → src/app/components/github/repo-detail/index.ts

@@ -1,11 +1,11 @@
-import {Component, OnInit} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
-import {GithubService} from '../shared/github.service';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { GithubService } from '../../../services/github';
 
 @Component({
   selector: 'repo-detail',
-  styleUrls: ['./repo-detail.component.css'],
-  templateUrl: './repo-detail.component.html'
+  styleUrls: ['./styles.css'],
+  templateUrl: './template.html'
 })
 export class RepoDetailComponent implements OnInit {
   private org:string;

src/app/github/repo-list/repo-list.component.ts → src/app/components/github/repo-list/index.ts

@@ -1,12 +1,12 @@
-import {Component, OnInit} from '@angular/core';
-import {GithubService} from '../shared/github.service';
-import {Observable} from 'rxjs/Observable';
-import {ActivatedRoute} from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { GithubService } from '../../../services/github';
 
 @Component({
   selector: 'repo-list',
-  styleUrls: ['./repo-list.component.css'],
-  templateUrl: './repo-list.component.html',
+  styleUrls: ['./styles.css'],
+  templateUrl: './template.html',
 })
 export class RepoListComponent implements OnInit {
   org: string;

src/app/components/home/index.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'home',
+  styleUrls: ['./styles.css'],
+  templateUrl: './template.html'
+})
+export class HomeComponent {}

src/app/app.module.ts → src/app/modules/bootstrap.ts

@@ -1,19 +1,19 @@
 import { NgModule } from '@angular/core'
 import { RouterModule } from '@angular/router';
-import { rootRouterConfig } from './app.routes';
-import { AppComponent } from './app.component';
-import { GithubService } from './github/shared/github.service';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpModule } from '@angular/http';
-
-import { AboutComponent } from './about/about.component';
-import { HomeComponent } from './home/home.component';
-import { RepoBrowserComponent } from './github/repo-browser/repo-browser.component';
-import { RepoListComponent } from './github/repo-list/repo-list.component';
-import { RepoDetailComponent } from './github/repo-detail/repo-detail.component';
 import { LocationStrategy, HashLocationStrategy } from '@angular/common';
-import { ContactComponent } from './contact/contact.component';
+
+import { rootRouterConfig } from '../app.routes';
+import { GithubService } from '../services/github';
+import { AppComponent } from '../components/app';
+import { AboutComponent } from '../components/about';
+import { HomeComponent } from '../components/home';
+import { RepoBrowserComponent } from '../components/github/repo-browser';
+import { RepoListComponent } from '../components/github/repo-list';
+import { RepoDetailComponent } from '../components/github/repo-detail';
+import { ContactComponent } from '../components/contact';
 
 @NgModule({
   declarations: [
@@ -37,6 +37,4 @@ import { ContactComponent } from './contact/contact.component';
   ],
   bootstrap: [ AppComponent ]
 })
-export class AppModule {
-
-}
+export class AppModule {}

src/main.browser.ts

@@ -1,7 +1,7 @@
 import './polyfills.browser';
 
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
+import { AppModule } from './app/modules/bootstrap';
 
 export const platformRef = platformBrowserDynamic();