AngularJS1.0的使用总结笔记------001

来源:互联网 发布:java jdk se ee 编辑:程序博客网 时间:2024/05/03 19:51

        从今天开始,我将会吧我所用到的 AngularJS1.0所有的知识进行梳理一遍,写成一篇篇文章,算是对自己知识的一次总结吧。因为马上就要学习和使用 AngularJS2.0了。两个框架还是有本质区别的。所以将自己所用的1.0总结下来。

        首先我们要知道,这个框架诞生的意义是什么,为处理什么问题才诞生的。AngularJS简化了你写DOM的操作,你看不到那些让人头疼的each,append。还你一个清晰地逻辑世界。框架的出现只是为了简化开发流程,让我们能投入更多的精力贴合业务逻辑,做出完美的产品。



从上面的图像可以看出AngularJS

1.良好的应用程序结构层层分离。使用 AngularJS,您可以通过MVC(模型 - 视图 - 控制器)或MVVM (模型 - 视图 - 视图模型)模式来组织源代码。HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的。在代码处声明ng-app让浏览器知道何处开始的代码属于AngularJS的代码范畴。代码结构上面的控制层(Conttroller)和视图层(View)通过$scope来进行连接。所有从后端请求的数据,我们使用服务(Services)来获取。并通过$rootScope.$broadcast广播的方式传送出去。在控制层接受数据,通过$scope来反馈到视图层。

   我们在html中先定义一个angular的app,指定一个angular的controller,则该controller会对应于一个作用域(可以用$scope前缀来指定作用域中的属性和方法等). 则在该ngCtl的作用域内的HTML标签, 其值或者操作都可以通过$scope的方式跟js中的属性和方法进行绑定。所以可以说$scope的作用是连接视图层和数据的桥梁

2.双向数据绑定

这个应该是AngularJS的一大特点。视图层的改变会反映到数据层,数据层的改变会反应到视图层。之所以可以实现双向绑定,因为AngularJS在$scope变量中使用脏值检查的机制。
看下面的代码:

在我改变名字这一栏的时候,$watch一直不停的在检测input框中的内容,从而知道改变了$scope.name的新值。反应到$scope.name上面。在实际中,数据的改变机制也是基于脏处理,然后时时更新最新数据,显示在页面上面。在Angular中,有$apply和$digest两个函数,理解这两个函数的作用,会把AngularJS的双向数据绑定,真的搞明白。需要记住的是AngularJS是否能检测到你对于model的修改。如果它不能检测到,那么你就需要手动地调用$apply(),来进行脏处理。今天就先给大家讲到这里,待续。。。

0 0