AngularJS入门-CSDN博客

每隔一段时间就会出现一种新工具，就像它突然出现一样，它逐渐被遗忘。虽然不是AngularJS 。自从Misko Hevery于2009年创建以来，它就已经存在了，但是在过去的几个月中 ， AngularJS受到了很多关注 。

人们在谈论它，开发人员一直在将其集成到他们的作品中，而作者一直在写关于它的书并赚取大量现金。那么， 什么是AngularJS ？ 为什么要跳上它呢？它改变生活吗？确实是！让我来告诉你为什么。

注意： 我强烈建议您在深入研究AngularJS之前先熟悉JavaScript。 如果您不熟悉MVC和DOM ，建议您在继续进行之前先阅读有关它们的更多信息，否则，您可能会对本文中使用的大多数术语感到困惑。

什么是AngularJS？

AngularJS不仅仅是另一个JavaScript框架。当然，我们有Backbone，Ember和最热门的jQuery，但是AngularJS在许多方面都不同。

数据绑定并为单页应用程序（SPA）构建

首先，AngularJS是专门为SPA构建的数据绑定框架 。意味着，您可以轻松构建应用程序而无需使用任何其他库，因为它已经具备了您将需要的一切。它还保持模型和视图的同步。

构建SPA的好处在于，它模仿了桌面体验，在该体验中，页面始终保持不变，仅视图和URL一起更改– AngularJS处理路由和视图。这样更快，更流畅 。就像您刚刚打开了桌面应用程序，并已拥有所需的一切一样。

另一件事是， 与其他SPA不同，实际上保留了浏览器历史记录 。例如，如果您想单击“后退”按钮以返回上一个视图，AngularJS实际上会将您带回到上一个视图。大多数SPA都不是这种方式。

正确完成模型-视图-控制器实现

AngularJS以漂亮的方式实现了MVC。大多数使用MVC的框架都要求您将应用程序分成模块，然后编写将它们连接在一起的代码 。

尽管这样做的理由是使代码工作更灵活和可重用，但这会导致许多编码恐怖，尤其是对于懒惰（或困倦的）开发人员而言。 AngularJS只需简单地将您的应用程序拆分为不同的模块即可很好地处理这一问题。然后，它将处理其余部分。

动画

当然，如果没有适当的动画，单页应用程序的外观也不会很好。如前所述，AngularJS是一个功能丰富的框架，具有构建通用应用程序所需的所有功能

这样， 它提供了一种与jQuery一样的在每个视图中引入动画的简便方法 。

这是AngularJS如何处理动画的一个很好的例子。

但这仅仅是AngularJS的表面。这是它可以做的更多事情：

资料验证
依赖注入
处理自定义逻辑
多元素指令
在控制器之间共享数据
增强HTML
借助jQlite（内置）进行DOM操作
AJAX
路由
测试中
还有很多..

一个对比

现在，通过将AngularJS与常规JavaScript和jQuery进行比较，来看看AngularJS是如何工作的。

香草JavaScript

<html> 
    <head> 
    <title>Vanilla JavaScript</title> 
    </head> 

    <body> 
        Name: <input id="textInput" type="text" /> 
        <br/> 
        Your name is <span id="name"></span> 
        
        <script> 
            var textInputElement = document.getElementById('textInput'), 
            nameElement = document.getElementById('name'); 
            textInputElement.addEventListener('keyup',function(){ 
            var text = textInputElement.value; 
            nameElement.innerHTML = text; 
            }); 
        </script> 
        
    </body> 
</html>

jQuery查询

使用jQuery，显示输入的数据变得更加简单，因为大多数来回操作都是由jQuery处理的。因此，使您可以编写更少的代码。

<html> 
    <head> 
        <title>jQuery</title> 
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
    </head> 
    
    <body> 
    Name: <input id="textInput" type="text"/> 
    <br/> 
    Your name is <span id="name"></span> 
    
    <script> 
        $('#textInput').on('keyup',function(){ 
        $('#name').html($('#textInput').val()); 
         }); 
    </script> 
    </body> 
    
</html>

AngularJS

AngularJS使一切变得更高级。该框架不仅轻巧， 而且编写HTML的方式也变得更加容易 。

<!DOCTYPE html>

<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <title>AngularJS</title>
    </head>
    
    <body>
        Name: <input type="text" ng-model="name" />
        <br />
        Your name is {{ name }}
    </body>
</html>

如上所示，AngularJS的优点在于可以减少编写代码的同时保持应用程序的完整性 。由于大多数模块的串起是由AngularJS完成的，因此代码之间来回很少。另一件值得注意的事情是， 您不必为了改变视图而操纵控制器 。