angular学习笔记

20150605

 

         目前，在学习angularJS，这个前端框架基于JS语言，与JQUERY为不同思想的产品，jquery简单易于上手，学会使用$()，学会怎么取DOM节点，再运用baidu，基本上，可以完成基础的事情，而angular更像是html都已经固化，直接在js脚本中操作数据，放弃了用JS来操作html,而是直接操作数据，这个理念可以从shopcar（购物车）这个例子中，得到体现，下面会贴出shopcar和filter的angularJS的代码，相信，通过阅读代码，可以心领神会到angular的精髓和优势所在。

         下面就梳理一下，通过写两个demo：shopcar和filter的一些学习笔记和值得注意的知识点。

1，  使用bootstrap:

.container：是bootstrap的容器，要将html内容放在容器内，显示出的html才会居中显示，才能使用.col-lg-2的栅格系统。

下面是用boot的class将input和button放在一行的代码，网上有，可以直接复制：

（这里所有的html代码使用sublime的简单规则，想了解这个规则的可以自行百度）

div.input-group>div.input-group-btn+input.form-control+div.input-group-btn

 

2，  双向数据绑定：

这个是我感觉，angular最为nb的一个方面，可以用脏检查机制将model和view中的数据进行监测（$apply和$watch），哪边的数据更改了，就会体现出来，很棒！

 

         3，forEach(data,function(value,key){              })                         //这里的key就是数据的索引值index

 

         4，ng-show=”data.length”

ng-show=”!data.length”

这两个标签属性可以控制这个标签的显示/隐藏

 

         5，脏检查机制还要在日后的练习和实践中总结使用的方法。

 

         6，{{function(           )}}，里面可以放function，function可以return一些值

 

         7，controller之间共享数据：.factory()服务，服务是angular重要的数据容器，在日后要学会使用。

 

         8，数据处理可以直接在html里面做处理：

                   Ng-repeat=”I in data |     filter: ‘string’ |orderBy : ‘-id’  ”

                   Filter里面可以放string，也可以放model，直接用model的数据来过滤data

                   如果想根据某个字段过滤:html.ng-model=’search.id’

 

         9，class变换用ng-class的真假来实现，ng-class=’{className:true/false}’

                   true/false---也可以变换成表达式&&

 

前端工程师必备技能：html5和css3，多做几个angular的demo就要学习这两个东西，非常重要！