Angular-ui-router not loading views

Question

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!

Can you load the view (i.e. /js/projects/projects.html) from your browser? — JB Nizet
@JB Nizet No, I cannot load the view. That is my entire problem. — Wallaceness
So it's a server problem. Not an angular problem. If the server doesn't allow accessing the view, how could angular display it? Tag your question with NodeJS and post the structure of your server. I'm not competent regarding NodeJS, but you won't get NodeJS developers looking at your question if it's not tagged NodeJS. — JB Nizet
@JB Nizet I've put the view in an Angular state using $stateProvider, so I don't believe it's a server problem. Angular should be able to load it from the browser, right? — Wallaceness
What do you mean? What you have in your code is 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. — JB Nizet

pravs pravs · Accepted Answer · 2017-01-13T18:55:26

0

votes

Restore back to 1.5.x and use # in routes

Angular-ui-router not loading views

2 Answers