Angular随笔第一课
一、调用angular
- 加载angular.js库（可以从google的cdn中加载类库,https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js，也可以下载到本地，楼主我就是下载到本地来引入代码的）
- 使用ng-app指令告诉angular应该管理dom中的哪一部分。
二、使用ng-app申明angular的边界
你可以使用ng-app指令告诉angular应该管理页面的哪一块，如果你正在构建一款纯angular应用，那么你应该把ng-app指令写在<html>标签中。
Eg:<html ng-app></html>
或者可以让angular只管理页面中的一部分
Eg:<html><div ng-app></div></html>
现在写一个简单的列子
<!DOCTYPE html>
<html ng-app = 'myApp'>
<head>
<title></title>
<meta name="name" content="content" charset="utf-8">
<script src="angular-1.4.2/angular.js" type="text/javascript"></script>
<script type="text/javascript">
angular.module('myApp',[]).controller('textController',function($scope){
$scope.someText = 'you have started your journey';
})
</script>
</head>
<body ng-controller="textController">
<p>{{someText}}</p>
</body>
</html>
在页面中会显示 you have started your journey。
三、显示文本
在angular中，数据绑定有2种实现方法，一种是前面写的{{}}花括号的形式，另外一中就是使用ng-bind属性的指令形式。<p ng-bind=”someText”></p>
在书写中，我们会推荐使用第二种数据绑定的方法,原因如下：
- 在使用花括号的时候，第一个加载的页面，也就是应用中的index.html，其未被渲染的模板可能被用户看到。而使用第二种方法的视图就不会遇到这个问题了。（原因是：浏览器需要首先加载html页面，渲染他，然后angular才有机会把他解释成你期望看到的页面）
四、表单输入
我们可以使用ng-model属性把元素绑定到你的模型属性上
<form ng-controller="some">
<input type="checkbox" ng-model="youcheck">
</form>
- 当用户选中了复选框之后，some中的$socpe.youcheck=true,而反选复选框会让$socpe.youcheck=false;
- 如果你在some中把$socpe.youcheck的值设置为true,那么UI中的复选框就会变成选中的状态，反之就不会选中。
举一个列子
<form ng-controller="startUp">
Strat: <input type="text" ng-change="number()" ng-model="startnum">
add : {{needed}}
</form>
<script type="text/javascript">
angular.module('myApp',[]).controller('startUp',function($scope){
$scope.startnum = 0;
$scope.number = function(){
$scope.needed = $scope.startnum * 10;
}
})
</script>
当我们在文本框输入值的时候，我们会看到add的值是随时改变的。但是这样的话，就会出现一个问题，即如果还有其他输入框也绑定到模型中的这个属性上，会怎样呢？
我们可以引入$scope中的$watch()的函数----可以调用$watch()函数来监视一个表达式，当这个表达式发生改变时就会调用一个回调函数。
下面我们用这一技术重写
<script type="text/javascript">
angular.module('myApp',[]).controller('startUp',function($scope){
$scope.startnum = 0;
number = function(){
$scope.needed = $scope.startnum * 10;
}
$scope.$watch('startnum',number);
})
</script>
在某些情况下，你不想一有变化就立刻做出反应，直到用户告诉你他已经准备好了，列如发出一条确认信息之后（如下所示，是在form表单上面使用的列子，当表单提交的时候可以执行这个函数）
<form ng-controller="form" ng-submit="request()">
start:<input ng-change="computer()" ng-model="startform">
add: {{addform}}
<button>click me</button>
</form> <script type="text/javascript">
angular.module('myApp',[]).controller('form', function ($scope) {
$scope.computer = function () {
$scope.addform = $scope.startform * 10;
}
$scope.request = function () {
window.alert('sorry');
}
})
</script>
同时，在提交表单的时候，ng-submit还会自动阻止浏览器执行默认的post操作
onclick ----ng-click ondbclick-----ng-dbclick
Angular随笔第一课的更多相关文章
- Angular随笔第二课
一. 列表表格以及其它迭代型元素 ng-repeat 可能是最有用的angular指令了,它可以根据集合中的项目一次创建一组元素的多份拷贝.不管在什么地方,只要你想创建一组事物的列表,你就可以使用这 ...
- Spark 3000门徒第一课随笔
昨晚听了王家林老师的Spark 3000门徒系列课程的第一课,把scala基础过了一遍,对ArrayBuffer有了新的认识: Array本身创建后不可修改ArrayBuffer可修改import s ...
- vue.js学习（第一课）
学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...
- Magento学习第一课——目录结构介绍
Magento学习第一课--目录结构介绍 一．Magento为何强大 Magento是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为zen ...
- <-0基础学python.第一课->
初衷:我电脑里面的歌曲很久没换了,我想听一下新的歌曲,把他们下载下来听,比如某个榜单的,但是一首一首的点击下载另存为真的很恶心 所以我想有没有办法通过程序的方式来实现,结果还真的有,而且网上已经有有人 ...
- 留念 C语言第一课简单的计算器制作
留念 C语言第一课简单的计算器制作 学C语言这么久了. /* 留念 C语言第一课简单的计算器制作 */ #include<stdio.h> #include<stdlib.h ...
- MFC学习-第一课 MFC运行机制
最近由于兴趣爱好,学习了孙鑫的MFC教程的第一课.看完视频了,自己便用visual studio 2010尝试了MFC编程,其中遇到了一些问题. 1.vs2010不像vs6.0那样可以新建一个空的MF ...
- OpenCV 第一课(安装与配置)
OpenCV 第一课(安装与配置) win10,opencv-2.4.13, 安装, vs2013, 配置 下载安装软件 官网OpenCV下载地址下载最新版本,我下载的是opencv.2.4.13,然 ...
- 【第一课】神奇的Context
初学Android的困惑 初学Android跳转页面的时候,往往教程里是这么写的: Intent intent = new Intent(); //MyActivity就是当前的Activity,It ...
随机推荐
- RPC框架原理与实现
了解一个框架最好的思路就是寻找一个该类型麻雀虽小五脏俱全的开源项目,不负所期,轻量级分布式 RPC 框架 RPC,全称 Remote Procedure Call(远程过程调用),即调用远程计算机上的 ...
- 【局域网聊天客户端篇】基于socket与Qt
前言 暑假把linux下的高级编程和网络编程学习了一遍,学习很重要,但是也得有个练手的地方,所以必须做做项目来认识下自己所学习的知识. 能够找到小伙伴一起做项目也是一件很快乐的事情的,很幸运的有两个小 ...
- mybatis新手入门常见问题集（持续更新）
一.参数为集合 Q:parameterType指的的类型是集合类型还是对象? A:都可以,甚至不用在xml中指定也可以.第一,mybatis会对传入的参数进行判断是不是list或者array,第二,m ...
- MySQL中字符串与数字比较的坑
公司项目代码中,某枚举字段数据库表中类型是char(1),在代码中,误以为是TINYINT,所以用数字筛选,后来发现结果不对.发现了一个现象,用数字0筛选会把所有的记录给筛选出来. 经过排查发现是在M ...
- Wireshark的专家模式
-------------------------------本文作为留档文章已备查看----------------------------------- Wireshark的每个协议的解析器(原始 ...
- Android 性能优化——之控件的优化
Android 性能优化——之控件的优化 前面讲了图像的优化,接下来分享一下控件的性能优化,这里主要是面向自定义View的优化. 1.首先先说一下我们在自定义View中可能会犯的3个错误: 1)Use ...
- 初识Android触摸事件传递机制
前言 今天总结的一个知识点是Andorid中View事件传递机制,也是核心知识点,相信很多开发者在面对这个问题时候会觉得困惑,另外,View的另外一个难题滑动冲突,比如在ScrollView中嵌套Li ...
- 跟Microsoft.AspNet.Identity学习哈希加盐法
什么是哈希加盐法? 废话少说:对于MD5这种加密算法,同样的密码每次加密后得到的密文是一样的,所以黑客可以利用已知的密码库(彩虹库)对目标数据库密文进行对比进行攻击. 怎样解决:哈希加盐法,以下是网上 ...
- 三、Dotnet Core Code First 创建数据库
1.在项目中创建Models文件夹2.在Models文件夹中建立 表的属性类:如 User类.3.在Models文件夹创建DataContext 继承DbContext类(可以选择重写OnModelC ...
- 针对Mac的DuckHunter攻击演示
0x00 HID 攻击 HID是Human Interface Device的缩写,也就是人机交互设备,说通俗一点,HID设备一般指的是键盘.鼠标等等这一类用于为计算机提供数据输入的设备. DuckH ...