即日起在codingBlog上分享您的技术经验即可获得积分,积分可兑换现金哦。

AngularJS框架(一)

本文目录
[隐藏]

微信编辑器 小蚂蚁编辑器

1.要理解AngularJS必须要理解数据,数据是AngularJS的核心!

1.1.AngularJS三要素

  1. ng-model : 数据从哪来

  2. ng-bind : 数据到哪去

  3. ng-app : 哪块归angular管


对于传统的DOM操作,我们需要获取对象,然后添加事件等一系列操作来操作DOM,太麻烦!
而对于angularjs我们只需要知道数据从哪来要到哪里去就可以了,是不是很智能了!没错!
例如:





 
 
     
        
 

 

   
   
 
结果是:{{a*b}}

   
   

好了,这就实现了数据的传入后的自动绑定。
那么,我为什么要加ng-app=”” 呢?
Angularjs的作者很聪明,知道自己的框架不能一尊独大,一个项目肯定也会引入其他的框架,所以,用ng-app=”” 包围起来的内容就归angularjs管了。当然,一般项目我们引入一个框架就好了,所有可以把ng-app=”“放在HTML标签上,即:

...

注意:angularjs和js不互通,因为angular的作者认为互通的话太乱了!
例如:AngularJS也有自己的点击事件

           
    
      
         
     

也有自己的把div显示消失事件

    
   

其中ng-click就是一个点击事件


库和框架的区别:
库:人用库,因为库里有很多API,是帮助程序员开发程序的。
框架:框架用人,因为我们我们想要用别人的框架,就要遵循别的标准,这样有助于协同开发。


在angularjs里不需要传统的createElement等操作,实现数据添加创建很简单!

  
 
    {{item}}  
   

ok,数据的遍历,动态添加全部搞定,是不是很简单!
如果把arr数组改成arr=[{name:”小明”,age=20},{name:”xiaosan”,age:24}]
那么我就可以通过item.name来调取小明,item.age调取20,这些和thinkPHP里面的smart模板有些类似哦!

点击阅读原文,查看详细内容

转载请注明:CodingBlog » AngularJS框架(一)

喜欢 (0)or分享 (0)
发表我的评论
取消评论

*

表情