Multi-page Architecture

What we'll build

Multipage web site

Allows consistent content (headers and footers)

Expected navigational behaviors

Use Angular with ui-router module

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 ui-view directive

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

Store HTML fragments in separate files

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

What we need

Module dependency

<script src=""></script>

Angular ui-router module

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

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

Configure your module

Detail behaviors

myApp.config(function($stateProvider) {


Use .config for your application

$stateProvider.state('home', { // Landing page
  templateUrl: 'templates/home.html', // HTML fragment
  controller: 'HomeController', // Which controller 

Add configuration

// Config route provider
.config(function($stateProvider) {
	.state('home', {
		templateUrl: 'templates/home.html',
		controller: 'HomeController',
	// Configure states for "content" and "about"

( in your and app.js file)

Add controllers

These are determined by configuration

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

Reference values in HTML fragments

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

Each page has it's own controller

 .state('about', {, 
    templateUrl: 'templates/about.html',
    controller: 'AboutController',

Add controllers

// Landing page controller: define $scope.number as a number

// About page controller: define $scope.about as a string

// Content controller: define $scope.url as an image

( 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


<!-- Write an expression to see your $scope.number variable -->


<!-- Write an expression that shows your "about" variable -->


<!-- Use an img tag to show the image URL your defined in your controller -->

Can you see them?




Linking them up

Create links

<a ui-sref="home">Home</a>

Using ui-sref within the <a> tag

 <div class="header">
      <!-- Create links to different sections -->
        <h1>This is the header -- it'll stick around</h1>        
        <a class="btn btn-default">Home</a>
        <a class="btn btn-default">Content</a>
        <a class="btn btn-default">About</a>

(add to your index.html in the header)

{that's it!}


Project proposal (due next week)


By Michael Freeman


  • 864
Loading comments...

More from Michael Freeman