使用 EJS 部分和角度的 Node/Express 项目：未捕获的 ReferenceError：未定义角度答案

【问题标题】：Node/Express project using EJS partials and angular: Uncaught ReferenceError: angular is not defined使用 EJS 部分和角度的 Node/Express 项目：未捕获的 ReferenceError：未定义角度
【发布时间】：2015-02-12 12:45:34
【问题描述】：

我觉得我在这里完全错过了一些东西，但我正在尝试在单页角度应用程序中使用 ejs 部分。我不断收到 Uncaught ReferenceError: angular is not defined in my partial。我认为这可能与使用 ejs 部分而不是使用 ng-include 有关，但是我没有任何运气来使用它。任何帮助都会很棒。

app.js

(function(){
  var app = angular.module('dashboard', []);

  app.controller('ItemController', function(){
    this.item = items;
  });

  //need to loop through items in DB for now using these test objects
  var items = [
    {
      name : 'name1',//query to db for name goes here
      stock : '4',//query to db
      img : '/images/bb-logo.png'//query to db
    },
    {
      name : 'name2',//query to db for name goes here
      stock : '6',//query to db
      img : '/images/bb-logo.png'//query to db
    }
  ];

})();

index.ejs

<!DOCTYPE html>
<html lang="en" ng-app="dashboard">
<head>
  <meta charset="UTF-8">
  <title><%= title %></title>
  <link rel="stylesheet" href='/libs/font-awesome/css/font-awesome.css'>
  <link rel="stylesheet" href='/libs/foundation/css/foundation.css'>
  <link rel="stylesheet" href='/stylesheets/style.css'>
  <!-- include angular here -->
  <script type="text/javascript" href='/libs/angular/angular.js'></script>
  <script type="text/javascript" href='/libs/modernizer/modernizer.js'></script>
  <script type="text/javascript" src="/angularApp.js"></script>

</head>

<body>
  <% include partials/topbar %>
  <div class="row">
    <div class="large-6 columns etsy-container">
      <% include partials/etsy-container %>
    </div>
    <div class="large-6 columns">
      <% include partials/amazon-container %>
    </div>
  </div>

</body>
</html>

/amazon-container

<div class='store-container'>
  <h1 class="left">Amazon</h1>
  <span class="store-utility-icons"><i class="fa fa-refresh right"></i><i class="fa fa-times-circle-o right"></i></span>
  <div class="clear"></div>

  <% include /item %>
</div>

/item.ejs

<div ng-controller="ItemController as store" >
  <div ng-repeat="item in store.items">
    <img ng-src="{{item.img}}" />
    <p>{{item.name}} <i> Stock level: {{item.stock}}</i></p>
  </div>
</div>

【问题讨论】：

标签： javascript angularjs node.js mean-stack

【解决方案1】：

包含 Angular 的方式是错误的。你有

<script type="text/javascript" href='/libs/angular/angular.js'></script>

但应该是：

<script type="text/javascript" src="/libs/angular/angular.js"></script>

所以你必须使用src 而不是href。看起来像一个典型的复制/粘贴错误。所以，最后，这与 EJS 或使用部分无关，它只是错误的 HTML ;-)。

PS：除此之外，您在 HTML 中使用单引号来表示属性。始终使用双引号，因为这是通常的常用方法。

PPS：这同样适用于您尝试加载 Modernizr 的行。

【讨论】：