AngularJS是可以代替JQuery用于动画的“前端”语言吗？

Question

我正在和一个设计团队一起重新设计我的网站，我的首席开发人员告诉我告诉他们我想用AngularJS代替JQuery来制作我的HTML页面，因为它是干净的代码，并且拥有最现代化的库；他们同意使用它。

我猜因为AngularJS比JQuery新，所以他们没有那么多的经验。在项目范围内，我们同意他们将只做重新设计的“前端”工作(例如，模板引导程序，css/html和网站的动画)，但他们告诉我，他们团队中的某人说AngularJS也是“后端”编程工作too...is准确吗？

如果他们创建我的超文本标记语言页面，如果他们使用AngularJS，他们将不得不做“后端”编程工作，还是这只是“前端”工作？他们说他们必须使用JQuery，因为这都是“前端”工作。

此外，他们还告诉我，对于特定的动画效果，比如淡入淡出元素等，他们希望使用jQuery和Bootstrap。他们告诉我，AngularJS不是动画的最佳解决方案，但对于website...is来说，它更适合处理动态和实时信息。

在我看来，他们只是试图找到一种方法，不使用AngularJS，而是使用他们更习惯的JQuery。

Answer 1

在AngularJS中的动画是可能的，使用它的一个模块称为ngAnimate它的工作方式是添加CSS类到你的HTML元素，但你需要自己编写类，你将使用CSS3动画，这是比JQuery动画更好的性能明智，只需要纯粹的CSS。这就是我一开始使用的，它似乎对我来说很好用。然而，我发现，当我开始制作更复杂的动画时，我的CSS规则变得越来越庞大，特别是因为你必须在大多数CSS前面加上-webkit -moz -o之类的前缀。

在这一点上，我已经准备好尝试替代方案，但我不想回到jQuery。我找到的是GSAP。它是一个非常强大和方便的动画javascript库，我可以使用指令将它完美地集成到Angular中。例如，我在我的一个项目中使用了以下代码：

    .directive('highlight', function() {
        return {
            scope: {},
            restrict: 'A',
            link: function(scope, element) {

                element.on('mouseenter', function() {
                    TweenMax.to(element, 0.5, {
                        color: '#000',
                        borderColor: '#000',
                        backgroundColor: '#F2F2F2'
                    });
                });
                element.on('mouseleave', function() {
                    TweenMax.to(element, 0.5, {
                        color: '#BDBDBD',
                        borderColor: '#BDBDBD',
                        backgroundColor: '#FFF'
                    });
                });
            }
        };
    })

如果我的HTML中有一个形状像按钮的链接，它就像写下

<button highlight></button>

我会有一个带有动画边框、文本颜色和背景颜色的按钮。此外，它是可重用的。我不必为我的DOM中的每个按钮编写高亮显示规则。我只需要添加属性highlight。

jQuery是有效的，但它的动画效果很差。Angular更好，但它很冗长，而且我个人并不喜欢实现它。我倾向于GSAP，因为它非常强大和灵活，同时还能在动画中给你最好的表现。

Answer 2

正如LoganRx所说，AngularJS是一个客户端javascript库。它确实有一个极好的动画模块，可以添加到CSS动画中。但是，如果CSS动画不能解决这个问题，您可能还想看看Javascript动画。这就是Jquery动画发挥作用的地方。然而，有很多Javascript动画库。此外，AngularJS和Jquery有两个不同的用途。根据注释中的示例，淡入和淡出动画是包含在AngularJS动画模块中的基本css动画。所以你可以使用它来达到这个目的。

AngularJS显然不依赖于JQuery，反之亦然。对于模型和视图绑定，AngularJS是很棒的，可以创建ajax请求、路由、CSS动画等等！事实上，您只需使用AngularJS就可以构建整个应用程序。然而，Jquery是一个非常通用的javascript库，它为您提供了AngularJS中没有的实用程序。在许多情况下，您将同时使用这两个库。

Yearofmoo为AngularJS做出了很大的贡献，他有一个很棒的博客，里面有很多AngularJS的动画例子。你可以在这里找到他的博客：http://www.yearofmoo.com/

要解决是否需要完成服务器端工作的问题，实际上是相当棘手的。这取决于应用程序现在呈现动态内容的方式。如果整个超文本标记语言文档只是由服务器根据一些动态信息生成的，并且没有真正的restful数据端点，那么是的，您可能需要做一些服务器端的工作来创建端点，在那里您可以检索要通过AngularJS使用的动态数据。但是，如果当前的应用程序在很大程度上依赖于返回Json或XML对象的Ajax调用(或者如果它设计得很好，并且使用了序列化框架)，那么您可能根本不需要做太多的服务器端更改。

Answer 3

首先，AngularJS是一个前端JS框架，在技术上不需要任何后端编程。它可以非常容易、高效地与后端交互，但AngularJS本身并不是后端编程。

在动画方面，在Angular中有和在jQuery中一样多的动画方法。CSS过渡，变换和动画都可以在没有jQuery的情况下使用Angular，这只是一种不同的思考方式。还有一个名为NgAnimate的Angular模块，它可以为页面上的不同交互提供更多定向动画。

总而言之，作为一名Angular开发人员，我会意识到您正在寻找的一切都可以使用Angular来完成，除非他们不熟悉Angular，否则并不困难。但他们声称使用jQuery将使应用程序的各个方面在语法和执行方面与Angular极其相似。此外，Angular内置了jqLite，它已经支持一些基本的jQuery功能。