将基于jQuery /重dom的网站移动到AngularJS

Question

这将是一个开放式问题，但会感谢任何有经验的AngularJS开发人员可以提供的建议。这将是一个非常大的决定，所以我想在这里寻求任何帮助。如果您不喜欢这些类型的问题，请随时忽略。

我们有一个相当沉重的基于jQuery的网站。我们公司有兴趣使用框架来简化开发。即使看看我们当前的jQuery网站，似乎我们可以将此功能移到Angular中，并使用ng-click或其他适当的事件移除与DOM元素的初始事件绑定。虽然这会对DOM维护状态造成相当大的依赖性，但它会让我们走上使用更加结构化的东西的道路。这样做似乎是一个合理的步骤？

很多的我们的代码将被转移到这样的事情：

HTML：

<button ng-click="saveItem($event)" type="button" class="save-item-changes btn" data-global-id="205" style="">save changes</button> 

的javascript：

$scope.saveItem=function(event){ 
    var global_id_val=$(event.target).data('global-id'); 
    //alert('here is global_id:' + global_id_val); 

    var header_val=$('#menu-item-header-' + global_id_val).val(); 
    var detail_val=$('#menu-item-detail-' + global_id_val).val(); 
    var position_val=$('#menu-item-position-' + global_id_val).val(); 
    $http({ 
    url:'/arc/v1/api/save-item', 
    method: 'POST', 
    data: {header: header_val, detail: detail_val, position: position_val, global_id: global_id_val} 
    }).success(function(r){ 
    if(r.is_moved==true){ 
    // do the dom manipulations here 
    }).error(function(r){ 
    // handler error here 
    }); 

的几个原因，我喜欢它是在向前发展这个应用程序，我们可以使用Angular，它迫使我们至少弄清楚正在使用什么，什么不是。我知道，由于DOM依赖性，我们可能无法获得所有测试优势，但您必须从某处开始。我看到的潜在缺点是“如果没有被破坏，请不要修复它”，并且IE 8之前可能会出现一些浏览器问题，但说实话，IE浏览器的问题是微不足道的。有没有人对此有过任何忠告？

Answer 1

我个人的意见是，这肯定是一个很好的开始;它将引入缓慢角度，而无需一次移植整个应用程序。根据项目的规模和您愿意重构应用程序的资源，我认为将手动DOM操作转换为使用数据绑定也很重要。

您可能还想把隔离旧的DOM操作代码，以便让您的角度控制器保持清洁，同时牢记旧的jQuery DOM代码需要移植。

Answer 2

我想花一秒钟时间重写你的代码。这不是你如何做角度。这是一个简单的方法。

因此，首先，不会在您的控制器中执行DOM操作。永远。 Angular擅长双向绑定，你应该让它做它的工作。处理更新数据并让角度响应变化。

您从一个对象开始，操纵该对象并保存该对象。你不用费心使用jQuery来设置值。这样做几乎破坏了使用Angular的任何一点。

以下是您的示例的简单实现。

HTML：

<div ng-controller="ItemCtrl"> 
    <div class="alert alert-success" ng-show="settings.saved">Saved!</div> 

    Header: <input ng-model="item.header" type="text" /> 
    Detail: <input ng-model="item.header" type="text" /> 
    Position: <input ng-model="item.header" type="text" /> 
    <a ng-click="saveItem(item)" class="save-item-changes btn">save changes</a> 
</div> 

控制器：

function ItemCtrl ($scope, $http) { 
    $scope.settings = { 
     saved: false 
    } 

    $scope.item = { 
     global_id: 1, 
     global_val: 'global' 
     header: 'header', 
     detail: 'detail', 
     position: 'position', 
    } 

    $scope.saveItem = function (item) { 
     $http({ 
      url:'/arc/v1/api/save-item', 
      method: 'POST', 
      data: $scope.item 
     }).success(function (r) { 
      $scope.settings.saved = true; 
     }.error(function (e) { 
      // Error handler 
     }) 

    }    
}