feat(style): added bootstrap and font awesome

Author: Ismaestro

angular-cli.json

@@ -18,17 +18,25 @@
       "prefix": "toh",
       "mobile": false,
       "styles": [
+        "../node_modules/bootstrap/dist/css/bootstrap.css",
+        "../node_modules/font-awesome/css/font-awesome.css",
         "assets/css/styles.css"
       ],
-      "scripts": [],
+      "scripts": [
+        "../node_modules/jquery/dist/jquery.js",
+        "../node_modules/tether/dist/js/tether.js",
+        "../node_modules/bootstrap/dist/js/bootstrap.js"
+      ],
       "environments": {
         "source": "environments/environment.ts",
         "dev": "environments/environment.ts",
         "prod": "environments/environment.prod.ts"
       }
     }
   ],
-  "addons": [],
+  "addons": [
+    "../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"
+  ],
   "packages": [],
   "e2e": {
     "protractor": {

e2e/app.e2e-spec.ts

@@ -9,6 +9,6 @@ describe('angular-hero-cli App', function () {
 
   it('Title', () => {
     page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Tour of Heroes');
+    expect(page.getParagraphText()).toEqual('Top Heroes');
   });
 });

e2e/app.po.ts

@@ -6,6 +6,6 @@ export class AngularTOHPage {
   }
 
   getParagraphText() {
-    return element(by.css('toh-app > h1')).getText();
+    return element(by.css('toh-hero-top h3')).getText();
   }
 }

package.json

@@ -22,7 +22,9 @@
     "@angular/platform-browser": "^2.3.1",
     "@angular/platform-browser-dynamic": "^2.3.1",
     "@angular/router": "^3.3.1",
+    "bootstrap": "^4.0.0-alpha.6",
     "core-js": "^2.4.1",
+    "font-awesome": "^4.7.0",
     "json-server": "^0.9.4",
     "rxjs": "^5.0.1",
     "ts-helpers": "^1.1.1",

protractor.conf.js

@@ -13,7 +13,7 @@ exports.config = {
     'browserName': 'chrome'
   },
   directConnect: true,
-  baseUrl: 'http://localhost:3002/',
+  baseUrl: 'http://localhost:4200/',
   framework: 'jasmine',
   jasmineNodeOpts: {
     showColors: true,

server/db.json

@@ -18,12 +18,6 @@
       "power": "Weather Changer",
       "alterEgo": "bombi"
     },
-    {
-      "id": 14,
-      "name": "Celeritas",
-      "power": "Super Hot",
-      "alterEgo": "cele"
-    },
     {
       "id": 15,
       "name": "Magneta",
@@ -47,12 +41,6 @@
       "name": "Magma",
       "power": "Super Flexible",
       "alterEgo": "cold"
-    },
-    {
-      "id": 20,
-      "name": "Tornado",
-      "power": "Really Smart",
-      "alterEgo": "torny"
     }
   ]
 }

src/app/app.component.html

@@ -1,3 +1,2 @@
-<h1>{{title}}</h1>
-<toh-nav></toh-nav>
+<toh-nav [title]="'Tour of heroes'"></toh-nav>
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -5,8 +5,7 @@ import {IAppConfig} from './config/iapp.config';
 
 @Component({
   selector: 'toh-app',
-  templateUrl: './app.component.html',
-  styleUrls: [],
+  templateUrl: './app.component.html'
 })
 
 export class AppComponent {