I've worked with Angular before but it's been a while, so I'm a bit rusty. I can't seem to get Angular ui-router to load the html templates for any of my states. This is a very simple app; it does not require any ajax calls, just html templates through ui-router. The state I am currently trying to reach is the /projects state, but when I enter /#/projects, all I see is a blank page. As well the path after the /# becomes #!#%2Fprojects; I'm not sure if this is normal. No errors show up in the console, and all logs I put in the state and controller seem to log out, indicating that they are correctly loading. I believe therefore Angular is just not finding the templateUrl, but I don't know why not.I'm using Angular 1.6. Here are all the relevant files: server.js
'use strict';
/* eslint-disable global-require */
var express=require('express');
var app=express();
app.use("/", express.static(__dirname));
var port=app.listen(process.env.PORT || 8080);
app.listen(port, function(){
console.log("Server working!");
})
app.get('*', function(request, response){
console.log(request);
response.sendFile(__dirname+'/browser/index.html');
})
my index.html file:
<html>
<head>
<title> My Portfolio</title>
<script src="/node_modules/angular/angular.js" defer></script>
<script src="/node_modules/angular-ui-router/release/angular-ui-router.js" defer></script>
<script src="browser/js/app.js" defer></script>
<script src="browser/js/projects/projects_controller.js" defer></script>
<script src="browser/js/projects/projects_state.js" defer></script>
</head>
<body ng-app="app">
<div id="main">
<ui-view></ui-view>
</div>
</body>
</html>
my app.js
'use strict';
var app = angular.module('app', ['ui.router']);
app.run(function($rootScope) {
$rootScope.$on("$stateChangeError", console.log.bind(console));
});
my project state:
'use strict';
console.log("project state");
app.config(function($stateProvider){
$stateProvider.state('projects', {
url:'/projects',
templateUrl: '/js/projects/projects.html',
controller: 'projects_ctrl'
})
})
console.log("state out!")
projects controller:
'use strict';
console.log("controller");
app.controller('projects_ctrl', function($scope){
console.log("hi!")
})
And the projects.html page (which is never reached...)
<div>
<h1>Hi, this is the projects page!</h1>
</div>
Please help!
templateUrl: '/js/projects/projects.html'. That's not a view. That's the URL of the view. So angular uses that URL to load the view (i.e. the content of the projects.html file) from the server. Hence my question: is the browser able to load that view? When you look in the network tab of your browser dev tools, does the request to that URL appear, and is the response successful? If it's not, then it's a server problem.