Question

我仍然很擅长将Angular的ui-router用于SPA，而且我在浏览器上没有渲染模板时遇到了一些问题（我正在使用Firefox）。以下是我的app.js代码，

angular.module('myApp', ['ui.router'])

.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider
        // route for the home page
        .state('app', {
            url:'/',
            views: {
                'header': {
                    templateUrl : 'views/header.html'
                }
            }
        });

    $urlRouterProvider.otherwise('/');

})

这是我的HTML，

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
    <meta charset="utf-8"/>
    <title>Will this work?</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" href="bower_components/bootswatch-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/mystyles.css"/>
</head>

<body>
    <div ui‐view="header"></div>
</body>

<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="scripts/app.js"></script> 
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

</html>

还要提供header.html的代码，

<header>
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse" id="navbar-main">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href=""><span class="glyphicon glyphicon-home"></span> Home</a>
                    </li>
                    <li>
                        <a href=""><span class="glyphicon glyphicon-info-sign"></span> About</a>
                    </li>
                    <li>
                        <a href=""><span class="glyphicon glyphicon-envelope"></span> Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</header>

我在网络控制台中没有收到任何错误消息，只是一个空白屏幕。

Answer 1

我只是尝试在我的一个插件中复制你的代码，令人惊讶的是它有效。我删除了一些样式表的东西，意图是使代码工作。我怀疑你导入的脚本有什么问题（bower_components）。我使用plunkr的外部库工具来导入脚本，除此之外，其余代码与您的相同。

您的代码存在一些问题：

将导入脚本放在body标签内，而不是放在室外。
在评论中发布的插件中，您已导入Angular2而不是AngularJS。

<强>的script.js：

angular.module('myApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('app', {
            url:'/',
            views: {
                'header': {
                    templateUrl : 'header.html'
                }
            }
        });
    $urlRouterProvider.otherwise('/');
})

检查此plunk。

使用ui-view而不是渲染模板的问题

1 个答案: