Question

我使用Angular UI-Router声明状态。我的状态设置正确，角度正在我的页面上工作，但模板html文件未正确加载。当我做的时候

template: 'template: 'js/timer/timer.template.html'

在我的控制器中，文本（上面的路径）按预期呈现，但是当我将其切换到

时

templateUrl: 'js/timer/timer.template.html',

未呈现timer.template.html文件。但是我的index.html文件似乎被加载了两次。一旦按预期进行，第二次将其复制并注入<ui-view> </ui-view> 这是我的index.html文件：

<!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/angular-ui-router@0.3.2/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>

当我转到localhost：1337 / timer（我已设置的状态）时，这个index.html文件似乎得到两次，一次如预期，然后再次在ui-view中，显示1 + 2 = 3两次。

这是我的timer.state.js文件。我尝试过使用不同的路径，但似乎没有任何东西指向正确的html文件。

app.config(function($stateProvider) {
    $stateProvider.state('timer', {
        url: '/timer',
        templateUrl: 'js/timer/timer.template.html',
        controller: 'TimerCtrl'
    });
});

我是否遗漏了有关UI-Router或templateUrl的内容或我未正确设置的内容？我使用express来处理路由，但只是将所有请求发送到/ *到index.html文件，以便UI-Router可以接管。我是否必须像通过css文件一样静态地提供模板html文件？

这是timer.template.html，其中timerMessage在控制器的$scope上定义

<p>This is the timer state and message is: {{timerMessage}}</p>

这里是github链接：github.com/sbernheim4/pomodoro-timer

Answer 1

是的，你的最后一段给出了正在发生的事情。节点无法将路径js/timer/timer.template.html与任何路由匹配，因此会执行catch all（返回索引而不是实际文件）。

以下是如何为html5mode配置Express的示例：

//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')});
});

所以是的，基本上你必须像使用js和css文件一样提供模板。

使用templateUrl

1 个答案: