前端：AngularJS与双向绑定

Posted 2021-04-26 给产品经理讲技术

前几天叨逼叨了《》，写了几个小Demo，其实是为了说明前端构建一个还看的过去的网页是多么的简单，也说了Bootstrap是一个前端框架，其实Ta的本质是一个CSS系统，也就是定义好了特别多的样式供你选择，有一些轮播之类的界面其实是用JS封装了一些小插件共用户使用，但从用户角度或者开发者角度来看，Ta仍然是一个UI库，或者叫做UI组件库。

用一句话总结：Bootstrap解决了快速构建一个网页框架和样式的问题。

但还有一类问题待解决，就是如何构建一个动态网页的问题，或者叫做如何构建一个WebApp。

构建一个动态网页，不得不提到前端JS框架（我们可以说Bootstrap是一个前端CSS框架），今天以AngularJS为例讲解一下，类似的框架还有ReactJS，还有VueJS，它们都是当前比较流行的JS框架。

介绍Bootstrap的时候，我们看到它非常简单，就是一堆CSS和JS文件，还有一些图标，其实AngularJS也是一个JS文件，这货是Google开发维护的，我们打开JS文件看看：

其实就是一堆javascript代码，是压缩过的。

ng-app标识了div标签里面是一个angularjs的应用，ng-model定义了一个变量，这个变量在<h1>标签中被用{{name}}引用起来，input是一个输入框，输入框内输入文字的时候，会在网页当中实时显示输入的文字。

运行效果如下：

简单看，就是针对html标签附加使用了一堆以ng-开头的命令，使得开发动态网页更简单，原本Html是不存在这些命令的，这些命令是Angular提供的。同时Angular提供了网络，路由，控制器，表达式，表单，动画等一些列的基础设施，让你比原生JS能够更好的构建前端动态网页。

对于Bootstrap和Angular简单理解成：你笨笨的写CSS构建样式和组件，重复发明一些轮子，其实是没有一些牛逼人儿写好一套东西给你调用更简单的。你笨笨的写原生JavaScript来实现一些网络请求，数据绑定，提交表单，做动画，其实是没有一些牛逼人儿写好一套接口给你调用更简单的。

再来说说双向绑定，这个也是前端中重要的一个概念，写代码会写的很爽。

比如用原生javascript实现在输入框中输入，并且网页中也实时输出Trump的话，是需要写很多代码的，用了Angular之后就天然绑定了他们之间的关系，一荣俱荣，一损俱损。

其实这个双大括号{{name}}和input标签，就称为双向绑定，看起来比较简单，TA使得控件与数据能够双向通信了，再也不用写复杂代码来实现类似的功能，双向绑定相当于一种设计模式。

原先我们介绍过MVC模式《》，其实Trump的显示相当于V（视图），输入框相当于Model（数据），两者在MVC模式中一般都是单向通信的，也就是Model的变化一般单向传导到视图。顾名思义，双向绑定技术就是两端可以互相影响了，视图和数据任何一方变化了，都将影响到对方，这个也是MVVM模式所描述的，具体MVVM是什么，就给感兴趣的人留为家庭作业吧：）

简单总结：AngularJs实现了针对Html的命令，来使得构建动态网页更专业，更方便。