AngularJS बनाम IML

डिस्क्लेमर : तुलना का अर्थ यह नहीं है कि एक "होलिवर" बढ़ रहा है, बल्कि उन कार्यों का अवलोकन देता है जो एक टूल दूसरे की तुलना में हल करता है। मैं कोणीयज की सभी पेचीदगियों का विशेषज्ञ नहीं हूं, लेकिन इस उपकरण के बारे में 10 लेख पढ़ने के बाद, मैं IML में समान समस्याओं को हल करने का एक वैकल्पिक उदाहरण देता हूं।

हम क्या तुलना करेंगे?

• नियंत्रक
• विरासत
  नोट: IML में नहीं
  
• सर्वर तक पहुँचने
• डेटा पुश करें
• फॉर्म जमा करें
• खाका
• वादे
  ध्यान दें: यह आईएमएल में अनुपस्थित है और केवल तभी काम कर सकता है जब तीसरे पक्ष की सेवाओं के साथ काम कर रहा हो, और सब कुछ हल करने के लिए डेटा की स्मार्ट पसंद की मदद से हल किया जाता है।
  

मैंने उन विशेषताओं को चुना जो समझ में आते हैं, क्योंकि asp.net mvc के ढांचे के भीतर मुझे चर, स्थिरांक, साथ ही साथ स्थानीयकरण समर्थन में कोई लाभ नहीं दिखता है।
नोट: इसके बाद अक्सर यह ध्यान में रखा जाएगा कि विकास asp.net mvc के ढांचे के भीतर होता है

हम कैसे तुलना करेंगे?

तकनीक बहुत सरल है, मैं AngularJS (View and Js) और IML (केवल देखें) विकल्प उद्धृत करता हूं, आगे मैं तर्क देता हूं कि IML बेहतर क्यों है। मैं केवल पेशेवरों को उजागर करूंगा, लेकिन टिप्पणियों में IML के नकारात्मक पहलुओं को देखकर मुझे खुशी होगी, इसलिए मेरी सभी टिप्पणियां की जा सकती हैं।

नियंत्रक

कोणीय जेएस दृश्य

<div ng-controller="angularController"> <button ng-click="sayHello()">Say</button> </div> 

कोणीय js

 app.controller('angualrController', function ($scope) { $scope.sayHello = function(){ alert('Hello') } }); 

IML

 @(Html.When(JqueryBind.Click) .Do() .Direct() .OnSuccess(dsl => dsl.Utilities.Window.Alert("Hello")) .AsHtmlAttributes() .ToButton("Say")) 

बेहतर:

• व्यवहार और मार्कअप एक साथ
  नोट: कई लोगों के लिए, यह क्षण विवादास्पद लगता है, क्योंकि तर्क पृष्ठ बिल्डरों के काम को जटिल करता है, लेकिन asp.net mvc के ढांचे के भीतर, सी # कोड इन व्यू (cshtml) एक अभिन्न अंग है और इसलिए जो लाभ प्राप्त किए जा सकते हैं, वे पूरी तरह से अति सार को ओवरलैप कर सकते हैं तर्क विकास मॉडल मार्कअप से अलग है।
  
• Initilesence सहायता
  नोट: AngularJs विशेषताएँ एक html मानक नहीं हैं, इसलिए कोई सिंटैक्स हाइलाइटिंग या ऑटो-पूरा नहीं होगा, और IML एक C # लाइब्रेरी है।
  
• घटनाएँ झंडे का प्रतिनिधित्व करती हैं।
  ध्यान दें: जब आप किसी अन्य घटना (JqueryBind.Click | JqueryBind.ocus) के लिए कार्यों की नकल करने की आवश्यकता होती है, तो समूह बनाना सरल करता है।
  
• घटना व्यवहार प्रबंधन (डिफ़ॉल्ट रोकें, प्रचार बंद करें)
  नोट: AngularJS आपको इसे नियंत्रक विधि के हिस्से के रूप में प्रबंधित करने की अनुमति देता है, लेकिन IML में इसे सामान्य योजना के भाग के रूप में शामिल किया गया है
  

सर्वर तक पहुँचने

सर्वर कोड

 public ActionResult Get(GetProductByCodeQuery query) { List vms = dispatcher.Query(query); return IncJson(vms); // for AngularJs need use Json with AllowGet } 

नोट: सर्वर पक्ष AngularJS और IML दोनों के लिए समान है

कोणीय html

 <div ng-conroller="productController"> @Html.TextBoxFor(r => r.Code) <label>{{model.Name}}</label> <button>Get name</button> </div> 

कोणीय js

 kitchen.controller('productController', function ($scope, $http) { $scope.get = function(){ $http.get({ url:'product/get', params:{Code:$('[Name="Code"]').val()} }) .success(function(data) { $scope.Name = data.Name }); } }); 

IML

 @{ var labelId = Guid.NewGuid().ToString(); } @Html.TextBoxFor(r=>r.Code) @(Html.When(JqueryBind.Click) .Do() .AjaxGet(Url.Action("Product","Get",new { Code = Html.Selector().Name(r=>r.Code) }) .OnSuccess(dsl => dsl.WithId(labelId).Core().Insert.For(r=>r.Name).Text()) .AsHtmlAttributes() .ToButton("Get name")) 

ध्यान दें: जब एक url का निर्माण करते हैं, तो आप न केवल रूट के रूप में एक अनाम वस्तु का उपयोग कर सकते हैं, बल्कि Url.Action ("उत्पाद", "गेट", नया GetProductQuery) () {कोड = Html.Selector () का नाम भी उपयोग कर सकते हैं। (r => r.Code)})

बेहतर:

• सभी चरणों में टाइपिंग
  
  • Url - AngularJs में पता सर्वर साइड के बिना बनाया गया है, जो खाते में रूट लेने की अनुमति नहीं देता है और कोड से एक्शन (नाम बदलने) में असमर्थता है।
    ध्यान दें: चूंकि AngularJs मैनुअल किसी बाहरी फ़ाइल में जावास्क्रिप्ट कोड की सिफारिश करता है, इस कारण से js कोड के भीतर सर्वर वेरिएबल्स का उपयोग करना संभव नहीं होगा।
    
  • प्रश्न - AngularJs सर्वर मॉडल से जुड़ा नहीं है और एक मॉडल आरेख प्राप्त करने की अनुमति नहीं देता है, जो कि Url के मामले में, नाम बदलने और घोषणा में जाने के लिए उपकरणों के उपयोग की अनुमति नहीं देता है
    ध्यान दें: IML के मामले में, यदि हम नाम या कोड फ़ील्ड को GetProductQuery का नाम देते हैं, तो परिवर्तन क्लाइंट भाग में दिखाई देंगे, लेकिन AngularJ के लिए {{model.Name}} और $ ([नाम = "कोड"] को प्रतिस्थापित करना आवश्यक होगा। ) नए मूल्यों के लिए।
    
  • चयनकर्ता - IML के भीतर अनुरोध पैरामीटर निर्दिष्ट करने के लिए, आप डोम (हैश, कुकीज, जेएस वैरिएबल और आदि) ऑब्जेक्ट्स से मान प्राप्त करने के लिए एक शक्तिशाली टूल का उपयोग कर सकते हैं
  
  
• MVD

यदि आप एमवीडी को url के रूप में उपयोग करते हैं, तो आप इंकोडिंग फ्रेमवर्क में, अतिरिक्त नियंत्रक और कार्रवाई लिखे बिना कर सकते हैं

 Url.Dispatcher().Query(new GetProductQuery() {Code = Html.Selector().Name(r=>r.Code)}).AsJson() 

डेटा पुश करें

सर्वर कोड

 public ActionResult Add(AddCommand input) { dispatcher.Push(input); return IncJson(); // for AngularJS need use Json() } 

नोट: सर्वर पक्ष AngularJS और IML दोनों के लिए समान है

कोणीय दृश्य

 <div ng-controller="productController"> @Html.TextBoxFor(r => r.Name) @Html.CheckboxFor(r => r.IsGood) <button ng-click="add"> Add </button> </div> 

कोणीय js

 kitchen.controller('productController', function ($scope, $http) { $scope.add = function(){ $http({ url: 'product/Add', method: "POST", data: { Name : $('[name="Name"]').val(), IsGood : $('name="IsGood"]').is(':checked') } }) .success(function(data) { alert('success') }); }); 

IML

 @Html.TextBoxFor(r=>r.Name) @Html.CheckboxFor(r=>r.IsGood) @(Html.When(JqueryBind.Click) .Do() .AjaxPost(Url.Action("Product","Add",new { Name = Html.Selector().Name(r=>r.Name), IsGood = Html.Selector().Name(r=>r.IsGood) })) .OnSuccess(dsl => dsl.Utilities.Window.Alert("Success")) .AsHtmlAttributes() .ToButton("Add")) 

बेहतर:

• MVD
  पिछले उदाहरण के रूप में जब हमने क्वेरी किया, इनकोडिंग फ्रेमवर्क में आप एक्शन लिखे बिना पुश कर सकते हैं
  

   Url.Disaptcher().Push( new { Name = Html.Selector().Name(r=>r.Name), IsGood = Html.Selector().Name(r=>r.IsGood) }) 

  
  
• मूल्य प्राप्त करने की विधि से चयनकर्ता सार
  नोट: उदाहरण दिखाता है कि चेकबॉक्स से उस मूल्य को प्राप्त करने के लिए जिसे आपको उपयोग करने की आवश्यकता है (': चेक किया गया'), लेकिन IML में इस बिंदु की आवश्यकता नहीं है
  

फॉर्म जमा करें

कोणीय दृश्य

 <div ng-controller="productController"> <form name="AddForm"> @Html.TextBoxFor(r => r.Name) @Html.CheckboxFor(r => r.IsGood) <input type="submit" value="save" ng-submit="submit" /> </form> </div> 

कोणीय js

 controller('productController', function ($scope, $http) { $scope.submit = function(){ $http({ url: 'product/Add', method: "POST", data: angular.toJson($scope.addForm) }).success(function(data) { alert('success') }); }); 

IML

 @using(Html.When(JqueryBind.Submit) .DoWithPreventDefault() .Submit() .OnSuccess(dsl => dsl.Utilities.Window.Alert("Success")) .AsHtmlAttributes() .ToBeginForm(Url.Action("Product","Add"))) { @Html.TextBoxFor(r=>r.Name) @Html.CheckboxFor(r=>r.IsGood) <input type="submit" value="add"> } 

बेहतर:

• एक लाइन में फॉर्म जमा करना
  नोट: कोणीयजे उसी तरह से काम करते हैं जैसे एक नियमित अजाक्स अनुरोध के साथ, जिसमें Url, प्रकार, डेटा पैरामीटर निर्दिष्ट करने की आवश्यकता होती है
  

खाका

सर्वर कोड

 public ActionResult Fetch() { var vms = new List() { new PersonVm(){ Last= "Vasy", First = "Smith", Middle = "Junior"}, new PersonVm(){ Last= "Vlad", First = "Smith", Middle = "Mr"}, }; return IncJson(vms); // for angular need use Json with AllowGet } 

नोट: सर्वर पक्ष AngularJS और IML दोनों के लिए समान है

कोणीय टेम्पलेट

 <script id="person.html" type="text/ng-template"> {{person.last}}, {{person.first}} {{person.middle}} </script> 

कोणीय दृश्य

 <div ng-controller="productAddForm"> <div ng-repear="person in persons" ng-template="person.html"> </div> </div> 

कोणीय js

 app.controller('personController', function ($scope,$http) { $scope.refresh= function(){ $http.get('person/fetch', function(data){ $scope.Persons= data }); } }); 

IML टेम्प्लेट

 @{ var tmplId = Guid.NewGuid().ToString(); using (var template = Html.Incoding().Template(tmplId)) { using (var each = template.ForEach()) { @each.For(r=>r.First),@each.For(r=>r.Middle),@each.For(r=>r.Last) } } } 

IML देखें

 @(Html.When(JqueryBind.InitIncoding) .Do() .AjaxGet(Url.Action("Personal","Fetch")) .OnSuccess(dsl => dsl.Self().Core().Insert.WithTemplate(tmplId.ToId()).Html()) .AsHtmlAttributes() .ToDiv()) 

बेहतर:

• फिर से टाइप करना
  नोट: टाइपिंग सिंटैक्स को लागू करने के लिए इंकोडिंग टेम्पलेट को अधिक कोड की आवश्यकता होती है, लेकिन यह आगे के समर्थन के साथ भुगतान करता है
  
• एक या कई वस्तुओं के लिए एक टेम्पलेट
• टेम्पलेट इंजन प्रतिस्थापन
• चयनकर्ता द्वारा खोज टेम्प्लेट, जिसमें अधिक विशेषताएं हैं (अजाक्स, कुकीज़ और आदि)
• कैश
  AngularJs के पास Cache के साथ काम करने का एक तंत्र है, लेकिन बहुत महत्वपूर्ण अंतरों के साथ
  
  • प्रत्येक टेम्पलेट के लिए अलग से अनुकूलन की आवश्यकता होती है
    

     myApp.run(function($templateCache) { $templateCache.put('templateId.html', 'This is the content of the template'); }); 

    
    
  • सत्रों के बीच संग्रहीत नहीं
    नोट: इंकोडिंग फ्रेमवर्क स्थानीय भंडारण में टेम्पलेट के पूर्व संकलित संस्करण को बचाता है, जो उपयोगकर्ता को पहले पास के बाद स्थानीय भंडारण से तुरंत बाद के सभी कॉल लेने की अनुमति देता है।
    
  
  

आम फायदे क्या हैं:

• हां, हां, और फिर से यह टंकण है - यह विकास के सभी चरणों में सी # के उपयोग के माध्यम से प्राप्त किया गया है (टेम्पलेट, क्लाइंट और अन्य)
• बैकएंड और फ्रंटेंड के लिए एक भाषा - एक डेवलपर जो C # जानता है वह आसानी से IML सीख सकता है और फिर क्लाइंट पर अपनी कमांड और क्वेरी को कॉल कर सकता है।

निष्कर्ष : AngularJs क्लाइंट पर mvc आर्किटेक्चर को प्रदर्शित करता है, जो एक तरफ आपको कोड को संरचना करने की अनुमति देता है, लेकिन अतिरिक्त समर्थन समस्याओं को भी जोड़ता है। डेवलपर asp.net mvc में mvc का सर्वर-साइड कार्यान्वयन है, जहां अधिक शक्तिशाली और उपयुक्त भाषाओं का उपयोग करके आप जटिलताओं से बच सकते हैं।