javascript - 无法使用 ui 路由器注入(inject) View

Question

我正在学习 Thinkster 上的 MEAN 堆栈教程，但遇到了一些问题。

第一个是内联 View ，例如使用 id 等于“home.html”的脚本标记，然后应该使用 ui 路由器将其路由到。这不起作用，但我通过创建单独的文件来解决这个问题，其中包含脚本标记之间我想要的任何标记。

现在我正在进入节点和 express 领域，并托管本地服务器。我也试图遵循基本的节点结构。我的项目根目录中有一个 app.js 文件，以及 angularApp.js 中教程中的代码，该代码包含在 public/javascripts 中。我已将 View 移至 View 文件夹中。

这是结构:

Root --- app.js
     |
     --- views  --- index.ejs, home.html, posts.html
     |
     --- public --- javascripts --- angularApp.js

当应用程序启动时，它首先找到 angularApp.js(良好)，但随后无法加载 home.html。没有显示任何内容(屏幕为空白)。

这是我的 angularApp.js app.config 部分:

    app.config([
    '$stateProvider',
    '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

      $stateProvider
        .state('home', {
          url: '/home',
          templateUrl: 'home.html',
          controller: 'MainCtrl'
        })
        .state('/posts', {
          url: 'posts/{id}',
          templateUrl: 'posts.html',
          controller: 'PostsCtrl'
        });

      $urlRouterProvider.otherwise('/views/home');
    }]);

这是我的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 style="font-size:20px; margin-left:10px;">
      <!-- If the link is supplied, make it the href -->
      <a ng-show="post.link" href="{{post.link}}">{{post.title}}</a>
      <!-- If the link isn't supplied, just display the title -->
      <span ng-hide="post.link">{{post.title}}</span>
      <span>
        <a href="#/posts/{{$index}}">Comments</a>
      </span>
      - upvotes: {{post.upvotes}}
    </span>

  </div>

  <form ng-submit="addPost()" style="margin-top:30px;">
    <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>

我认为问题在于我对 ui 路由器参数的处理 - 我觉得我已经尝试了每种组合，但我束手无策。整个代码库的链接位于:https://github.com/Zombiefruit/mean_test_01 。我只想注入(inject) View !

谢谢。

Answer 1

您的网络根目录是 public，因此您必须在 public 内创建一个文件夹 views，然后移动 home.html 和 posts.html 进入其中。

然后将 templateUrl 更改为 '/views/home.html' 即可。

顺便说一句，否则路线应该是/home