AngularJSとIML

免責事項 ：比較は「ホリバー」を上げることを意味するのではなく、あるツールが別のツールと比較して解決するタスクの概要を示します。 私は、angularJのすべての複雑さに精通しているわけではありませんが、このツールに関する10の記事を読んだ後、IMLで同じ問題を解決する別の例を示します。

何を比較しますか？

• コントローラー
• 継承
  
  注：IMLではありません
  
  
• サーバーへのアクセス
• プッシュデータ
• フォームを送信
• テンプレート
• 約束
  
  注：IMLには存在せず、サードパーティのサービスを使用する場合にのみ有用であり、返されるデータを賢く選択することですべてが解決されます。
  
  

asp.net mvcのフレームワーク内では、変数、定数、およびローカリゼーションサポートには利点がないため、意味のある機能を選択しました。

注：以下では、asp.net mvcのフレームワーク内で開発が行われることがしばしば考慮されます。

どのように比較しますか？

この手法は非常に単純です。AngularJS（ViewおよびJs）およびIML（Viewのみ）オプションを引用し、さらにIMLの方が優れている理由を説明します。 私は長所だけを強調しますが、コメントでIMLのマイナス面を見て喜んでいるので、すべてのコメントを作成できます。

コントローラー

角度JSビュー

<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のフレームワーク内では、ViewのC＃コード（cshtml）は不可欠な部分であり、したがって、得られる利点はかなり抽象的なマークアップとは別のロジック開発モデル。
  
  
• 不正行為のサポート
  
  注：AngularJs属性はHTML標準ではないため、構文の強調表示や自動補完は行われず、IMLはC＃ライブラリです。
  
  
• イベントはフラグを表します。
  
  注：別のWhenイベント（JqueryBind.Click | JqueryBind.Focus）のアクションを複製する必要がある場合、グループ化を簡素化します
  
  
• イベント動作管理（デフォルトの防止、伝播の停止）
  
  注：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の型付きバージョン（「Product」、「Get」、new GetProductQuery（）{Code = Html.Selector（）。Name（r => r.Code）}）

より良い：

• すべての段階で入力する
  
  
  • Url -AngularJsのアドレスはサーバー側なしで構築されます。これにより、ルートを考慮に入れず、コードからアクションに切り替える（名前を変更する）ことができなくなります。
    
    注：AngularJsマニュアルでは外部ファイルのJavaScriptコードを推奨しているため、このため、jsコード内でサーバー変数を使用することはできません。
    
    
  • クエリ -AngularJsはサーバーモデルに関連付けられておらず、モデルダイアグラムを取得できません。モデルダイアグラムは、Urlの場合のように、名前を変更して宣言に進むためのツールの使用を許可しません
    
    注：IMLの場合、NameまたはCodeフィールドの名前をGetProductQueryに変更すると、変更はクライアントパーツに反映されますが、AngularJsの場合は{{model.Name}}と$（ '[Name =“ code”]'を置き換える必要があります）新しい値に。
    
    
  • セレクタ -IML内で要求パラメーターを指定するには、強力なツールを使用してDom（ハッシュ、Cookie、JS変数など）オブジェクトから値を取得できます
  
  
  
• MVD

Incoding Frameworkでは、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
  
  クエリを実行したときの前の例のように、Incoding Frameworkでは、Actionを記述せずにプッシュできます
  
  

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

  
  
  
• 値を取得する方法からのセレクターの要約
  
  注：この例では、使用する必要があるチェックボックスから値を取得するために（ '：checked'）が示されていますが、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"> }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

より良い：

• 1行のフォーム送信
  
  注：angularJsは、通常のajaxリクエストと同じようにフォームで機能します。これには、Url、Type、Dataパラメーターを指定する必要があります
  
  

テンプレート

サーバーコード

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

より良い：

• もう一度入力
  
  注：コーディングテンプレートは、型付き構文を実装するためにより多くのコードを必要としますが、さらなるサポートで成果を上げます
  
  
• 1つまたは複数のオブジェクトの1つのテンプレート
• テンプレートエンジンの交換
• より多くの機能（ajax、cookieなど）を備えたSelectorによる検索テンプレート
• キャッシュ
  
  AngularJsにはCacheを操作するメカニズムがありますが、非常に重要な違いがあります
  
  
  • 各テンプレートを個別にカスタマイズする必要があります
    
    

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

    
    
    
  • セッション間で保存されない
    
    注：Incoding Frameworkは、事前にコンパイルされたバージョンのテンプレートをローカルストレージに保存します。これにより、ユーザーは最初のパスの後、ローカルストレージからテンプレートへのすべての後続の呼び出しをすぐに実行できます。
    
    
  
  
  

一般的な利点は何ですか：

• はい、はい、これも典型的な例です。これは、開発のすべての段階（テンプレート、クライアントシナリオなど）でC＃を使用することで実現されます。
• バックエンドとフロントエンド用の1つの言語-C＃を知っている開発者はIMLを簡単に学習し、クライアントでコマンドとクエリを呼び出すことができます

結論 ：AngularJsはmvcアーキテクチャをクライアントにデプロイします。これにより、一方でコードを構造化できますが、サポートの問題も追加されます。 開発者asp.net mvcにはmvcのサーバー側の実装があり、より強力で適切な言語を使用して、複雑さを回避できます。