AngularJS 응용 프로그램을 CoffeeScript로 작성하십시오 (Yeoman 사용)

쉽게 CoffeeScript를 도입할 수 있습니다. 그래, Yeoman의 AngularJS 병아리 제너레이터라면.

전제

환경은 Mac OS입니다.

Yeoman 및 AngularJS의 제너레이터(generator-angular)를 사용합니다.

Yeoman이나 Generator를 아직 설치하지 않은 경우 여기를 참조하십시오. → Yeoman으로 AngularJS & UI Bootstrap 개발 환경 구축

절차

하지만 제너레이터를 시작할 때 --coffee 옵션을 붙이면 됩니다.

$ yo angular --minsafe --coffee

내용을 보자.

이러한 느낌으로, 본래는 .js 의 파일이 .coffee 로 작성되고 있습니다.



두 파일의 내용을보고 있습니다. CoffeeScript 문법으로 작성된 것 같습니다!

app.coffee

'use strict'

angular.module('coffeeTest3App', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute'
])
  .config ['$routeProvider', ($routeProvider) ->
    $routeProvider
      .when '/',
        templateUrl: 'views/main.html'
        controller: 'MainCtrl'
      .otherwise
        redirectTo: '/'
  ]

main.coffee

'use strict'

angular.module('coffeeTest3App')
  .controller 'MainCtrl', ['$scope', ($scope) ->
    $scope.awesomeThings = [
      'HTML5 Boilerplate'
      'AngularJS'
      'Karma'
    ]
  ]

동작 확인하기

물론 .coffee 파일을 .js 파일로 컴파일하지 않으면 브라우저는 인식할 수 없습니다. 하지만 컴파일은 Grunt가 해줍니다.

$ grunt serve

그러면 .tmp 폴더에 JS 파일이 자동으로 컴파일되어 브라우저에서 동작 확인할 수 있습니다. 개발이 끝나고 배포용 파일을 만드는 경우 grunt build dist 디렉토리에 컴파일된 JS 파일이 확장됩니다.

그 외

본래 CoffeeScript를 사용하려면 다음과 같이 설치해야 합니다만,

# npm install -g coffee-script

이번 절차에서는 Grunt인지 뭔가에 포함되어 있는지 별도 설치는 불필요한 것 같습니다. 그래도 잘 작동하지 않으면 설치해보십시오.