javascript - jade 模板中的脚本标记不使用 Angular 生成结束标记

Question

我正在阅读 Getting Mean 这本书，但在第 8 章第 2 节遇到了麻烦。出版商的论坛帮不上什么忙。

希望有人能给出一些启示，因为我不知道为什么它不能像书中声称的那样工作。

我认为问题可能与我正在使用的 View 有关。

    doctype html
    html(ng-app='loc8rApp')
      head
        meta(name='viewport', content='width=device-width, initial-scale=1.0')
        title= title
        link(rel='stylesheet', href='/bootstrap/css/amelia.bootstrap.css')
        link(rel='stylesheet', href='/stylesheets/style.css')
      body
       .navbar.navbar-default.navbar-fixed-top
          .container
            .navbar-header
              a.navbar-brand(href='/') Loc8r
              button.navbar-toggle(type='button', data-toggle='collapse', data-target='#navbar-main')
                span.icon-bar
                span.icon-bar
                span.icon-bar
            #navbar-main.navbar-collapse.collapse
              ul.nav.navbar-nav
                li
                  a(href='/about/') About

        .container
          block content

          footer
            .row
              .col-xs-12
                small © Simon Holmes 2014

        script(src='/angular/angular.js')
        script(src='/angular/loc8rApp.js')
        script(src='/javascripts/jquery-1.11.1.min.js')
        script(src='/bootstrap/js/bootstrap.min.js')
        script(src='/javascripts/validation.js')

因为它在我加载页面时生成以下 html:

    <script src="/angular/angular.js"><script src="/angular/loc8rApp.js"></script>
    <script src="/javascripts/jquery-1.11.1.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    <script src="/javascripts/validation.js"></script>

这意味着 loc8rApp.js 文件似乎包含在未关闭的脚本标签中。

当我加载页面时，chrome 中的控制台抛出的错误是:

Uncaught Error: [$injector:modulerr] Failed to instantiate module loc8rApp due to:
Error: [$injector:nomod] Module 'loc8rApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. 

以防万一问题是 Angular Controller 文件 (loc8rApp.js)，它在这里:

    angular.module('loc8rApp', []);

    var locationListCtrl = function ($scope) {
        $scope.data = {
            locations: [{
              //location data in here...
            }]
        };
    };

    var ratingStars = function() {
      // other code in here...
    };

    angular
        .module('loc8rApp')
        .controller('locationListCtrl', locationListCtrl)
        .filter('formatDistance', formatDistance)
        .directive('ratingStars', ratingStars);

提前感谢任何回复的人! =)

Answer 1

在模板文件中，

正文下方的线(第 9 行)间距不正确。

取而代之的是:

    body
     .navbar.navbar-default.navbar-fixed-top

应该是这样的:

    body
      .navbar.navbar-default.navbar-fixed-top

这个错误出现在我克隆的 github chapter-08 分支存储库中，并用于处理本章中教授的代码。我现在已经提交了一个拉取请求来解决这个问题，希望它不会影响太多其他人。

PR 可以在这里找到:https://github.com/simonholmes/getting-MEAN/pulls