将 AngularJS 添加到早午餐应用程序时出现“未捕获的对象”答案

【问题标题】："Uncaught object" when adding AngularJS to Brunch app将 AngularJS 添加到早午餐应用程序时出现“未捕获的对象”
【发布时间】：2014-08-19 12:46:36
【问题描述】：

前言：由于我是 AngularJS 和 Brunch 的新手，我想从头开始学习基础知识和构建和应用程序（即从 dead-simpleBrunch 框架）。我很清楚存在专门处理引导 AngularJS/Brunch 应用程序的骨架，我一直在研究他们的代码，以找出“使它们工作”的原因。但是作为新手，我看不到我的问题的解决方案......

问题：只要我将ng-app（没有任何值）添加到html 元素，AngularJS 就可以正常工作。但是一旦我向这个属性添加一个值（即ng-app="MyApp"），AngularJS 就会停止工作。 Chrome 中的控制台告诉我它在 angular.js 的第 1695 行遇到了一个“未捕获的对象”。

似乎早午餐添加的javascript导致了这个：如果我在公共文件夹的app.js文件中删除早午餐生成的最顶部的代码，它又可以工作了。但显然这不能解决我的问题。

这是我app/assets/index.html的代码：

<html ng-app="myApp">
    <head>
        <title>Test</title>
    </head>
    <body>
        <script src="app.js"></script>
    </body>
</html>

这是我的 app/app.coffee 中的代码（在生成的 public/app.js 中与早午餐和 AngularJS 代码连接）：

angular.module("myApp", [])

问题：我错过了什么？我看到在特定的骨架中 index.html 文件包含一个<script>require('MyApp')</script>，但添加它并不能解决问题。

非常感谢像我这样的早午餐菜鸟的任何提示。谢谢！

【问题讨论】：

感谢您的提示。实际上，这是我的 sn-ps 中的一个错字，它是 ng-app="myApp"（在 html 和咖啡文件中都一样）。我已经在我的问题中更正了它。

标签： angularjs brunch

【解决方案1】：

好吧，我终于想通了。确实需要额外的<script>require('app');</script> sn-p。但是，请确保此 require() 调用的参数与创建 Angular 应用程序的文件名相匹配。

例子：

您的 HTML 标记使用 ng-app="myAwesomeApp"。对应的 Javascriptcode 需要用angular.module("myAwesomeApp", []) 引用。
如果您的 Javascript 文件（其中创建了 Angular 模块）只是简单地称为 app.js，那么相应的 <script>require('app');</script> 应该会反映这一点。如果您还选择将 Javascript 文件命名为 myAwesomeApp.js，则将其与 <script>require('myAwesomeApp');</script> 匹配。

【讨论】：