插板新闻ui-view无法显示html文件

Question

我正在从https://thinkster.io/tutorials/mean-stack做一个名为插板新闻的教程。 我已经完成了教程，系统工作正常。 但是，我认为如果你正在做一个大项目，在一个文件中做一个内联模板并不是一个好习惯。 所以我试图将这些模板分成文件（.html）。 不幸的是，html文件无法在ui-view中显示。 控制台和服务器都没有错误。 我尝试将视图文件夹中的index.ejs文件更改为公用文件夹，并将其重命名为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> 

这是同一个公共文件夹（home.html）中的一个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> 

公共/ Java脚本/ 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('/'); } ]); 

fyi，“。state（'home'，{url：”是“.state（'home'，{url：'/ home'”但它显示错误，所以我将其更改为“url：'/'”并且错误消失了。但是ui-view仍然无法显示模板。

这是输出：

在此输入图像描述

任何人都知道如何解决这个问题？ 凉亭与此有什么关系？

Answer 1

将模板放在单独的文件上后，您不需要脚本标记。 删除它，它应该工作。 然后，您可以使用该文件的路径作为templateURL

有时你会像你一样喜欢这样的东西，

<script type="text/ng-template" id="template.html">
   ... some template stuff
</script>

该脚本标记实际上是将模板与主模板文件放在同一文件上，您可以像往常一样使用带有id属性值的templateUrl 。 它会将script标签的主体视为template.html的文件，因为id的值是template.html