背景：
【吐槽】开始：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);使页面中的绑定生效。注意这个针对的是页面级别的，所以写一次就好。
相关推荐
ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记...
ssh学习笔记1 ssh学习笔记1 ssh学习笔记1 ssh学习笔记1 ssh学习笔记1 ssh学习笔记1 ssh学习笔记1
笔记记录分享-笔记记录分享网站-笔记记录分享网站源码-笔记记录分享网站java代码-笔记记录分享网站设计与实现-基于springboot的笔记记录分享网站-基于Web的笔记记录分享网站设计与实现-笔记记录分享项目-笔记记录...
这份“数据结构高分笔记part1”显然是为了帮助备考研究生入学考试的专业学生准备的，旨在提供深入的数据结构理解，助力他们在考试中取得优异成绩。 笔记可能涵盖以下几个关键知识点： 1. **基本概念**：首先，笔记...
狂神SpringBoot笔记+源码 狂神SpringBoot笔记+源码 狂神SpringBoot笔记+源码 狂神SpringBoot笔记+源码 狂神SpringBoot笔记+源码 狂神SpringBoot笔记+源码 狂神SpringBoot笔记+源码 狂神SpringBoot笔记+源码 狂神...
小程序源码 云笔记 (代码+截图)小程序源码 云笔记 (代码+截图)小程序源码 云笔记 (代码+截图)小程序源码 云笔记 (代码+截图)小程序源码 云笔记 (代码+截图)小程序源码 云笔记 (代码+截图)小程序源码 云笔记 (代码+...
有道云笔记窗口大小调整技巧 在使用有道云笔记时，调整窗口大小是非常重要的操作。合理的窗口大小设置可以提高工作效率和阅读体验。本文将介绍如何调整有道云笔记的窗口大小，提高笔记编辑和阅读体验。 一、调整...
2020谷粒商城笔记资料，谷粒商城2020文档课件笔记+源代码（基础篇+高级篇） 谷粒商城2020文档课件笔记+源代码（基础篇+高级篇） 2020谷粒商城笔记资料（基础篇+高级篇） 尚硅谷谷粒商城笔记，很全。基础篇，高级篇...
S7-200 Smart入门笔记1-8 程序合集 S7-200 Smart入门笔记1——流水灯 按钮 S7-200 Smart入门笔记1——流水灯 定时器 S7-200 Smart入门笔记2——读时钟 S7-200 Smart入门笔记3——呼吸灯 S7-200 Smart入门笔记4——...
1、JavaSE：Java入门 2、JavaSE：基础语法 3、JavaSE：流程控制 4、JavaSE：方法 5、JavaSE：数组 6、JavaSE：面向对象 7、JavaSE：异常机制 8、JavaSE：常用类 9、JavaSE：集合框架 10、JavaSE：IO流 11、JavaSE：...
【大物上册手写笔记.pdf】是一份来自西电大学的高质量物理学习资料，主要涵盖了大学物理上册的内容。这份笔记由一位期末成绩达到90分以上的同学编写，因此具有很高的参考价值，适合学生在期末复习时使用。笔记内容...
java笔面试题1-6章 Java相关课程系列笔记之一Java学习笔记 Java相关课程系列笔记之四JDBC学习笔记 Java相关课程系列笔记之六HTML学习笔记 Java相关课程系列笔记之七CSS学习笔记 Java相关课程系列笔记之八JavaScript...
《为知笔记4.2.476免登录——本地存储与便捷知识管理》 为知笔记，全称为“WizNote”，是一款受到广大用户喜爱的个人知识管理工具。其4.2.476版本提供了免登录的功能，这对于那些希望在不登录账户的情况下仅进行...
1、该资源包括项目的全部源码，下载可以直接使用！ 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 3、本资源作为“参考资料”如果需要实现其他功能，...
为知笔记开源项目程序源码，实现云笔记功能需要自己搭建服务器 为知笔记开源项目程序源码，实现云笔记功能需要自己搭建服务器 为知笔记开源项目程序源码，实现云笔记功能需要自己搭建服务器 为知笔记开源项目程序...
js笔记js笔记js笔记js笔记
有道笔记本桌面版是网易有道出品的电子笔记本软件。 特色功能： 1.自动增量同步 2.按照笔记本来整理笔记 3.富文本编辑笔记，可...5.邮件功能发送笔记，快速分享笔记内容。 6.密码保护锁定窗口，保护用户隐私安全。
高手笔记 软件开发软件使用笔记 本资源是关于高手笔记 软件开发软件使用笔记的知识点总结。主要讲解了如何构建带内存错误检查的 gcc，以及 QEMU 的使用笔记。 一、构建带内存错误检查的 gcc 高手笔记软件开发软件...
java笔记java笔记java笔记java笔记java笔记java笔记java笔记
oracle adg安装个人笔记oracle adg安装个人笔记oracle adg安装个人笔记oracle adg安装个人笔记oracle adg安装个人笔记oracle adg安装个人笔记oracle adg安装个人笔记oracle adg安装个人笔记oracle adg安装个人笔记...