我正在做 https://thinkster.io/tutorials/mean-stack 的教程称为“摩登新闻”。我已经完成了教程并且系统工作正常。但是，我认为在单个文件中执行内联模板并不是一个好的做法，特别是如果您正在做一个大项目。所以我尝试将这些模板分成文件(.html)。不幸的是，html 文件无法在 ui-view 中显示。控制台和服务器都没有错误。我尝试将 View 文件夹中的index.ejs文件更改为公共(public)文件夹并将其重命名为index.html。还是行不通。 这是我的index.html:
<html>
<head>
<title>Flapper News</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="/javascripts/angularapp.js"></script>
<style>
.glyphicon-thumbs-up {
cursor: pointer
}
</style>
</head>
<body ng-app="flapperNews">
<nav class="navbar navbar-default pull-right" ng-controller="NavCtrl">
<ul class="nav navbar-nav">
<li ng-show="isLoggedIn()"><a>{{ currentUser() }}</a></li>
<li ng-show="isLoggedIn()"><a href="" ng-click="logOut()">Log Out</a></li>
<li ng-hide="isLoggedIn()"><a href="/#/login">Log In</a></li>
<li ng-hide="isLoggedIn()"><a href="/#/register">Register</a></li>
</ul>
</nav>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
</body>
</html>这是同一公共(public)文件夹中的 html 文件之一(home.html):
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div ng-repeat="post in posts | orderBy: '-upvotes'">
<span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(post)"></span> {{post.upvotes}}
<span ng-show="post.author"> posted by <a>{{post.author}}</a> |
</span>
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</span>
<span>
<a href="#/posts/{{post._id}}">Comments</a>
</span>
</div>
<form ng-submit="addPost()" ng-show="isLoggedIn()" style="margin-top:30px;">
<div ng-hide="isLoggedIn()">
<h3>You need to <a href="/#/login">Log In</a> or <a href="/#/register">Register</a> before you can add a post.</h3>
</div>
<h3>Add a new post</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Title" ng-model="title"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Link" ng-model="link"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>公共(public)/javascripts/angularApp.js:
var app = angular.module('flapperNews', ['ui.router']);
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html',
controller: 'MainCtrl',
resolve: {
postPromise: [
'posts',
function(posts) {
return posts.getAll();
}
]
}
})
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl',
resolve: {
post: [
'$stateParams',
'posts',
function($stateParams, posts) {
return posts.get($stateParams.id);
}
]
}
})
.state('login', {
url: '/login',
templateUrl: '/login.html',
controller: 'AuthCtrl',
onEnter: ['$state', 'auth', function($state, auth) {
if (auth.isLoggedIn()) {
$state.go('home');
}
}]
})
.state('register', {
url: '/register',
templateUrl: '/register.html',
controller: 'AuthCtrl',
onEnter: ['$state', 'auth', function($state, auth) {
if (auth.isLoggedIn()) {
$state.go('home');
}
}]
});
$urlRouterProvider.otherwise('/');
}
]);仅供引用，“.state('home', { url:”是“.state('home', { url: '/home'”)，但它显示错误，所以我将其更改为“url: '/'”并且错误消失了。但是 ui-view 仍然无法显示模板。
这是输出:
有人知道如何解决这个问题吗？ bower 与此有什么关系吗？
最佳答案
一旦您将模板放在单独的文件中，就不需要脚本标记。删除它，它应该可以工作。您可以仅使用文件的路径作为 templateURL 然后
有时你会像这样，就像你一样，
<script type="text/ng-template" id="template.html">
... some template stuff
</script>
该脚本标记实际上是为了将模板与主模板文件放在同一文件中，并且您可以像平常一样使用 templateUrl 和 id 属性的值。它将把脚本标签的主体视为 template.html 文件，因为 id 的值为 template.html
关于javascript - Flapper News ui-view 无法显示 html 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42982090/