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 -->
<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 ui-view></div>         
    
        <div>Footer content</div>
    </div>
</body>

What we need

Module dependency

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></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
  url:'/',
  templateUrl: 'templates/home.html', // HTML fragment
  controller: 'HomeController', // Which controller 
})

Add configuration

// Config route provider
.config(function($stateProvider) {
    $stateProvider
	.state('home', {
		url:'/',
		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){
  $scope.info = "Some info"
})

Reference values in HTML fragments

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

Each page has it's own controller

 .state('about', {, 
    url:'/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

Content.html

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

About.html

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

Landing.html

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

Can you see them?

localhost:8080/#content

localhost:8080/#about

localhost:8080/

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

(add to your index.html in the header)

{that's it!}

Assignments

Project proposal (due next week)

ui-router

By Michael Freeman

Made with Slides.com

ui-router

  • 1,427

More from Michael Freeman