Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/app/app.component.ts

Author: Ismaestro

README.md

@@ -1,9 +1,26 @@
-# Getting Started
+# Sample App with Angular 2 + Typescript + Angular CLI + Bootstrap 4
 
-Angular 2 App that follows Best Practices from the official style guide
+Sample app made with :heart:
 
-## Run and go
-```
-npm install
-npm start
-```
+### Demo
+
+![angular-2-sample-project](http://i65.tinypic.com/1jqhx2.jpg)
+
+## Based on
+Angular 2, Bootstrap 4, Angular CLI and more plugins like ng2 translate
+
+## How can I support developers?
+- Star the GitHub repo :star:
+- Create pull requests, submit bugs, suggest new features or documentation updates :wrench:
+
+## Features
+* TypeScript
+* Webpack
+* Responsive layout
+* Bootstrap 4 CSS Framework
+* Sass
+* Angular 2
+* jQuery
+
+Enjoy :metal:
+I'm always happy to hear your feedback!

package.json

@@ -26,6 +26,7 @@
     "core-js": "^2.4.1",
     "font-awesome": "^4.7.0",
     "json-server": "^0.9.4",
+    "ng2-translate": "^5.0.0",
     "rxjs": "^5.0.1",
     "ts-helpers": "^1.1.1",
     "zone.js": "^0.7.2"

src/app/app.component.html

@@ -1,2 +1,5 @@
-<toh-nav [title]="'Tour of heroes'"></toh-nav>
-<router-outlet></router-outlet>
+<div class="container main-container">
+    <toh-nav [title]="'tourOfHeroes' | translate"></toh-nav>
+    <router-outlet></router-outlet>
+</div>
+<toh-footer></toh-footer>

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {TranslateService}  from 'ng2-translate';
 import {Title} from '@angular/platform-browser';
 
 import {environment} from '../environments/environment';
@@ -9,9 +10,14 @@ import {environment} from '../environments/environment';
 })
 
 export class AppComponent {
-  title: string;
+  private translateService: TranslateService;
 
-  constructor(private titleService: Title) {
+  constructor(translateService: TranslateService,
+              private titleService: Title) {
     titleService.setTitle(environment.title);
+
+    this.translateService = translateService;
+    this.translateService.setDefaultLang('en');
+    this.translateService.use('en');
   }
 }

src/app/app.module.ts

@@ -1,7 +1,9 @@
-import {NgModule}      from '@angular/core';
-import {BrowserModule} from '@angular/platform-browser';
-import {FormsModule}   from '@angular/forms';
-import {HttpModule}    from '@angular/http';
+import {NgModule}                         from '@angular/core';
+import {BrowserModule}                    from '@angular/platform-browser';
+import {FormsModule}                      from '@angular/forms';
+import {Http, HttpModule}                 from '@angular/http';
+import {TranslateModule, TranslateLoader} from 'ng2-translate';
+import {TranslateLoaderFactory}           from './app.translate.factory';
 
 import {APP_CONFIG, AppConfig} from './config/app.config';
 
@@ -18,6 +20,11 @@ import {HeroTopComponent} from './heroes/hero-top/hero-top.component';
     BrowserModule,
     FormsModule,
     HttpModule,
+    TranslateModule.forRoot({
+      provide: TranslateLoader,
+      useFactory: TranslateLoaderFactory,
+      deps: [Http]
+    }),
     AppRoutingModule,
     CoreModule,
     HeroesModule,

src/app/app.translate.factory.ts

@@ -0,0 +1,5 @@
+import {TranslateStaticLoader} from 'ng2-translate';
+
+export function TranslateLoaderFactory(http: any) {
+  return new TranslateStaticLoader(http, '/assets/i18n', '.json');
+}

src/app/core/core.module.ts

@@ -1,27 +1,39 @@
-import {NgModule, Optional, SkipSelf} from '@angular/core';
-import {CommonModule}                 from '@angular/common';
-import {FormsModule}                  from '@angular/forms';
+import {NgModule, Optional, SkipSelf}     from '@angular/core';
+import {CommonModule}                     from '@angular/common';
+import {FormsModule}                      from '@angular/forms';
+import {Http}                             from '@angular/http';
+import {TranslateModule, TranslateLoader} from 'ng2-translate';
+import {TranslateLoaderFactory}           from '../app.translate.factory';
 
 import {throwIfAlreadyLoaded} from './module-import-guard';
 import {LoggerService}        from './logger.service';
 
 import {HeroesModule}      from '../heroes/heroes.module';
 import {HeroRoutingModule} from '../heroes/heroes-routing.module';
 
-import {NavComponent} from './nav/nav.component';
+import {NavComponent}    from './nav/nav.component';
+import {FooterComponent} from "./footer/footer.component";
+
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     HeroRoutingModule,
-    HeroesModule
+    HeroesModule,
+    TranslateModule.forRoot({
+      provide: TranslateLoader,
+      useFactory: TranslateLoaderFactory,
+      deps: [Http]
+    }),
   ],
   exports: [
-    NavComponent
+    NavComponent,
+    FooterComponent
   ],
   declarations: [
-    NavComponent
+    NavComponent,
+    FooterComponent
   ],
   providers: [
     LoggerService

src/app/core/footer/footer.component.html

@@ -0,0 +1,5 @@
+<footer>
+    <div class="container center">
+        <span class="text-muted">{{ 'tourOfHeroes' | translate }} @2016.</span>
+    </div>
+</footer>

src/app/core/footer/footer.component.scss

@@ -0,0 +1,13 @@
+:host(toh-footer) {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  background-color: #f5f5f5;
+  padding: 0 6em 0 6em;
+
+  .container {
+    padding: 0;
+  }
+}

src/app/core/footer/footer.component.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'toh-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
+})
+
+export class FooterComponent {
+}