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

Failing to inject a view with ui router

本文关键字：路由器 注入 视图 UI      更新时间：2023-09-26

我正在Thinkster上遵循MEAN堆栈教程，我遇到了几个问题。

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

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

这是结构：

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

当应用程序启动时，它首先找到angularApp.js（良好），但随后无法加载主页.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');
    }]);

这是我的家.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。我只是想让景色注入！

谢谢。

您的 Web 根目录是 public ，因此您必须在公共内部创建一个文件夹views然后移动home.html并posts.html其中。

然后将templateUrl更改为'/views/home.html'就可以了。

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

尝试将相对路径添加到模板网址，如模板网址："/views/home.html"。

编辑：ID 参数应使用 ：id 而不是 {id} 进行设置。对不起，我以前没有注意到这一点。:)

相关文章：