AngularJS vs IML

disclaimer : comparison does not imply raising “holivar”, but gives an overview of the problems solved by one tool in comparison with another. I am not a connoisseur of all the subtleties of angularJs, but having read 10 articles of the review of this tool, I give an alternative example of solving the same tasks on IML.

What will we compare?

• Controller
• Inheritance
  note: missing in IML
  
• Accessing server
• Push data
• Submit form
• Template
• Promises
  note: it is absent in IML and can only be useful when working with third-party services, and this can be solved with the help of a thoughtful choice of data to return.
  

')
I chose those features that make sense, because in the framework of asp.net mvc I don’t see any advantage in variables, constants, and also in localization support.
note: further, it will often be taken into account that the development takes place within the framework of asp.net mvc

How will we compare?

The technique is very simple, I cite the listing of AngularJS (View and Js) and IML (only View) options, further arguing that IML is better. I will highlight only the advantages, but I will be glad to see the negative aspects of IML in the comments, so all your comments can be made.

Controller

Angular js view

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

Angular 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")) 

The better:

• Behavior and Marking Together
  note: this will seem controversial to many at present, because logic complicates the work of page makers, but within asp.net mvc, C # code in View (cshtml) is an integral part and therefore those benefits that can be obtained completely overlap with pretty abstract The logic development model is separate from the markup.
  
• Initilesence support
  note: AngularJs attributes are not html standard, so there will be no syntax highlighting or auto-add, and IML is a C # library.
  
• Events represent flags
  note: simplifies grouping when you need to duplicate actions for another When event (JqueryBind.Click | JqueryBind.Focus)
  
• Event Behavior Management (Prevent Default, Stop Propagation)
  note: AngularJS allows you to control this as part of the controller method, but IML includes it as part of the overall scheme
  

Accessing Server

Server code

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

note: the server side is the same for both AngularJS and IML

Angular html

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

Angular 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")) 

note: when building a url, you can use not only an anonymous object as a Routes, but also a typed version of Url.Action (“Product”, ”Get”, new GetProductQuery () {Code = Html.Selector (). Name (r => r.Code)})

The better:

• Typification at all stages
  
  • Url - the address in AngularJs is built without the server part, which does not allow to consider the route and the inability to switch (rename) to Action from the code.
    note: since the AngularJs tutorial recommends putting JavaScript code into an external file, for this reason you will not be able to use server variables within the js code.
    
  • Query - AngularJs is not associated with the server model and does not allow to obtain a model schema, which, as is the case with Url, does not allow the use of tools for renaming and go to declaration
    note: in cases with IML, if we rename the Name or Code field to GetProductQuery, then the changes will affect the client part, but for AngularJs we will have to additionally replace the {{model.Name}} and $ ('[[Name = "code"]') ) to new values.
    
  • Selector - to specify query parameters within IML, you can use a powerful tool to get values ​​from Dom (hash, cookies, js variable and etc) objects
  
  
• MVD

In the Incoding Framework, you can do without writing additional Controllers and Action if you use MVD as the url

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

Push data

Server code

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

note: the server side is the same for both AngularJS and IML

Angular view

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

Angular 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")) 

The better:

• MVD
  as in the previous example, when we did Query, in the Incoding Framework, you can push without writing Action
  

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

  
  
• Selector abstracts from the way to get the value
  note: the example shows that you need to use is (': checked') to get the value from the checkbox, but in the IML you do not need to specify this moment
  

Submit Form

Angular view

 <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> 

Angular 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"> } 

The better:

• Sending the form in one line
  note: angularJs works with the form in the same way as with the usual ajax request, which requires specifying the Url, Type, Data parameters
  

Template

Server code

 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 } 

note: the server side is the same for both AngularJS and IML

Angular template

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

Angular view

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

Angular js

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

Iml template

 @{ 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 view

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

The better:

• Again typing
  Note: The Incoding template requires more code to implement a typed syntax, but it pays off with further support.
  
• One template for one or many objects.
• Template engine replacement
• Search template by Selector, which has more features (ajax, cookies and etc)
• Cache
  AngularJs has a mechanism for working with Cache, but with very important differences.
  
  • Requires setting for each template separately
    

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

    
    
  • Not stored between sessions.
    Note: The Incoding Framework stores the pre-compiled version of the template in local storage, which allows the user to take all subsequent calls to the template from local storage immediately after the first pass.
    
  
  

What are the common advantages:

• Yes, and again this is typing - this is achieved through the use of C # at all stages (template, client scenario and etc) development
• One language for backend and frontend - a developer who knows C # can easily master IML and then invoke its own Command and Query on the client

Conclusion : AngularJs deploys mvc architecture on the client, which on the one hand allows you to structure the code, but also adds additional support problems. The developer of asp.net mvc has a server implementation of mvc, where using more powerful and suitable languages, you can avoid complications.