2014-11-24 2 views
0

저는 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. 

그리고 왜 내 응용 프로그램 모듈이 보이지 않는지 이해할 수 없습니다.

<!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


index.html을 :

commentController = angular.module 'commentController', [] 

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

나는 다른 방법으로 그것을했다. 설치 yeoman (원인이 일찍 나는이 일에 대해 몰랐) 원인 및 그를 위해 모든 일을 위임 :)하지만 여전히 당신의 대답에 대한 thx. 당신은 당신의 대답에 그것을 추가 할 수 있도록 내가 전체 응답으로 받아 들일거야 :) –

답변

1

커피 스크립트는 기본적으로 브라우저에서 지원되지 않습니다 여기 내 코드입니다 : 당신은 자바 스크립트로 그것을 컴파일해야합니다.

Grunt 또는 Gulp와 같은 작업 주자를 사용하고 플러그인 (gulp-coffee, grunt-contrib-coffee)을 사용하거나 Browserify 및 적절한 변환 (coffeeify)을 사용하여 "쉽게"작업을 수행 할 수 있습니다. Yeoman은 Grunt/Gulp를 사용합니다.

이제 오류에 대한이 조각 효과적으로 스크립트를로드하지만 늘 해석됩니다

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

. 내용을 가져 와서 문자열로 조작 할 수 있습니다 (일부 템플릿 라이브러리에서 사용하는 것입니다).하지만 그게 전부입니다. 브라우저는 "이봐, 이걸 읽을 수 없어, 커피 자국이야."라고 말하지 않을 것입니다.

페이지가로드 된 후 평범한 자바 스크립트이므로 성공적으로로드 된 Angular는 DOM을 구문 분석하고 ng-app="app"으로 읽고 app 모듈을 알고 있는지 확인합니다. 아쉽게도 스크립트가 해석되지 않아 app 모듈이 선언되지 않았습니다. 오류가 발생했습니다.