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

这将是一个有点开放性的问题，但希望经验更丰富的AngularJS开发人员能够提供任何建议。这将是一个相当大的决定，所以我想我会在这里寻求任何帮助。如果你不喜欢这些类型的问题，请随意忽略

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

我们的很多代码都会被转换成这样：

html:

---

我喜欢它的几个原因是，在这个应用程序上，我们可以使用Angular，它迫使我们至少要弄清楚什么在使用，什么没有。我知道，由于依赖DOM，我们可能无法获得所有的测试好处，但您必须从某个地方开始。我看到的潜在缺点是“如果它没有坏，就不要修复它”，IE 8之前版本可能会出现一些浏览器问题，但老实说，IE的问题不会太严重。有人对此有什么明智的建议吗

我个人的看法是，这肯定是一个良好的开端；它将缓慢地引入angular，而不必一次性移植整个应用程序。根据项目的大小和您愿意投入到重构应用程序中的资源，我认为将手动DOM操作转换为使用数据绑定也很重要

---

您可能还希望隔离旧的DOM操作代码，以便保持angular控制器干净，同时记住旧的jQuery DOM代码需要移植。

我想花点时间重写代码。这不是你怎么做的。这里有一个简单的方法

因此，首先，不要在控制器中执行DOM操作。曾经Angular非常擅长双向绑定，您应该让它完成它的工作。处理更新数据并让angular响应更改

从对象开始，操纵对象，然后保存对象。您不必费心使用jQuery拉取和设置值。这样做几乎破坏了使用角度传感器的任何一点

下面是示例的简单实现

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

    }               
}

---

谢谢你的回答。我当然想退出DOM操作，但即使是ng controller提供的结构似乎也已经有助于减少技术债务。7年前，当我们刚刚开始向Zend框架中移植程序块时，我在一个大型php应用程序中遇到了类似的情况。这是该应用程序的最佳决定，我希望在这里也能获得类似的好处。thx Mike，我真的很感激。我当然想去那里，但即使迁移我们目前拥有的东西似乎也会给我们带来一些好处。这个特别的片段有点棘手，因为在铁路上有一堆筑巢物（像树一样），为什么投反对票？我投了赞成票，所以有两个人投了反对票，没有任何评论？@timpone我也在想。有没有一个错误我错过了？我不这么认为，因为通常有这样的东西指出高兴。我想人们不喜欢我的问题，因为我的问题有点夸张，但这就是为什么我有第一段。再次感谢您的帮助，这对我们来说是一个巨大的飞跃，我感谢您的帮助。@timpone祝您好运，并接受教程。在将Angular注入应用程序之前，先了解Angular是如何工作的。这个问题似乎离题了，因为它属于程序员。

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

    }               
}