0

Trying to use relative url's for my single-page angularjs app, but can't get either the page to load with any styling, or to load with angular working.

JS:

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$locationProvider.html5Mode(true);

$routeProvider    
    .when('/', {
        templateUrl: '/pages/home.html',
        controller: 'mainController as main'
    })
    .when('/home', {
        templateUrl: '/pages/home.html',
        controller: 'mainController as main'
    })
    .when('/newPayroll', {
        templateUrl: '/pages/newPayroll.html',
        controller: 'newPayrollController as newPayroll'
    })
    .when('/employeesList', {
        templateUrl: '/pages/employeesList.html',
        controller: 'employeesListController as employeeList'
    })
    .otherwise({ redirectTo: '/' });
}])

When I add the base tag to the top of the head like this it renders the page without styling, and page links don't work:

<base href="/" />

And when I add it like this the styling works, but angular stops working completely, even though no errors show in the console, and clicking on links takes me to a file index screen:

<base href="./" />

File structure:

'dashboard' folder
app.js
index.html
'pages' folder
    home.html
    page2.html
    etc...
'js' folder
    angular.js
'css' folder
    style.css

0 Answers0