极客全栈导航

  • 常用
  • 百度
  • google
  • 站内搜索

前端框架

angular.js

  • 更新日期:2019-9-24
  • 查看次数:31

详细介绍

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的理念里面,模板就是一副素描画,数据就是颜色,你想做完这幅画,只需要向模板填充你想要颜色就行了(也就是填充你的数据),例如下面这个例子,你的输入自动显示到界面上