Menu
I'm using the Angular UI-Router to declare states. My states are set up correctly and angular is working on my page but the template html file is not being loaded correctly. When I do
template: 'template: 'js/timer/timer.template.html'
in my controller, the text (the path above) is rendered as expected but when I switch it to
templateUrl: 'js/timer/timer.template.html',
the timer.template.html file is not being rendered. What does happen though is my index.html file seems to be loaded twice. Once as expected and a second time where it is copied and injected into the <ui-view> </ui-view>
here is my index.html file:
<!DOCTYPE html>
<html>
<head>
<base href="/">
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://unpkg.com/[email protected]/release/angular-ui-router.min.js"> </script>
<script src="main.js"> </script>
</head>
<body ng-app='PomodoroTimer'>
<ui-view> </ui-view>
<p>1+2={{1+2}}</p>
</body>
</html>
When I go to localhost:1337/timer (the state that I have set up) this index.html file seems to get twice, once as expected and then again in the ui-view, 1+2=3 is displayed twice.
This is my timer.state.js file. I have tried using different paths but nothing seems to point to the right html file.
app.config(function($stateProvider) {
$stateProvider.state('timer', {
url: '/timer',
templateUrl: 'js/timer/timer.template.html',
controller: 'TimerCtrl'
});
});
Is there something I'm missing about UI-Router or templateUrl or something I don't have set up correctly? I'm using express to handle routing but just send all requests to /* to the index.html file so that UI-Router can take over. Do I have to serve the template html files statically through express like you would for css files?
Here is the timer.template.html where timerMessage is defined on the $scope of the controller
<p>This is the timer state and message is: {{timerMessage}}</p>
Here's the github link: github.com/sbernheim4/pomodoro-timer
713
asked Mar 03 '26 01:03
Yes your last paragraph gave away what is happening.
Node can't match the path js/timer/timer.template.html to any route so the catch all gets executed (returns the index instead of the actual file).
Here's an example of how to configure Express for html5mode:
//Look for statics first - this is important!
var oneHour = 3600 * 1000;
app.use(express.static(path.join(__dirname, 'public'), {maxAge: oneHour}));
//Return the index for any other GET request
app.get('/*', function (req, res) {
res.sendFile('index.html', {root: path.join(__dirname, 'public')});
});
So yes, basically you have to serve the templates as you do with js and css files.
188
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
