Question

我正在尝试实现一个简单的ui路由器，我可能错过了一些简单的东西，但我看不出我的错误在哪里，我在我的app.js中有这个

 angular.module('tourOfHonorApp', ['ui.router'])
    .config(function($stateProvider, $urlRouterProvider) {
     $stateProvider
     .state('app', {
        url:'/',
           views: {
                'header': {
                    template : '<h1>Header</h1>'
                },
                'content': {
                     template : '<h1>To be Completed</h1>'
                },
                    'footer': {
                       template : '<h1>Footer</h1>'
               }
           }
       });
    });

在我的index.html中，我有以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tour Of Honor</title>
</head>
<body ng-app="tourOfHonorApp">
    <div ui-view="header"></div>
    <div ui-view="content"></div>
    <div ui-view="footer"></div>

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="app.js"></script>
</body>

</html>

所以有人能告诉我我错过了什么吗？为什么在我的模板中加载此代码？编辑：这是我必须设置nodejs服务器的server.js代码：

var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(8080, function(){
    console.log('Server running on 8080...');
});

感谢你给我的任何帮助。

Answer 1

通过添加将家庭状态设置为默认状态 $urlRouterProvider.otherwise('/');以上$stateProvider。

Answer 2

请确保您从服务器提供文件。此外，您还配置了服务器以将所有URL请求重定向到index.html。请参考以下链接： https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

ui-router没有加载模板

2 个答案: