本篇文章探讨了JavaScript基础教程之Angularjs示例--Sonar中项目使用语言分布图(CoffeeScript版)，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

     CoffeeScript是一门简洁的，构架于JavaScript之上的预处理器语言，可以静态编译成JavaScript，语法主要受ruby和python影响，目前已经为众多rails和node项目采用。CoffeeScript不是JavaScript的超集，也不是完全替代品。CoffeeScript有点在于：

1. 更少，更紧凑，和更清晰的代码

2. 通过规避和改变对JavaScript中不良部分的使用，只留下精华，让代码减少出错率，更容易维护

3. 在很多常用模式的实现上采用了JavaScript中的最佳实践

4. CoffeeScript生成的JavaScript代码都可以完全通过JSLint的检测

   多的也不想说那么多了，这里主要是个简介，CoffeeScript的练笔示例。

代码如下：

app = angular.module('app', [])
    .value(""$host"", ""//nemo.sonarsource.org"")
    .factory(""$requestUrl"", ($host) ->   ""#{$host}/api/resources"")
    .factory(""$dynamicColor"", ($host) ->
        [r,g,b] = [10,10,0]
        {
          getColor: ->
               [r,g,b] = [(r+100), (g+400), (b + 200)]
               ""##{(r + 256 * g + 65536 * b).toString 16 }""
          ,
          reset:  ->
               [r,g,b] = [10,10,0]
        };
    ).directive('chartData', ->
            drawChart = (elementId, data) ->
               chart = new AmCharts.AmPieChart()
               chart.dataProvider = data
               chart.titleField = ""name""
               chart.valueField = ""percentage""
               chart.colorField = ""color""
               chart.labelsEnabled = false
               chart.pullOutRadius = 0
               chart.depth3D = 20
               chart.angle = 45
               legend = new AmCharts.AmLegend()
               legend.makerType = ""square""
               legend.align = ""center""
               chart.addLegend legend

 
               chart.write elementId
               chart;

 
            (scope, element, attr) ->
              
                  scope.already.push( ->
                     data = scope.$eval(attr.chartData);
                     drawChart(element[0].id, data);
                  ) if element[0].id
    )

 
report = ($scope, $window, $http, $requestUrl, $dynamicColor) ->
    $scope.already = []
    $window.angularJsonpCallBack = (data) ->
         @data = data
         getObjectByKey = (msr , key) ->
            m for m in msr when m.key == key
        
         $scope.gridSource = $scope.projects = data

 
         ready = (queues) -> angular.forEach(queues, (q) -> q() )
         ready $scope.already

 
    $scope.getLanguageChartData = ->
         data = _.groupBy $scope.projects , (project) -> project.lang
         $dynamicColor.reset()
         chartData = _.map(data, (array, key) ->
                      ""name"":key
                      ""percentage"":array.length,
                      ""color"":$dynamicColor.getColor())

 
         _.sortBy(chartData, (num) -> num.percentage )
 
    $scope.search = ->
        source = []
        if not this.searchName
            source = @projects
        else
            source = _.filter @projects, (p) ->
                       p.name.toLowerCase().indexOf $scope.searchName.toLowerCase() != -1
      
        source = _.sortBy(source, (p) -> p[$scope.sortCondition.key].toLowerCase()) if @sortCondition and @sortCondition.key
         
        source.reverse() if  @sortCondition.sort and not @sortCondition.sort[$scope.sortCondition.key]
       
        @gridSource = source

 
    $scope.sort = (name) ->
        @sortCondition ?= {}
        @sortCondition.sort ?= {}
        @sortCondition.key = name
        @sortCondition.sort[name] = not @sortCondition.sort[name]
        @search();

 
    $scope.init = ->
        $http.jsonp  ""#{$requestUrl}?callback=angularJsonpCallBack""
 
app.controller ""report"", report

最终编译的JavaScript为：

var app, report;

app = angular.module('app', []).value(""$host"", ""//nemo.sonarsource.org"").factory(""$requestUrl"", function($host) {
  return """" + $host + ""/api/resources"";
}).factory(""$dynamicColor"", function($host) {
  var b, g, r, _ref;
  _ref = [10, 10, 0], r = _ref[0], g = _ref[1], b = _ref[2];
  return {
    getColor: function() {
      var _ref1;
      _ref1 = [r + 100, g + 400, b + 200], r = _ref1[0], g = _ref1[1], b = _ref1[2];
      return ""#"" + ((r + 256 * g + 65536 * b).toString(16));
    },
    reset: function() {
      var _ref1;
      return _ref1 = [10, 10, 0], r = _ref1[0], g = _ref1[1], b = _ref1[2], _ref1;
    }
  };
}).directive('chartData', function() {
  var drawChart;
  drawChart = function(elementId, data) {
    var chart, legend;
    chart = new AmCharts.AmPieChart();
    chart.dataProvider = data;
    chart.titleField = ""name"";
    chart.valueField = ""percentage"";
    chart.colorField = ""color"";
    chart.labelsEnabled = false;
    chart.pullOutRadius = 0;
    chart.depth3D = 20;
    chart.angle = 45;
    legend = new AmCharts.AmLegend();
    legend.makerType = ""square"";
    legend.align = ""center"";
    chart.addLegend(legend);
    chart.write(elementId);
    return chart;
  };
  return function(scope, element, attr) {
    if (element[0].id) {
      return scope.already.push(function() {
        var data;
        data = scope.$eval(attr.chartData);
        return drawChart(element[0].id, data);
      });
    }
  };
});

report = function($scope, $window, $http, $requestUrl, $dynamicColor) {
  $scope.already = [];
  $window.angularJsonpCallBack = function(data) {
    var getObjectByKey, ready;
    this.data = data;
    getObjectByKey = function(msr, key) {
      var m, _i, _len, _results;
      _results = [];
      for (_i = 0, _len = msr.length; _i < _len; _i++) {
        m = msr[_i];
        if (m.key === key) {
          _results.push(m);
        }
      }
      return _results;
    };
    $scope.gridSource = $scope.projects = data;
    ready = function(queues) {
      return angular.forEach(queues, function(q) {
        return q();
      });
    };
    return ready($scope.already);
  };
  $scope.getLanguageChartData = function() {
    var chartData, data;
    data = _.groupBy($scope.projects, function(project) {
      return project.lang;
    });
    $dynamicColor.reset();
    chartData = _.map(data, function(array, key) {
      return {
        ""name"": key,
        ""percentage"": array.length,
        ""color"": $dynamicColor.getColor()
      };
    });
    return _.sortBy(chartData, function(num) {
      return num.percentage;
    });
  };
  $scope.search = function() {
    var source;
    source = [];
    if (!this.searchName) {
      source = this.projects;
    } else {
      source = _.filter(this.projects, function(p) {
        return p.name.toLowerCase().indexOf($scope.searchName.toLowerCase() !== -1);
      });
    }
    if (this.sortCondition && this.sortCondition.key) {
      source = _.sortBy(source, function(p) {
        return p[$scope.sortCondition.key].toLowerCase();
      });
    }
    if (this.sortCondition.sort && !this.sortCondition.sort[$scope.sortCondition.key]) {
      source.reverse();
    }
    return this.gridSource = source;
  };
  $scope.sort = function(name) {
    var _base, _ref, _ref1;
    if ((_ref = this.sortCondition) == null) {
      this.sortCondition = {};
    }
    if ((_ref1 = (_base = this.sortCondition).sort) == null) {
      _base.sort = {};
    }
    this.sortCondition.key = name;
    this.sortCondition.sort[name] = !this.sortCondition.sort[name];
    return this.search();
  };
  return $scope.init = function() {
    return $http.jsonp("""" + $requestUrl + ""?callback=angularJsonpCallBack"");
  };
};

app.controller(""report"", report);