背景：
【吐槽】开始：Pexip是一家做视频会议的公司，近期好像是要和他们合作推他们的视频会议系统。对于这个公司和这个系统的资料相对都比较少。该公司官网上对于这个系统API或者SDK都几乎没有，目前为止找到的可以操作这个系统的资料还是从他们公司的人手上拿来的。拿着文档发现也不能直接用。需要参考他们搭建好的WebApp。JS一个个的down下来，HTML一个个的down下来。才发现和他们提供的API文档没有什么关系。硬着头皮去看HTML发现WebApp里好多ng系列标签，度娘告诉我说这个是argularJs。所以就开始了学习argularJs。
吐槽结束。
学习开始：
http://www.zouyesheng.com/angular.html#toc15
感谢作者，目前跟着这位作者的笔记在做。
第一个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>试验</title>
<script type="text/javascript" src="js/vendor/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/vendor/angular.js"></script>
</head>
<body>
<div ng-controller="BoxCtrl">
<div style="width: 100px; height: 100px; background-color: red;" ng-click="click()"></div>
<p>{{ w }} x {{ h }}</p>
<p>W: <input type="text" ng-model="w" /></p>
<p>H: <input type="text" ng-model="h" /></p>
</div>
<script type="text/javascript" charset="utf-8">
var BoxCtrl = function($scope, $element){
//$element 就是一个 jQuery 对象
var e = $element.children().eq(0);
$scope.w = e.width();
$scope.h = e.height();
$scope.click = function(){
$scope.w = parseInt($scope.w) + 10;
$scope.h = parseInt($scope.h) + 10;
}
$scope.$watch('w',
function(to, from){
e.width(to);
}
);
$scope.$watch('h',
function(to, from){
e.height(to);
}
);
}
angular.bootstrap(document.documentElement);
</script>
</body>
</html>总结起来就是用 ng-controller去做一个绑定，也就是指定了一个范围<div ng-controller="BoxCtrl">
在脚本里去声明一个这个绑定。 var BoxCtrl = function($scope, $element)
然后在这个绑定范围内的动作都写在这个function里。
最后angular.bootstrap(document.documentElement);使页面中的绑定生效。注意这个针对的是页面级别的，所以写一次就好。
131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
