एंगुलरजेएस उन डेवलपर्स के लिए बनाया गया था जो मानते हैं कि यूआई बनाने के लिए एक घोषणात्मक शैली बेहतर है, और व्यापार तर्क के लिए एक जरूरी है।
झेन कोणीय
- DOM के हेरफेर को एप्लिकेशन लॉजिक से अलग करना अच्छा है। यह कोड परीक्षण क्षमता में बहुत सुधार करता है।
- यह मान लेना अच्छा है कि स्वचालित एप्लिकेशन परीक्षण केवल अनुप्रयोग लिखने के रूप में महत्वपूर्ण है। परीक्षणशीलता इस बात पर बहुत निर्भर करती है कि कोड कैसे संरचित है।
- क्लाइंट के विकास को सर्वर से अलग करना अच्छा है। यह समानांतर विकास की अनुमति देता है और दोनों पक्षों में पुन: उपयोग में सुधार करता है।
- यह अच्छा है जब रूपरेखा एप्लिकेशन के संपूर्ण विकास चक्र के दौरान डेवलपर को निर्देशित करती है: व्यवसाय तर्क लिखने के माध्यम से परीक्षण करने के लिए यूआई को डिजाइन करने से।
- यह अच्छा है जब सामान्य कार्य तुच्छ हो जाते हैं, और जटिल कार्य सरल हो जाते हैं।
AngularJS एक व्यापक ढांचा है। मानक पैकेज में, यह निम्नलिखित विशेषताएं प्रदान करता है:
- आपको केवल CRUD एप्लिकेशन बनाने की आवश्यकता है: डेटा-बाइंडिंग, बेसिक टेम्प्लेट डायरेक्टिव्स, फॉर्म वेलिडेशन, राउटिंग, डीप लिंकिंग, कंपोनेंट रीयूज, डिपेंडेंसी इंजेक्शन, सर्वर (रेस्टफुल) डेटा स्रोतों के साथ बातचीत के लिए उपकरण।
- आपको परीक्षण की आवश्यकता है: यूनिट परीक्षण, एंड-टू-एंड परीक्षण, मॉक के लिए उपकरण।
- एक नमूना अनुप्रयोग टेम्पलेट जिसमें निर्देशिका संरचना और परीक्षण स्क्रिप्ट शामिल हैं।
AngularJS Google कर्मचारियों द्वारा विकसित किया गया है और इसका उपयोग कम से कम एक Google सेवा -
DoubleClick में किया जाता है ।
उदाहरण
एक साधारण टूडू-कैबिनेट
<div ng-app> <h2>Todo</h2> <div ng-controller="TodoCtrl"> <span>{{remaining()}} of {{todos.length}} remaining</span> [ <a href="" ng-click="archive()">archive</a> ] <ul class="unstyled"> <li ng-repeat="todo in todos"> <input type="checkbox" ng-model="todo.done"> <span class="done-{{todo.done}}">{{todo.text}}</span> </li> </ul> <form ng-submit="addTodo()"> <input type="text" ng-model="todoText" size="30" placeholder="add new todo here"> <input class="btn-primary" type="submit" value="add"> </form> </div> </div>
function TodoCtrl($scope) { $scope.todos = [ {text:'learn angular', done:true}, {text:'build an angular app', done:false}]; $scope.addTodo = function() { $scope.todos.push({text:$scope.todoText, done:false}); $scope.todoText = ''; }; $scope.remaining = function() { var count = 0; angular.forEach($scope.todos, function(todo) { count += todo.done ? 0 : 1; }); return count; }; $scope.archive = function() { var oldTodos = $scope.todos; $scope.todos = []; angular.forEach(oldTodos, function(todo) { if (!todo.done) $scope.todos.push(todo); }); }; }
कार्रवाई में, आप
angularjs.org होमपेज देख सकते हैं। कई उदाहरण भी वहां प्रस्तुत किए गए हैं:
- "द बेसिक्स" डेटाबाइंडिंग का एक सरल चित्रण है।
- "कुछ नियंत्रण जोड़ें" एक टूडू-कैबिनेट है जिसका कोड मैंने यहां प्रदान किया है।
- "वायर अ बैकएंड" मोंगोलैब में राउटिंग और डेटा स्टोरेज के साथ रिकॉर्ड बनाने / संग्रहीत / संपादित करने के लिए एक सरल अनुप्रयोग है।
- "घटक बनाएँ" - पुन: प्रयोज्य घटकों का निर्माण।
अधिक उदाहरण:
- todovc से टूडू ( डेमो , कोड ) - एक ही समय में, आप इसे अन्य रूपरेखाओं के साथ तुलना कर सकते हैं;
- बिल्टविथ.नंगुलरज ..org : 18 (पोस्ट लिखने के समय) एप्लिकेशन, जिनमें से अधिकांश के लिए स्रोत कोड उपलब्ध है;
- AngularUI - तीसरे पक्ष के डेवलपर्स से विभिन्न फिल्टर और निर्देश (कई मायनों में यूआई वाले)।
AngularJS अवधारणाओं
दिशा निर्देशों
एंगुलरजेएस का लगभग संपूर्ण घोषणात्मक भाग निर्देशों पर आधारित है। वे HTML सिंटैक्स को समृद्ध करने के लिए उपयोग किए जाते हैं। DOM के संकलन के दौरान, निर्देशों को HTML से लिया जाता है और निष्पादित किया जाता है। निर्देश कुछ नया व्यवहार जोड़ सकते हैं और / या DOM को संशोधित कर सकते हैं। मानक पैकेज में वेब अनुप्रयोगों के निर्माण के लिए काफी बड़ी संख्या में निर्देश शामिल हैं। लेकिन एक प्रमुख विशेषता उनके स्वयं के निर्देशों को विकसित करने की क्षमता है, जिससे एचटीएमएल को डीएसएल में बदल दिया जा सकता है।
निर्देशों का नाम लोकेमसेलकैसे का उपयोग करके रखा गया है, उदाहरण के लिए, ngBind। उपयोग करते समय, निर्देश को निचले मामले में विभाजक के रूप में विशेष वर्णों में से एक का उपयोग करके नाम दिया जाना चाहिए
: ,
- , या
_ । वैकल्पिक रूप से, आप वैध कोड प्राप्त करने के लिए
x- या
data- उपसर्गों का उपयोग कर सकते हैं। उदाहरण:
ng:bind ,
ng-bind ,
ng_bind ,
x-ng-bind और
data-ng-bind ।
निर्देशों का उपयोग एक तत्व के रूप में किया जा सकता है (
<my-directive></my-directive> ), एक विशेषता (), एक वर्ग में (), या एक टिप्पणी में ()। यह इस बात पर निर्भर करता है कि एक विशेष निर्देश कैसे विकसित किया गया था।
डेवलपर के मार्गदर्शिका में निर्देशों के बारे में और पढ़ें ।
स्कोप-s
स्कोप एप्लिकेशन में मॉडल से संबंधित वस्तु है। यह अभिव्यक्ति के लिए निष्पादन संदर्भ है। डोम के समान एक पदानुक्रमित संरचना में स्कोप की व्यवस्था की जाती है। इसी समय, वे अपने मूल क्षेत्र से गुण प्राप्त करते हैं।
नियंत्रक और दृश्य के बीच स्कोप गोंद की तरह होते हैं। टेम्पलेट बाइंडिंग चरण को निष्पादित करने की प्रक्रिया में, निर्देशों ने दायरे के भीतर अभिव्यक्तियों के लिए घड़ी (
$watch ) निर्धारित की।
$watch एक अद्यतन मूल्य या कुछ अन्य कार्रवाई को प्रदर्शित करने के लिए परिवर्तनों का जवाब देने की क्षमता का निर्देश देती है। दोनों नियंत्रकों और निर्देशों में गुंजाइश का संदर्भ है, लेकिन एक दूसरे के संदर्भ नहीं हैं। इसलिए नियंत्रक निर्देशों से और DOM से अलग-थलग हैं। इसके कारण, एप्लिकेशन का परीक्षण करने की क्षमता बढ़ जाती है।
डेवलपर के मार्गदर्शिका में गुंजाइश के बारे में अधिक पढ़ें ।
सेवाएं
सेवाएं सिंगलटन एस हैं जो एक विशिष्ट कार्य करते हैं जो सभी के लिए या एक विशिष्ट वेब एप्लिकेशन के लिए सामान्य है। उदाहरण के लिए,
$ http सेवा , जो XMLHttpRequest पर एक आवरण है। अन्य सेवाओं के कुछ उदाहरण (पूरी सूची के
लिए दस्तावेज देखें):
- $ संकलन - एक HTML स्ट्रिंग या DOM के भाग को एक टेम्पलेट में संकलित करना , टेम्पलेट को एक विशिष्ट दायरे से जोड़ना;
- $ कुकीज़ - कुकीज़ को पढ़ने / लिखने के लिए पहुँच प्रदान करता है।
- $ स्थान - पता बार के साथ काम करें
- $ संसाधन - सर्वर (रेस्टफुल) डेटा स्रोतों के साथ बातचीत के लिए संसाधन ऑब्जेक्ट बनाने के लिए एक कारखाना;
किसी सेवा का उपयोग करने के लिए, आपको इसे नियंत्रक, अन्य सेवा, निर्देश आदि के लिए निर्भरता के रूप में निर्दिष्ट करना होगा। एंगुलरजेएस बाकी की देखभाल करता है - बनाना, निर्भरता का समाधान करना, आदि।
डेवलपर की मार्गदर्शिका में सेवाओं के बारे में अधिक पढ़ें ।
फिल्टर
फ़िल्टर को उपयोगकर्ता को प्रदर्शित करने से पहले डेटा को प्रारूपित करने के लिए डिज़ाइन किया जाता है, साथ ही साथ संग्रह में आइटमों को फ़िल्टर किया जाता है। फिल्टर के उदाहरण (एक पूरी सूची
प्रलेखन में पाई जा सकती है):
मुद्रा ,
तिथि ,
क्रम ,
अपरकेस । फिल्टर का उपयोग करना बहुत पारंपरिक है:
{{ expression | filter1 | filter2 }} {{ expression | filter1 | filter2 }}डेवलपर की मार्गदर्शिका में फ़िल्टर के बारे में और पढ़ें ।
मॉड्यूल
AngularJS में एप्लिकेशन का प्राथमिक निष्पादन योग्य तरीका नहीं है। इसके बजाय, मॉड्यूल यह बताता है कि आवेदन कैसे डाउनलोड किया जाना चाहिए। इसके कारण, उदाहरण के लिए, परीक्षण स्क्रिप्ट लिखते समय, आप अतिरिक्त मॉड्यूल लोड कर सकते हैं जो कुछ सेटिंग्स को ओवरराइड करेगा, जिससे जटिल (एंड-टू-एंड) परीक्षण की सुविधा होगी।
डेवलपर की मार्गदर्शिका में मॉड्यूल के बारे में और पढ़ें ।
परीक्षण
जैसा कि डेवलपर्स लिखते हैं, परीक्षण के लिए उन्होंने AngularJS में बहुत कुछ किया, इसलिए यदि आप अपने आवेदन का परीक्षण नहीं करते हैं तो कुछ भी आपको बहाना नहीं दे सकता :)
परीक्षण e2e परिदृश्य का एक उदाहरण:
describe('Buzz Client', function() { it('should filter results', function() { input('user').enter('jacksparrow'); element(':button').click(); expect(repeater('ul li').count()).toEqual(10); input('filterText').enter('Bees'); expect(repeater('ul li').count()).toEqual(1); }); });
यूनिट के परीक्षण और डेवलपर के गाइड में ई 2 ई
परीक्षण के बारे में और पढ़ें।
अंगुलरजेएस बतरंग
यह
Chrome के लिए एक
एक्सटेंशन है जो AngularJS एप्लिकेशन को डीबग करना आसान बनाता है। यह आपको स्कोप्स के पदानुक्रम के साथ काम करने की अनुमति देता है, एक आवेदन को प्रोफाइल करना संभव बनाता है, सेवाओं के बीच निर्भरता की कल्पना करता है, तत्वों के पृष्ठ पर स्कोप की सामग्री को प्रदर्शित करता है, आपको कंसोल से स्कोप में मानों को प्रदर्शित करने और बदलने की अनुमति देता है।
गीथुब पर पृष्ठ पर अच्छा पाठ विवरण।
Youtube पर अच्छा वीडियो
और क्या पढ़ना है