Flapper News ui-视图无法显示 html 文件

Question

我正在做一个来自 https://thinkster.io/tutorials/mean-stack 的教程，叫做 flapper news。我已经完成了教程，系统工作正常。但是，我认为在单个文件中做一个内联模板不是一个好习惯，特别是如果你在做一个大项目。所以我试图将这些模板分成文件（.html）。不幸的是，html 文件无法在 ui 视图中显示。控制台和服务器都没有错误。我试图将视图文件夹中的 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 仍然无法显示模板。

这是输出：

enter image description here

有人知道如何解决这个问题吗？ bower 与此有什么关系吗？

Answer 1

一旦您在单独的文件中有了模板，就不需要脚本标签。删除它，它应该可以工作。您可以只使用 templateURL 的文件路径，然后

有时候你会像这样，

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

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

Flapper News ui-视图无法显示 html 文件

Flapper News ui-view cannot display html file

html

javascript

angularjs

bower

mean-stack