11月读书活动之《AngularJS有感》

阅读更多

 

    前言：

 

      已经不记得具体开始接触Angular的时间了，也很久没来参加社区的活动了，进入了创业公司，开始了新的忙碌而又充满挑战的职业生涯。不过还是希望自己坚持随便写写的习惯，保持下去，继续活跃在社区。

     

      忠心希望试读活动越办越好~

 

    正文：

 

      以前很多人抱怨angular的资料比较少，虽然出自名门（来自Google），其实相对而言，在早期的时候：是的。

 

      去infoQ上看，angular的tag确实也不是很多。前一段Dave Gruber对热门的js框架发展就行了深入分析，其中就包括Angular，以及Backbone这样的。

 

      从项目贡献者的总数，代码行数，总提交量等等维度，Angular已经展现出大社区的样子了。写本文的时候，特地去看了一下github上：

 

• 官网：http://angularjs.org/
• star 已经到了17681了
• fork  目前是4970
• contributors 539
• commits 3832
• 目前最新版本1.2.4

   了解Dart的同学，应该也看到谷歌开始把AngularJS移植到Dart，命名：Augular.dart.

 

   （它不是一个调用JavaScript的包装器，用Dart编写的），AngularJS Is Being Ported to Dart

 

    讲这么多其实想说，fe们，如果你还没有开始接触angular，或者对它不是很熟悉的话，加入到angular的队伍中来。

 

    本文我主要讲一下下面这个【不新不旧】的东西：

 

    注释：

 

     以下内容除了来自试读的Pdf，本人加了一些官方相关性的外链，还有各个api的地址，有兴趣的可以点击看看，api地址来自：http://docs.angularjs.org/api/   

 

    指令：

 

      angular的一个特点：模板可以写成HTML，加入了一些新的属性。

 

 

    ng-app

 

• 告诉angular页面中需要他管理的

 

 

 

   ng-controller

 

• 指定每一个控制器负责监视视图的哪个部分

 

 

   ng-repeat

 

• 根据集合中的项目一次创建一组元素的多份拷贝，比如你遍历创建一组列表。

 

     

         {{job.name}}
     

 

       补充一些：

 

•  $index 返回当前的元素序号
•  $first  是否是第一个元素
•  $middle 是否是中间的某个元素
•  $last  是否是最后一个元素

      

   ng-model

 

• 把输入数据绑定到模型中的一部分属性上 

 

    事件处理指令：

 

• ng-click
• ng-dblclick
• ng-submit  自动阻止浏览器默认行为
• ng-change   对于输入元素来说，使用它来指定一个控制器方法，一段修改输入值，会被调用

   ng-show和ng-hide

 

• 根据传递的表达式来显示和隐藏元素

   原理： 把元素的样式设置为display:block显示；display:none来隐藏

 

   ng-src和ng-href

 

• 对于img和a标签，可以使用这两个指令

 

 

   ng-bind

 

• 显示并刷新文本

//方式1：花括号
{{param}}

//方式2：基于属性

 

 

   ng-style

 

• 可以直接设置元素的css style

     测试的地方： http://jsfiddle.net/api/post/library/pure/

   

test

myStyle={{myStyle}}

 

 

   ng-readonly

 

• 如果表达式成立，readyonly的属性会设置到元素里面

     测试地址： http://jsfiddle.net/api/post/library/pure/  

 

 

 

   再说说那个

   

    $scope

 

    其实上面的一些例子里面已经出现了。

 

    在Controller的函数形参里面，我们也把数据定义到$scope下面的一个键里面。

 

    可以通过$scope对象把数据模型和函数暴露给视图。

 

    $scope当成一个上下文环境，它让数据模型的变化可以观察。

 

    下面的实例中控制器嵌套了：

 

 

    说明：

 

      其实嵌套发生在$scope对象上，父控制器对象上的$scope会被传递给内部嵌套控制器的$scope。

 

      $scope.$watch可以监听你的数据模型变化，会返回一个函数

 

 

   结语：

 

     再次非常感谢社区和博文视点选择这些比较热门的技术图书来给大家试读，作为社区的老人，这一次必须顶起。