CODEWITHSUNDEEP
javascriptangularjscoffeescript
Oleksandr Verhun
Oleksandr Verhun

Reputation: 854

AngularJS with Coffeescript

I have done a test app in AngularJS, now I'm trying to a little different and with coffee. The thing is, that it gives me an error like this: 

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.

And I don't understand, why it doesn't see my app module. Here's my code:

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'
      })
]

And controllers.coffee:

commentController = angular.module 'commentController', [] 

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

Upvotes: 0

Views: 1383

Answers (1)

Quentin F
Quentin F

Reputation: 738

Coffeescript is not natively supported by browsers: you have to compile it into Javascript.

You can do it "easily" by using tasks runners such as Grunt or Gulp and appropriates plugins (gulp-coffee, grunt-contrib-coffee), or with Browserify and appropriates transformations (coffeeify). Yeoman uses Grunt/Gulp.

Now, about the error:

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

This snippet will effectively load the script but wont interpret it. You can get its content and manipulate it as a string (that's what is used by some templating libraries), but that's it. The browser won't tell you "Hey, I can't read this, it's coffeescript".

After the page being loaded, Angular, that was successfully loaded as it is plain javascript, will parse your DOM, read ng-app="app", and try to see if he knows the module app. Unfortunately, your scripts were not interpreted, thereby the app module not declared: that's the error you get !

Upvotes: 1

Related Questions