angular的运行机制_angular原理及模块简介

Angular简介(大神可略过)

Angular是一个强大的前端框架，其强大之处主要是可以把静态页面与动态数据绑定起来。平时我们看到的网页界面上面的数据都是固定，但如果我们要变化这些数据，例如我在一个文本框输入，要实时改动一个文本，肿么破。这时候有两种方法(我只想到两种，求大神告知更多)：

1.改变一下，就请求一下后端，例如php，然后后端重新返回一个更新好的页面，当然这种方法很傻，改变一点小数据就请求后端，的确太傻(由于前端小白，我之前就用这种方式做了一个小网站，后来接触到angular才发现自己太傻)；

2.通过js改写DOM(for 小白：这里的DOM可以理解为html，但官方称呼叫document object model，小白我以前总是不知道这是啥)，js最初的document类就可以干这事儿，后来出现了一个jquery(js的一个强大的库)，也可以方便的改写DOM，对于这些前端就可以知道的数据就不用请求后端了。

jquery也只是一个库，提供了一些简单改变DOM的方法，对于简单的小工程来说也够了。但是对于比较大的工程，考虑的不仅是功能的实现，还包括可维护可扩展，这就需要MVC模式了(for小白：至于啥是MVC，可以看我介绍spring框架那篇博客里面)。如果只用jquery，view的逻辑会和c，m的逻辑混在一起，不便于维护，例如你在文本框里数据了一个东西，你得用写代码去获取这个值，然后做处理，或者你的某个值改变了，你还得写代码去更新一下view，而angular就是提供这样一个解决方案的框架(后面还会有介绍感觉angular的强大)。

Angular里面的html文件就是view，叫模板(template)，当你的数据变化需要改变模板的时候，不用再js代码里面去改变，你可以什么都不做，因为angular神奇的地方就是把模板与数据绑定(data binding)，当数据改变的时候模板自动就变了，你的view变了(在文本框输入东西了)也会自动反应到你的数据上面，这就是双向绑定。在angular的理念里面，模板就是一副素描画，数据就是颜色，你想做完这幅画，只需要向模板填充你想要颜色就行了(也就是填充你的数据)，例如下面这个例子，你的输入自动显示到界面上

你只需要专注你的数据和模板就够了，他们之间怎么填充，angular把这些做好了，也就是剥离了view层对contorller，mdoel层的影响，下面就是angular官方给出的区别

一般处理数据：

angular：

简单来说就是你用angular了数据和view自动双向绑定，不用你再代码中去更新，不用angular你还要自己写代码在view变了时候去更新数据，在数据变了的时候去更新view。

angular原理

angular是基于js的一个框架，首先需要了解一下js的工作原理。

JS原理

浏览器里面有一个事件队列(event queue)，用户触发啥事儿，或者网络请求，延时操作(例如定时器之类)，都是一个event，浏览器会轮训这些事件，然后调用这些回调(这里的回调简单来说可以理解为触发一个函数)，然后就进入JavaScript的环境中执行(JavaScript context)，在这里面可以改变数据，操作DOM(也就是html结构)，然后再退出JavaScript环境，又进入浏览器环境，然后浏览器根据之前的改动重新绘制界面，这就是个一个流程。

angular原理

angular的运行就是在JavaScript context里面自己实现了一套环境，叫做angular环境(angular context)，非angular那部分环境叫经典环境(classic context)，

在angular context里面也有一个队列，这个队列里面是watch列表，列表里面装的就是那些被监听的变量，包括那些进行数据绑定的变量(也就是和view进行绑定的那些)。如果用户改变了一个绑定了数据的view，这时候会触发一个angular函数$apply(也就是把这个event放入了event queue，然后轮训到这个的时候就触发了)，然后把这个改变的值更新进绑定的那个变量，再开始调用一个digest的函数，digest就是用来轮训这个watch列表，看这个列表中的指是否变动，如果有变动就变动改写相应的DOM(不用angular就要自己写这部分代码，如果你有100个变量，你就要写100个这种改动，而且如果以后有啥变动，还得自己去重构)。