Multi-page Architecture

What we'll build

Multipage web site

Allows consistent content (headers and footers)

Expected navigational behaviors

Using angular and angular-route

Start in the same place

Fork my repo

Clone in desktop

Start your local server

cd "multipage-template"
python -m SimpleHTTPServer 8080

How it works

Load with ng-view directive

<!-- about.html -->
<div>
    <p>This is what we want to load on the "about" tab</p>
</div>

Store HTML fragments in separate files

<!-- Index.html -->
<body>
    <div ng-app="myApp">
        <div>Header content</div>
               
        <!-- This is where your fragment will load -->
        <div ng-view></div>         
    
        <div>Footer content</div>
    </div>
</body>

What we need

Module dependency

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular-route.js"></script>

Angular route library

var myApp = angular.module('myApp', ['ngRoute'])

(put these in your index.html and app.js files)

Configure your module

Detail behaviors

myApp.config(function($routeProvider) {

})

Other URLs

.when('/about/', { // About page
  templateUrl: 'templates/about.html', // HTML fragment
  controller: 'AboutController', // Which controller 
})

Use .config for your application

.when('/', { // Landing page
  templateUrl: 'templates/landing.html', // HTML fragment
  controller: 'LandingController', // Which controller 
})

Add configuration

// Config route provider
.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'templates/landing.html',
      controller: 'LandingController',
    })
   .when('/content/', {
    templateUrl: 'templates/content.html',
    controller: 'ContentController',
  })
   .when('/about/', {
    templateUrl: 'templates/about.html',
    controller: 'AboutController',
  })
})

( in your and app.js file)

Add controllers

These are determined by configuration

.controller('AboutController', function($scope){
  $scope.info = "Some info"
})

Reference values in HTML fragments

<div>Here is the {{info}}</div>

Each page has it's own controller

 .when('/about/', {
    templateUrl: 'templates/about.html',
    controller: 'AboutController',
  })

Add controllers

// Landing page controller
.controller('LandingController', function($scope){
  $scope.number = 10
})

// About page controller
.controller('AboutController', function($scope){
  $scope.about = "Here's some information about this page."
})

// Content controller
.controller('ContentController', function($scope){
  $scope.url = "http://conference.unavsa.org/wp-content/uploads/2015/06/SEA-pic.jpg"
})

( in your and app.js file)

Create HTML fragments

Reference variables in your scope

<div>Some code</div>

Typically in a different folder (i.e., templates)

Regular HTML code

<!-- Controller specified in you configuration -->
<div>Like using {{expressions}}</div>

Create fragments

Content.html

<div>
    <h3>This is the landing template.  It comes from <code>templates/landing.html</code>.</h3>
    <h3>It has it's own contrller defined in <code>app.js</code>, 
    which is how we'll show the variable <code>$scope.number</code> 
    which is equal to {{number}}.</h3>
</div>

About.html

<div>
    <h3>This is the about template.  It comes from <code>templates/about.html</code>.</h3>
    <h3>It has it's own contrller defined in <code>app.js</code>, 
    which is how we'll show the variable <code>$scope.about</code> 
    which tells us the following about the page: </h3>
    <h4>{{about}}</h4>
</div>

Landing.html

<div>
    <h3>This is the content template.  It comes from <code>templates/content.html</code>.</h3>
    <h3>It has it's own contrller defined in <code>app.js</code>,
     which is how we'll show the variable <code>$scope.content</code> 
    which is really just the url for the following photo: </h3>
    <img src="{{url}}" style="height:300px"></img>
</div>

Can you see them?

localhost:8080/#content

<div>
    <h3>This is the landing template.  It comes from <code>templates/landing.html</code>.</h3>
    <h3>It has it's own contrller defined in <code>app.js</code>, 
    which is how we'll show the variable <code>$scope.number</code> 
    which is equal to {{number}}.</h3>
</div>

localhost:8080/#about

<div>
    <h3>This is the about template.  It comes from <code>templates/about.html</code>.</h3>
    <h3>It has it's own contrller defined in <code>app.js</code>, 
    which is how we'll show the variable <code>$scope.about</code> 
    which tells us the following about the page: </h3>
    <h4>{{about}}</h4>
</div>

localhost:8080/

<div>
    <h3>This is the content template.  It comes from <code>templates/content.html</code>.</h3>
    <h3>It has it's own contrller defined in <code>app.js</code>,
     which is how we'll show the variable <code>$scope.content</code> 
    which is really just the url for the following photo: </h3>
    <img src="{{url}}" style="height:300px"></img>
</div>

Linking them up

Within buttons

<a href="location">content</a>

Using <a> tag

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <a href="#/"><button type="button" class="btn btn-default">Home</button></a>
  </div>
  <div class="btn-group" role="group">
    <a href="#/content"><button type="button" class="btn btn-default">Content</button></a>
  </div>
   <div class="btn-group" role="group">
    <a href="#/about"><button type="button" class="btn btn-default">About</button></a>
  </div>
</div>

(add to your index.html in the header)

{that's it!}

Assignments

Teaching presentations (this week)

Final projects (due 7/22 before class)

Multi-page Architecture

By Michael Freeman

Made with Slides.com

Multi-page Architecture

  • 1,646

More from Michael Freeman