3

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

Improve this question
4
  • do you get your template when you hit localhost:1337/js/timer/timer.template.html ?
    – rob
    Commented Dec 21, 2016 at 22:15
  • No I don't, the index.html file is loaded and the 1+2=3 is displayed
    – sam4444
    Commented Dec 21, 2016 at 22:17
  • right. so that's your problem. You need to change your server or build process such that the url you are specifying for a template actually loads the template
    – rob
    Commented Dec 21, 2016 at 22:19
  • Got it. Thank you
    – sam4444
    Commented Dec 21, 2016 at 22:20

1 Answer 1

Reset to default
1

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.

Improve this answer
2
  • Got it. But then what should I do then if I ever have a bunch of folders each containing a state, controller and template html file, do I need to serve each of them up statically or is it better to put all my html files in one folder separate from their controllers and state js files
    – sam4444
    Commented Dec 21, 2016 at 22:19
  • The example above works recursively so any directory and files nested in /public will be statically exported.
    – Muli Yulzary
    Commented Dec 21, 2016 at 22:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.