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

zhangyaochun

浏览: 2596224 次
性别:
来自: 北京

最近访客更多访客>>

xiao0556

u012363178

yonysun

jacky2067

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

书籍推荐

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页面中需要他管理的

<html ng-app>

ng-controller

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

<body ng-controller="bodyController">

<script>
     function bodyController(){

     }
</script>

ng-repeat

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

<ul ng-controller="jobController">
     <li ng-repeat="job in jobs">
         <a href="http://www.wandoujia.com/join#getJobInfo={{job.id}}">{{job.name}}</a>
     </li>
</ul>

<script>
//@tip 如果你很细致地看到这里，诚挚地欢迎加入我们
// http://www.wandoujia.com/join#getJobInfo=5
var jobs = [
   {name:"产品设计师",id:1},
   {name:"资深视觉设计师",id:3},
   {name:"用户界面工程师",id:5},
   {name:"Windows 研发工程师",id:6},
   {name:"Android 研发工程师",id:7}
];

function jobController($scope){
    $scope.jobs = jobs;
}
</script>

补充一些：

$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标签，可以使用这两个指令

<img ng-src="***/{{hash}}" />
<a ng-href="***/{{hash}}"></a>

ng-bind

显示并刷新文本

//方式1：花括号
<p>{{param}}</p>

//方式2：基于属性
<p ng-bind="param"></p>

ng-style

可以直接设置元素的css style

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

<input value="set" type="button" ng-click="myStyle={color:'red'}">

<span ng-style="myStyle">test</span>

<pre>myStyle={{myStyle}}</pre>

ng-readonly

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

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

<input type="checkbox" ng-model="checked" />

<input type="text" ng-readonly="checked" value="test"/>

再说说那个

$scope

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

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

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

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

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

<div ng-controller="ParentController">
    <div ng-controller="ChildController"></div>
</div>

说明：

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

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

结语：

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

分享到：

which命令 | mac下如何查IP

2013-12-09 13:01
浏览 1976
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论