CoffeeScript और AngularJS

अलेक्जेंडर हिल CoffeeScript और AngularJS द्वारा लेख का अनुवाद। यह मेरा पहला अनुवाद है और मुझे कोई भी टिप्पणी और सुधार प्राप्त करने में खुशी होगी।

AngularJS और CoffeeScript एक शानदार संयोजन है, भले ही CoffeeScript AngularJS समुदाय में बहुत लोकप्रिय नहीं है। यह लेख कुछ तरकीबों को पेश करेगा, जो आपके AngularJS कोड को "आसानी" करेगा।

फ़ंक्शन परिभाषा का संक्षिप्त रिकॉर्ड

कोणीय बड़ी संख्या में अनाम कार्यों का उपयोग करता है, और परिणामस्वरूप, फ़ंक्शन परिभाषा के एक छोटे रिकॉर्ड का उपयोग करके बहुत समय बचा सकता है। एक उदाहरण के रूप में, आइए एक 'एंटर कुंजी' निर्देश बनाएँ जो एक विलम्ब के साथ एंटर कुंजी दबाकर किसी अभिव्यक्ति का मूल्यांकन करता है। बेशक, यह निर्देश व्यावहारिक महत्व नहीं रखता है, लेकिन यह एक विचार देना चाहिए कि एंगुलरजेएस और कॉफीस्क्रिप्ट कैसे बातचीत करते हैं।
तो हम कैसे उपयोग करते हैं:

<input enter-key="submit()" enter-key-delay="10" /> 

जावास्क्रिप्ट कोड:

 app.directive('enterKey', function ($timeout) { return function (scope, elem, attrs) { elem.bind('keydown', function (e) { if (e.keyCode === 13) { $timeout(function () { scope.$apply(attrs.enterKey); }, +attrs.enterKeyDelay); } }); } }); 

इसकी तुलना कॉफीस्क्रिप्ट से करें:

 app.directive 'enterKey', ($timeout) -> (scope, elem, attrs) -> elem.bind 'keydown', (e) -> if e.keyCode is 13 $timeout -> scope.$apply attrs.enterKey , +attrs.enterKeyDelay 

CoffeeScript में, प्रतीक -> एक फ़ंक्शन को परिभाषित करने के लिए उपयोग किया जाता है जिसके सामने कोष्ठक में संलग्न पैरामीटर हैं। यदि फ़ंक्शन का कोई पैरामीटर नहीं है, तो कोष्ठक की आवश्यकता नहीं है, एक उदाहरण $ टाइमआउट में पारित फ़ंक्शन है।
हमने कोड की 10 पंक्तियों में फ़ंक्शन कीवर्ड के 4 बार उपयोग से परहेज किया, जबकि कोड अधिक पठनीय हो गया और इसे लिखने का समय कम हो गया। इसके बाद से रिटर्न स्टेटमेंट का उपयोग करने की भी आवश्यकता नहीं है कॉफीस्क्रिप्ट (रूबी की तरह) स्वचालित रूप से एक फ़ंक्शन में अंतिम अभिव्यक्ति का मान लौटाता है।

स्वचालित रिटर्न

स्वचालित (या निहित) रिटर्न एक और लाभ है जो लिखने को कोणीय कोड को तेज और आसान बनाता है। नीचे कुछ उदाहरण दिए गए हैं जहां आप स्वचालित रिटर्न की उपयोगिता देख सकते हैं। बेशक, अंतर बड़ा नहीं है, लेकिन एक बड़ी परियोजना में यह ध्यान देने योग्य होगा।

फिल्टर

 app.filter('capitalise', function (str) { return str.charAt(0).toUpperCase() + str.slice(1); }); 

 app.filter 'capitalise', (str) -> str.charAt(0) + str[1..] 

इस उदाहरण में बोनस str.slice (1) बनाम सरणी का एक हिस्सा प्राप्त करने के लिए वाक्यविन्यास है str [१ ..] ।

फ़ैक्टरी

 app.factory('urlify', function (text) { // nb:       return text.toLowerCase().replace(" ", ""); }); 

 app.factory 'urlify', (text) -> text.toLowerCase().replace " ", "" 

निर्देश (फिर से)

इस मामले में, हम ऑब्जेक्ट डेफिनेशन डायरेक्टिव का उपयोग करते हैं। कॉफीस्क्रिप्ट ऑटोमैटिक रिटर्न, YAML ऑब्जेक्ट-स्टाइल सिंटैक्स और फ़ंक्शन परिभाषाओं के एक छोटे रिकॉर्ड का उपयोग करके कोड को अधिक पठनीय बनाते हैं। निम्नलिखित उदाहरण AngularJS प्रलेखन से लिया गया है।

 app.directive('directiveName', function factory(injectables) { return { priority: 0, template: '<div></div>', templateUrl: 'directive.html', replace: false, transclude: false, restrict: 'A', scope: false, controller: function ($scope, $element, $attrs, $transclude, otherInjectables) { ... }, compile: function compile(tElement, tAttrs, transclude) { return { pre: function preLink(scope, iElement, iAttrs, controller) { ... }, post: function postLink(scope, iElement, iAttrs, controller) { ... } } }, link: function postLink(scope, iElement, iAttrs) { ... } } }); 

 app.directive 'directiveName', (injectables) -> priority: 0 template: '<div></div>' templateUrl: 'directive.html' replace: false transclude: false restrict: 'A' scope: false controller: ($scope, $element, $attrs, $transclude, otherInjectables) -> ... compile: (tElement, tAttrs, transclude) -> pre: (scope, iElement, iAttrs, controller) -> ... post: (scope, iElement, iAttrs, controller) -> ... link: (scope, iElement, iAttrs) -> ... 

स्वचालित रिटर्न और ऑब्जेक्ट सिंटैक्स का उपयोग ऑब्जेक्ट डेफिनेशन डायरेक्टिव और कंपाइल फंक्शन के अंदर दोनों के लिए किया जाता है।

कक्षाएं

कॉफीस्क्रिप्ट में, भाषा सुविधाओं में कक्षाएं सबसे सुखद समावेश हैं। यहाँ वे क्या दिखते हैं:

 class Animal constructor: (@name) -> move: (meters) -> alert @name + " moved #{meters}m." snake = new Animal('snake') snake.move(10) # alerts "snake moved 10m." 

CoffeeScript में, @ प्रतीक इसके लिए एक छोटी संकेतन है। इसलिए, @name यह बन जाएगा । इसके अलावा, एक फंक्शन पैरामीटर में @ सिंबल को जोड़ने से यह स्वचालित रूप से इसमें जुड़ जाता है, जैसा कि एनिमल कंस्ट्रक्टर में देखा जाता है।
यहाँ समान जावास्क्रिप्ट कोड का एक उदाहरण दिया गया है। बेशक, यह संकलित कॉफीस्क्रिप्ट कोड के समान नहीं है, लेकिन कार्यात्मक रूप से समतुल्य है।

 function Animal(name) { this.name = name; } Animal.prototype.move = function (meters) { alert(this.name + "moved" + meters + "m.") } var snake = new Animal('snake') snake.move(10) // alerts "snake moved 10m.", as before 

CoffeeScript एक नामित फ़ंक्शन बनाता है और इसके प्रोटोटाइप में विधियाँ जोड़ता है। कोणीय में, यह दो मामलों में उपयोगी है: सेवाओं में और नए नियंत्रक सिंटैक्स के साथ।

सेवाएं

जबकि फ़ैक्टरी फ़ंक्शन को सीधे दूसरे फ़ंक्शन में जोड़ा जाएगा, सेवा के मामले में, इसे जोड़ने से पहले एक उदाहरण बनाया जाएगा। मतभेदों का अधिक विस्तृत विवरण इस लेख में पाया जा सकता है।
एक सेवा का एक उदाहरण ऊपर वर्णित लेख से लिया गया है:

 var gandalf = angular.module('gandalf', []); function Gandalf() { this.color = 'grey'; } Gandalf.prototype.comeBack = function () { this.color = 'white'; } gandalf.service('gandalfService', Gandalf); var injector = angular.injector(['gandalf', 'ng']); injector.invoke(function (gandalfService) { console.log(gandalfService.color); gandalfService.comeBack() console.log(gandalfService.color); }); 

यह कॉफी कोड से संकलित जावास्क्रिप्ट कोड जैसा दिखता है। इसलिए, प्रोटोटाइप फ़ंक्शन को सीधे संपादित करने के बजाय, हम कॉफीस्क्रिप्ट क्लास का उपयोग कर सकते हैं:

 gandalf = angular.module 'gandalf', [] gandalf.service 'gandalfService', class Gandalf constructor: -> @color = 'grey' comeBack: -> @color = 'white' injector = angular.injector ['gandalf', 'ng'] injector.invoke (gandalfService) -> console.log gandalfService.color gandalfService.comeBack() console.log gandalfService.color 

यहां हम क्लास को सर्विस फंक्शन में पास करते हैं। आप इसे सेवा से पहले परिभाषित कर सकते हैं और फिर सेवा में स्थानांतरित कर सकते हैं, लेकिन मैं वर्ग को सेवा के माध्यम से विशेष रूप से उपलब्ध होना पसंद करता हूं।
निर्भरता इंजेक्शन दिखाने के लिए, चलो एक गैंडेफ बनाते हैं जो $ टाइमआउट सेवा का उपयोग करके देरी के साथ "रिटर्न" करता है।

 gandalf.service 'gandalfService', class Gandalf constructor: (@$timeout) -> @color = 'grey' comeBack: (time) -> # ' '  coffeescript      #  'this',  @color -     ,   . @$timeout => @color = 'white' , time 

तर्कों में परिवर्तनशील नाम $ टाइमआउट होगा , इसलिए कोणीय निर्भरता इंजेक्शन काम करना जारी रखेगा। किसी ऑब्जेक्ट के लिए निर्भरता जोड़ना हमें विधियों में उनके लिए उपयोग करने की अनुमति देता है, उदाहरण के लिए, वापसी ।

नियंत्रकों

AngularJS 1.1.5 नए नियंत्रक वाक्यविन्यास का परिचय देता है। आप विवरण के लिए वीडियो देख सकते हैं, लेकिन अनिवार्य रूप से नया सिंटैक्स एक गुंजाइश फ़ंक्शन के बजाय कक्षा को नियंत्रक के रूप में पारित करने की अनुमति देता है। इसलिए, AngularJS पृष्ठ पर टूडूलिस्ट उदाहरण का HTML कोड इस तरह दिखेगा:

 <body ng-app="todoApp"> <div ng-controller="TodoCtrl as todos"> <span>{{todos.remaining()}} of {{todos.list.length}} remaining</span> [<a href="" ng-click="todos.archive()">archive</a>] <ul> <li ng-repeat="todo in todos.list"> <input type="checkbox" ng-model="todo.done"> <span class="done-{{todo.done}}">{{todo.text}}</span> </li> </ul> <form ng-submit="todos.addTodo()"> <input type="text" ng-model="todos.input" placeholder="add a new todo"> <input type="submit" value="add"> </form> </div> </body> 

और इस CoffeeScript वर्ग को एक नियंत्रक के रूप में उपयोग करें:

 app = angular.module 'todoApp', [] app.controller 'TodoCtrl', class TodoCtrl list: [ text: "learn coffescript" done: false , text: "learn angular" done: true ] addTodo: -> @list.push text: @input done: false @input = '' remaining: -> count = 0 for todo in @list count += if todo.done then 0 else 1 count archive: -> oldList = @list @list = [] for todo in oldList unless todo.done @list.push todo 

निष्कर्ष

जैसा कि आप देख सकते हैं, कॉफीस्क्रिप्ट AngularJS के लिए एक बेहतरीन साथी है। हालांकि हर किसी के लिए नहीं, कॉफ़ीस्क्रिप्ट की रिकॉर्डिंग की आसानी इसकी खामियों को दूर करती है।
कई अन्य उपयोगी कार्य हैं जिनका मैंने इस लेख में उल्लेख नहीं किया है, जैसे: डिफ़ॉल्ट पैरामीटर , अस्तित्वगत ऑपरेटर , सरणियाँ और ऑब्जेक्ट । यह सब कॉफीस्क्रिप्ट को प्रोग्राम लिखने के लिए एक सुखद और उत्पादक भाषा बनाता है। यदि आपने इसका उपयोग करने की संभावना पर विचार नहीं किया है, तो अधिक जानकारी के लिए आधिकारिक वेबसाइट पर जाएं ।