argularJs笔记1

ft4453080

浏览: 14475 次
性别:
来自: 天津

最近访客更多访客>>

richary

wwh_1

akk27

iwlk

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (15)

社区版块

存档分类

背景：

【吐槽】开始：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);使页面中的绑定生效。注意这个针对的是页面级别的，所以写一次就好。

分享到：

argularJs笔记2 | 处理https请求

2015-05-13 16:03
浏览 535
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论