Question

我正在关注Thinkster的MEAN堆栈教程，并且遇到了一些问题。

第一个是使用内联视图，使用id等于＆＃34; home.html＆＃34;的脚本标记，然后应该使用ui路由器将其路由到。这没有用，但我通过创建包含脚本标记之间所需标记的单独文件来修复此问题。

现在我进入节点领域并表达并托管本地服务器。我也试图遵循基本的节点结构。我在项目的根目录中有一个app.js文件，在angularApp.js中有一个教程中的代码，它包含在public / javascripts中。我已将我的观点移到了views文件夹中。

这是结构：

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。我只想要注入视图！

感谢。

Answer 1

尝试添加templateUrl的相对路径，例如templateUrl：＆＃39; /views/home.html'。

编辑：ID参数应使用：id而不是{id}设置。对不起，我之前没有注意到。：）

Answer 2

您的网络根目录为public，因此您必须在公开内容中创建文件夹views，然后将home.html和posts.html移入其中。

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

顺便说一下，其他路线应为/home

无法使用ui路由器注入视图

2 个答案: