Skip to content

AppDev tutorials: 2. Setup (r3)

Jump to bottom
Daniel Bendel edited this page Feb 4, 2016 · 10 revisions

2. Setup


Most people like explanations that are done 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-es2016 into the folder conveniently named skeleton-navigation-materialize and use the instructions to build and run this app. Specifically, assuming that you already have the NodeJS, jspm and gulp installed, this application should be running after you execute 

npm install
jspm install
gulp watch

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



Image 1

Next, install aurelia-materialize-bridge as described in the installation instructions (Image 3 below):



Image 3

Now, we want to add several (four) additional pages to this application that would show Materialize select, button, slider and collapsible components (the last one shown below rendered in its popout variant):



Image 2

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

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`
```html 

<br>
<br>

##### File `main.js`

<br>

```javascript
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-materialize-bridge', bridge => bridge.useAll());
    
  aurelia.start()
    .then(au => au.setRoot('app'));
}


File nav-bar.html 

<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>



#### Next page: [Select component](#/help/docs/app_developers_tutorials/3._autocomplete_component)

Clone this wiki locally