Skip to content

task#20 add application layout

Jump to bottom
bacn edited this page Sep 16, 2020 · 1 revision

Create a page layout with a home page and a menu

  • Install jQuery with Popper.js (done in task#08)
  • Update the polyfills.ts for browser compatiblity (done in task#00)
  • Create a home component
  • Create a menu

Result

Start the test-auction-api server in a second console with $ test-auction-api if not yet running.

Compile and start the application with

$ ng serve

Open project in browser

  • Open your browser with the address http://localhost:4200/
  • Click in the menu to home and auctions
  • You should see a page like the following illustration.

auction-detail-view-02.png

Hints

We have installed bootstrap alread in task#08. If you have not done it, you should do it now. How ever, we need to install jQuery and Popper.js.

1) install bootstrap using npm

npm install bootstrap --save

After the installation of Bootstrap 4, we need two more javascript packages: that is jQuery and Popper.js. Without these two package bootstrap is not completly working.

2) Install jQuery

npm install jquery@^3.5.1 --save

3) Install Popper.js

npm install popper.js@^1.16.1 --save

Now Bootstrap is installed on you project directory inside node_modules folder

4) Add libraries to angular.json

Open angular.json this file is available in you angular directory. Open that file and add the path of bootstrap, jquery, and popper.js files inside styles[] and scripts[] path. See the below example:

  "scripts": [

    "./node_modules/jquery/dist/jquery.min.js",
    "./node_modules/bootstrap/dist/js/bootstrap.min.js",
    "./node_modules/popper.js/dist/umd/popper.min.js"
  ],

Note: Don't change a sequence of js file it should be like this

The Bootstrap css framework should working fine now

5) Update polyfills.ts (already done in task#00)

We want to support a number of browsers. We need to install some libraries and import them into the file polyfills.ts.

npm install --save classlist.js
npm install --save web-animations-js

Open the file polyfills.ts and uncomment the imports.

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/guide/browser-support
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 */
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 * because those flags need to be set before `zone.js` being loaded, and webpack
 * will put import in the top of bundle, so user need to create a separate file
 * in this directory (for example: zone-flags.ts), and put the following flags
 * into that file, and then add the following code before importing zone.js.
 * import './zone-flags.ts';
 *
 * The flags allowed in zone-flags.ts are listed here.
 *
 * The following flags will work for all browsers.
 *
 * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 *
 *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 *  with the following flag, it will bypass `zone.js` patch for IE/Edge
 *
 *  (window as any).__Zone_enable_cross_context_check = true;
 *
 */

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.


/***************************************************************************************************
 * APPLICATION IMPORTS
 */

6) Generate a home component

The home page is the default page of the application. Lets generate a new component home:

ng generate component home

Put some HTML to the home.component.html.

<div class="jumbotron">

  <h1>Welcome to Auction App</h1>

  <p>Tutorial for Angular 7 frontend.</p>
  <a class="btn btn-lg btn-primary" routerLink="." role="button">New User? Get started: sign-up</a>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm">
      <div class="row justify-content-center">Box with hover effect</div>
      <div class="row justify-content-center">
        <div class="box boxsh"></div>
      </div>
    </div>
    <div class="col-sm">
      <div class="row justify-content-center">Box with hover effect</div>
      <div class="row justify-content-center">
        <div class="box boxsh"></div>
      </div>
    </div>
    <div class="col-sm">
      <div class="row justify-content-center">Box with hover effect</div>
      <div class="row justify-content-center">
        <div class="box boxsh"></div>
      </div>
    </div>
    <div class="col-sm">
      <div class="row justify-content-center">Box with hover effect</div>
      <div class="row justify-content-center">
        <div class="box boxsh"></div>
      </div>
    </div>
  </div>
</div>

home.component.sccs.

$dark1: #000000;
$dark2: #212121;
$dark3: #303030;
$bg4: #929292;

.row {
  margin: 0.5rem;
}

.box {
  background: $bg4;
  border-radius: 0.3rem;
  height: 10rem;
  width: 10rem;
}

.card {
  background: $bg4;
  border: 0px;
  border-radius: 0.3rem;
  width: 100%;
}

.boxsh {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.boxsh:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

7) Update the app-routing.modules.ts

We need to update the routes with the new home component:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {AuctionListComponent} from './auction-list/auction-list.component';
import {AuctionDetailComponent} from './auction-detail/auction-detail.component';
import {HomeComponent} from './home/home.component';

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'auctions',
    component: AuctionListComponent
  },
  {
    path: 'auctions/:id',
    component: AuctionDetailComponent
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: '/home'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

7) Create a menu component

The bootstrap navbar allows us to produce easiliy a collapsible menu.

ng generate component nav-bar

The HTML part of the menu:

<nav class="navbar navbar-expand-md navbar-dark bg-primary mb-4">
    <a href="/" class="navbar-brand">ZHAW ASE</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#auctionNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse justify-content-stretch" id="auctionNavbar">
        <ul class="navbar-nav">
            <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
                <a class="nav-link" routerLink="home"><i class="fa fa-fw fa-home"></i> Home </a>
            </li>
            <li class="nav-item -5" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
                <a class="nav-link" routerLink="auctions"><i class="fa fa-gavel"></i> Auctions</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="fa fa-fw fa-user-plus"></i> Sign-up</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"> <i class="fa fa-fw fa-sign-in"></i> Login</a>
            </li>
        </ul>
    </div>
</nav>

nav-bar.component.sccs.

.abs-center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.navbar-nav > li {
  float: left;
  position: relative;
}


.navbar-nav li {
  box-sizing: border-box;
  height: 30px;
  border-left: 1px solid #007bff;
  a:hover { background-color: #338bff !important; }

}

8) Insert the Navbar to the app.component.html

We need to insert the navbar to our main container:

<!--<button class="btn btn-primary">Test Button</button>
<p>
  {{title}} works!
</p> -->

<div class="container">
  <app-nav-bar></app-nav-bar>
  <router-outlet></router-outlet>
</div>


<!--<app-auction-list (titleClicked)="onAuctionListTitleClicked($event)"  [headerTitle]="auctionListTitle"></app-auction-list> -->

Clone this wiki locally