CODEWITHSUNDEEP
angularjsangular-ui-router
Wallaceness
Wallaceness

Reputation: 1

Angular-ui-router not loading views

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!

Upvotes: 0

Views: 2993

Answers (2)

Wallaceness
Wallaceness

Reputation: 1

I solved the problem. The problem was that I hadn't specified the path correctly in the templateUrl. The correct path was browser/js/projects/projects.html, not js/projects/projects.html. Strange, because I could have sworn I tried that before, but I guess this time it just magically worked. I guess the lesson I learned is angular navigates from the static path provided in the server, not from the index.html where it is loaded, as I previously thought.

Upvotes: 0

pravs
pravs

Reputation: 379

Restore back to 1.5.x and use # in routes

Upvotes: 0

Related Questions