AngularJS ui-router html5 mode breaks routing

Question

I have a WebApp which is routing correctly using the standard # EX) http://localhost:8080/#/about.html

When adding $locationProvider.html5Mode(true); to my angular 'app.js' file it breaks the app (views are not shown, links not clickable)... I have been through several tutorials/examples but cannot figure out where the problem is. Any help would be appreciated.

APP.JS

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

.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise('/');

    $stateProvider

    .state('home', {
        url: '/',
        templateUrl: '/home-partial.html'
    })
    .state('about', {
        url: '/about',
        templateUrl: 'about.html'
    });

}]);

INDEX.HTML

<html>
<head>
<base href="/">

<link href="/assets/css/bootstrap.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>

<body ng-app="routerApp">

<nav>
<ul class="nav masthead-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>

<div class="inner cover">             
<div ui-view></div>
</div>
</body>
</html>

SERVER.JS

// Call main packages
//===============================================
var express = require('express');
var app = express();
var mongoose = require('mongoose');
var morgan = require('morgan');
var bodyParser = require('body-parser')
var path = require('path');



// APP GLOBAL CONFIG
//===============================================

/* connect to the database */
mongoose.connect('mongodb://127.0.0.1:27017:/DB');

/* set location for static files */
app.use(express.static(__dirname + '/public'));

/* log all HTTP requests to console */
app.use(morgan('dev'));

/* set listen port for conn(s) */
app.listen(6070);

// catch all route
app.get('*', function (req, res) {
res.sendFile(path.join(__dirname + '/public/index.html'));
});

Joe112 · Accepted Answer · 2015-04-09 07:53:13Z

0

After taking a step back and looking at this logically, I found my simple mistake... $locationProvider needs to be passed in like below:

.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
        // code
}

answered Apr 9, 2015 at 7:53

Joe112

154 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS ui-router html5 mode breaks routing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related