Angularjs示例：Sonar中项目使用语言分布图（CoffeeScript版）

Angularjs示例：Sonar中项目使用语言分布图（CoffeeScript版）2013-02-14 破狼关于SonarLanguage是什么东东，这里就不在描述了，如果你对它感兴趣的话，请移步到上篇随笔开源：Angularjs示例--Sonar中项目使用语言分布图。这里是最近学习CoffeeScript的练习版。

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

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

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

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

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

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

代码如下：

app = angular.module（"app", []） .value（"$host", "http://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 = datachart.titleField = "name"chart.valueField = "percentage"chart.colorField = "color"chart.labelsEnabled = falsechart.pullOutRadius = 0chart.depth3D = 20chart.angle = 45legend = new AmCharts.AmLegend（）legend.makerType = "square"legend.align = "center"chart.addLegend legendchart.write elementIdchart;（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 = datagetObjectByKey = （msr , key） -> m for m in msr when m.key == key $scope.gridSource = $scope.projects = dataready = （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