Question

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

我们有一个相当繁重的基于DOM的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浏览器问题，但是说实话，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
        })

    }               
}

将jQuery / heavy dom网站移动到AngularJS

2 个答案: