AngularJS with Coffeescript

我已經在AngularJS上做了一個測試應用程序，現在我正在嘗試與咖啡有點不同。問題是，它給了我這樣的錯誤：AngularJS with Coffeescript

Error: [$injector:modulerr] Failed to instantiate module app due to: 
Error: [$injector:nomod] Module 'app' 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.

而且我不明白，爲什麼它不會看到我的應用程序模塊。這裏是我的代碼：

的index.html

<!doctype html> 
<html lang="en" ng-app="app"> 
    <head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> 
    <link rel="stylesheet" href="css/app.css"> 

    <script src="bower_components/jquery/jquery.js"></script> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-animate/angular-animate.js"></script> 
    <script src="bower_components/angular-route/angular-route.js"></script> 
    <script src="bower_components/angular-resource/angular-resource.js"></script> 

    <script src="coffee/app.coffee" type="text/coffeescript" ></script> 
    <script src="coffee/controllers.coffee" type="text/coffeescript"></script> 
    </head> 
    <body> 

    <div class="view-container"> 
     <div ng-view></div> 
    </div> 

    </body> 
</html>

app.coffee

app = angular.module 'app', [ 
    'ngRoute' 
    'commentController' 
] 

app.config [ '$routeProvider', 
    ($routeProvider) -> 
    $routeProvider. 
     when('/title', { 
      templateUrl: 'templates/title.html' 
      controller: 'CommentListCtrl' 
     }). 
     otherwise({ 
     redirectTo: '/title' 
     }) 
]

而且controllers.coffee：

commentController = angular.module 'commentController', [] 

commentController.controller 'CommentListCtrl', [ '$scope', 
    ($scope) -> 
    $scope.hello = "HELLO!" 
]

來源

2014-11-24 Oleksandr Verhun

那麼我做了另一種方式。安裝yeoman（因爲早些時候我不知道這件事情），並委派他爲我做的一切：）但仍thx爲您的答案。您可以將其添加到您的答案，所以我會接受它作爲完整的答案:) – 2014-11-26 09:57:59

CoffeeScript中沒有原生瀏覽器支持：你必須將它編譯成Javascript。

您可以通過使用任務跑者如步兵或咕嘟咕嘟做「容易」和挪用插件（gulp-coffee，grunt-contrib-coffee），或Browserify和挪用轉換（coffeeify）。 Yeoman使用Grunt/Gulp。現在

，有關該錯誤：

<script src="coffee/app.coffee" type="text/coffeescript" ></script>

這個片段將有效地加載腳本，但不會解釋它。你可以得到它的內容，並將它作爲一個字符串來操作（這是一些模板庫所使用的），但就是這樣。瀏覽器不會告訴你「嘿，我不能讀這個，它是咖啡標記」。

頁面加載後，Angular成功加載，因爲它是純javascript，將解析您的DOM，請閱讀ng-app="app"，並嘗試查看他是否知道模塊app。不幸的是，你的腳本沒有被解釋，因此app模塊沒有被聲明：這是你得到的錯誤！

來源

2014-12-23 14:03:39 Quentin

AngularJS with Coffeescript

回答

相關問題