使用 stateProvider 和 ui-view 使用 AngularJS 实现选项卡时遇到问题

Question

您好，我创建了一个简单的应用程序，可让您创建新帖子并查看现有帖子。

但是，我现在正尝试在我的应用程序中添加标签。这意味着有一个用于添加新帖子的单独选项卡，以及一个用于查看现有帖子的单独选项卡。所以应该有两个标签。一个用于添加新帖子，一个用于查看现有帖子。

这里是关于事情应该看起来如何但无法正常工作的 plunker http://plnkr.co/edit/3HVgE4vq8Z10HBRgzDfv?p=preview

这是一个可以工作（由其他人制作）但没有以下脚本的 plunker： http://plnkr.co/edit/dYuXfcMLe7JEg8wVoPkE?p=preview

<script type = "text/ng-template" id = "/main.html">
<div class="page-header">
  <h1>Post Center</h1>
</div>

<form id = "form" ng-submit="addForm()">
  <h3>New post</h3>

  <div class="form-group">
    <input type="text" class="form-control" ng-model="Title"></input>
  </div>

  <div class="form-group">
    <input type="text" class="form-control" ng-model="Name"></input>
  </div>

  <button type="submit" class="btn btn-primary">Add</button>
</form>

<h3>Existing posts</h3>

<div ng-repeat="post in posts">

  <span style="color: navy; font-size:15px; text-align: left; display: block;">
    <b>Title</b>:  {{post.Title}}&nbsp&nbsp
    <b>Name</b>:  {{post.Name}}&nbsp&nbsp
  </span>

  <span>
    <a href="#/posts/{{$index}}">Comments</a>
  </span>
  <br>
  <br>
</div>
  </script>

<script type="text/ng-template" id="/posts.html">
<div class="page-header">
  <h4>
    <br>
    <b>Title</b>:  {{post.Title}}
  </h4>
</div>

<div ng-repeat="comment in post.comments">
  {{comment.author}}

  <span id= "comment">
    {{comment.body}}
  </span>
</div>

<form ng-submit="addComment()">
  <h3> New Comment </h3>
  <div class = "form-group">
    <input type = "text" class = "form-control" ng-model = "body"></input>
  </div>
  <button type = "submit" class = "btn btn-primary">Add</button>
</form>
  </script>

请帮助并让第一个 plunker 工作！谢谢！！

Answer 1

两个变化：

1) 将index.html 中的ng-app="Plunker" 更改为ng-app="app" 以匹配您的模块名称。

2) 将前导斜杠从 templateUrl: '/addPost.html' 删除到 templateUrl: 'addPost.html'。

工作小插曲：http://plnkr.co/edit/cXKFWOzbwX49CHhgARzX?p=preview