3.2 Setup

Most people like explanations in the context of doing what is just being explained. So let's do something very simple as the first step in showing how to use Materialize bridge. We will add several interesting pages rendering Materialize controls to the well known Aurelia Skeleton Navigation, a starter kit for building a standard navigation-style app with Aurelia.

Get it from here and use the Download ZIP method so we do not have to deal with Git issues in this simple context. After downloading this application, extract the contents of the folder named skeleton-esnext into the folder conveniently named skeleton-navigation-materialize and use the instructions to build and run this app. Make sure that you already have the NodeJS, jspm and gulp installed, this application should be running after you execute

JSPM:

npm install
jspm install
gulp watch

webpack:

npm install
npm start

and subsequently browse to http://localhost:9000, resulting with the following:

Image 1

Next, install aurelia-materialize-bridge as described in the installation instructions.

Now, we want to add four additional pages to this application. These pages will show Materialize select, button, slider and collapsible components:

Image 2 (collapsible shown rendered in its pop-out variant)

At this point verify that your main.js class looks like this:

import 'materialize-css';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-materialize-bridge', bridge => bridge.useAll());

  aurelia.start()
    .then(au => au.setRoot('app'));
}

as this will ensure that the application we are about to augment from its original form, loads the Aurelia Materialize bridge (named bridge in the above code).

The next screenshot depicts the final UI for the application we are about to create, with four additional menubar items

Materialize select
Materialize button
Materialize slider
Materialize collapsible

Image 4 In order to clearly separate the added code from the original Aurelia Navigation Skeleton, the original project structure is changed to this:

Image 5

In the following articles you will fill the blue box.

As the last actions in this Setup section of the tutorial, you need to make the following changes, that are indicated in the Modified code section of Image 5 above

File `app.html`

<template>
  <!-- the path below may even be "materialize-css/materialize.css", depending on your chosen materialize -->
  <require from="materialize-css/bin/materialize.css"></require>
  <require from="nav-bar.html"></require>

  <nav-bar router.bind="router"></nav-bar>

  <div class="page-host">
    <router-view></router-view>
  </div>
</template>

File `main.js`

import 'materialize-css';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-materialize-bridge', bridge => bridge.useAll());

  aurelia.start()
    .then(au => au.setRoot('app'));
}

<template bindable="router">
  <md-navbar fixed="true">
    <a href="#" class="brand-logo left"><span class="flow-text">${router.title}</span></a>
    <ul class="right hide-on-med-and-down">
      <li md-waves repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
        <a href.bind="row.href">${row.title}</a>
      </li>
    </ul>
  </md-navbar>
</template>