无法在 JSFiddle 中使用 CoffeeScript AngularJS 模块加载 ng-app

Question

我正在使用 Coffeescript 和 AngularJS，尝试使用新的“controller as”语法。尽管进行了各种尝试和搜索谷歌，但我无法让它工作 - 我的 html 中的控制器引用没有找到控制器的 Coffeescript 类。

我怀疑我做错了什么或只是误解了一些事情，但如果有人有一个可行的例子，那将非常有帮助。

这是一个小 jsfiddle，显示了我正在尝试做的事情：http://jsfiddle.net/G2r4p/（此示例中的控制器只是一个空的虚拟控制器，因此我可以测试语法）。

当我在浏览器中运行此示例时，我得到：

Error: [ng:areq] Argument 'AppController' is not a function, got undefined
at hasOwnPropertyFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:60:12)
at assertArg (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:1187:11)
at assertArgFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:1197:3)
at $get (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:5547:9)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:5060:34
at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:203:20)
at nodeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:5047:11)
at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:4607:15)
at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:4610:13)
at publicLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:4516:30) 

谢谢

Answer 1

JS Fiddle 是罪魁祸首。当我在JS Bin 中尝试时，您的语法是正确的并且工作正常。看起来 JS Fiddle 正在处理一些乱序的东西，而 JS Bin 并没有遇到这个问题。

查看有效的 JS Bin 示例：http://jsbin.com/akABEjI/1/edit

您可能还对我的博客文章感兴趣，该文章采用 AngularJS Todo 应用程序并将其转换为 CoffeeScript："Writing AngularJS controllers with CoffeeScript classes." 最终，您的示例与我在最后一个示例中的最终示例相似。

Answer 2

我对你的代码做了一些修改，现在可以使用了 (http://jsfiddle.net/denisonluz/r5KQb/2/)

还请记住，有时在使用 JSFiddle 时使 AngularJS 工作可能有点棘手。有一篇关于它的好帖子here。在 JSFiddle 上使用 AngularJS 和 CoffeScript 时，您必须使用手动引导。

COFFESCRIPT

testApp = angular.module 'testApp', []

testApp.controller 'AppController', ($scope) ->
    $scope.items = [{title: "My test App", description: 'Some Text Here'}]

angular.bootstrap document, ["testApp"]

HTML

<div ng-controller='AppController'>
<h3>one plus two is {{1 + 2}}</h3>
  <ul ng-repeat='item in items'>
    <li>{{item.title}}</li>
    <li>{{item.description}}</li>
   </ul>
</div>

Answer 3

问题不是你的 CoffeeScript，而是 JSFiddle。

问题在于 JSFiddle 执行 CoffeeScript 的方式，在 Angular 尝试使用您的 ng-app="TestApp" 指令引导应用程序之后，它会处理 CS 并执行创建的 JavaScript。

虽然@dluz“解决”了这个问题，但它没有解释它。

一种解决方案是手动引导您的应用程序，正如 @dluz 建议的那样，但您不必也不应该在生产环境中执行此操作。

理想情况下，在生产环境中，您将预处理您的 CoffeeScript，它永远不会在浏览器中编译为 JavaScript，就像在 JSFiddle 中一样。

Answer 4

这是一个简单的例子，咖啡脚本、角和玉并排工作

doctype html
html(lang="en")
    head
        meta(charset="utf-8")
        title Test
        script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js')
        script(src='http://coffeescript.org/extras/coffee-script.js')
        style.
            input { width: 200px }

        script(type='text/coffeescript').
            app = angular.module('App', [])
            app.controller 'TestController', ($scope)->
                $scope.name = 'Angular 1.4 with Jade with coffee'
            angular.bootstrap document, ["App"]

    body
        div
            div(ng-controller="TestController")
                h2 {{name}}
                hr
                input(type="text" ng-model="name" )