angularjs学习总结一(表达式、指令、模型)
一：自执行匿名函数
(function(){
/*code*/
})();
自执行匿名函数：
常见格式：(function() { /* code */ })();
解释：包围函数（function(){})的第一对括号向脚本返回未命名的函数，随后一对空括号立即执行返回的未命名函数，括号内为匿名函数的参数。
作用：可以用它创建命名空间，只要把自己所有的代码都写在这个特殊的函数包装内，那么外部就不能访问，除非你允许(变量前加上window，这样该函数或变量就成为全局)。各JavaScript库的代码也基本是这种组织形式。
总结一下，执行函数的作用主要为 匿名 和 自动执行,代码在被解释时就已经在运行了。
1：代码被加载时自动执行
2：避免全局变量被污染
二：use strict 严格模式
1：消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
2：消除代码运行的一些不安全之处，保证代码运行的安全；
3：提高编译器效率，增加运行速度；
4：为未来新版本的Javascript做好铺垫。
三：angularjs双向绑定
ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
举例：
<!doctype html>
<html ng-app="">
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
</script>
</head>
<body>
<p><input type="text" name="myName" ng-model="name"/></p>
<h1>hello {{name}}</h1>
</body>
</html>
四：脚本位置
我们建议把脚本放在 <body> 元素的底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
五：ng-bind指令
ng-init 指令初始化 AngularJS 应用程序变量
<!doctype html>
<html ng-app="">
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
</script>
</head>
<body>
<div ng-init="firstname='John'">
<p>
<span ng-bind="firstname"></span>
</p>
</div>
</body>
</html>
六：AngularJS 表达式
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
举例：
<!doctype html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
</script>
</head>
<body>
<div ng-app="" ng-init="price=5.0;count=4">
<p>我的第一个表达式：{{5 + 5}}</p>
<p>totalPrice:{{price * count}}</p>
</div>
</body>
</html>
七：AngularJS 应用
AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。
ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。
举例：
<!doctype html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>firstname:<input type="text" ng-model="firstname"/></p>
<p>lastname:<input type="text" ng-model="lastname"/></p>
<p>name:{{firstname +" "+ lastname}}</p>
</div>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.firstname = 'Jhon';
$scope.lastname = 'tom';
});
</script>
</body>
</html>
八：angularjs兼容html5，只需要在ng指令前面加上data即可
html5新特性：type类型 number数字、date 日期、month 月份
<!doctype html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
</script>
</head>
<body>
<div data-ng-app="" data-ng-init="price=5;count=4">
<input type="number" ng-model="count"/>
<input type="number" ng-model="price"/>
<p>totalPrice:{{price * count}}</p>
<input type="date" ng-model="date"/>
<input type="month" ng-model="month"/>
</div>
</body>
</html>
九：ng-repeat 指令会重复一个 HTML 元素
AngularJS 完美支持数据库的 CRUD（增加Create、读取Read、更新Update、删除Delete）应用程序。
把实例中的对象想象成数据库中的记录。
<!doctype html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
</script>
</head>
<body>
<div data-ng-app="" data-ng-init="names=[
{'name':'tom','country':'china'},
{'name':'jack','country':'usa'},
{'name':'lucy','country':'japan'}]">
<p>使用ng-repeat循环遍历数组</p>
<div data-ng-repeat="x in names">
{{x.name + " "+ x.country}}
</div>
</div>
</body>
</html>
十:验证用户输入
以上实例中，提示信息会在 ng-show 属性返回 true 的情况下显示。
举例：
<!doctype html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
</script>
</head>
<body>
<div ng-app="">
<form name="myForm" action="" method="get">
<p><input type="text" name="myName"/></p>
<p>
<input type="password" name="myPwd" ng-model="myPwd"/>
<span ng-show="myPwd.length > 8">密码长度不超过8</span>
</p>
</form>
</div>
</div>
</body>
</html>
angularjs学习总结一(表达式、指令、模型)的更多相关文章
- 【AngularJS学习笔记】01 指令、服务和过滤器
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 比如: ng-app 指令初始化一个 AngularJS 应用程序.注意ng-app一般为空,如果值不为空,就得加这样一句代码va ...
- angularjs学习第六天笔记（指令简介学习）
您好,由于周末有事情,没哟学习angularjs,几天晚上开始继续学习angularjs,坚持加油每一天.谢谢 接着上周五学习了表单验证以后,今天开始学习angularjs中一个非常重要的模块:指令 ...
- AngularJs学习笔记3——自定义指令
指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...
- AngularJS学习笔记(四) 自定义指令
指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
- 《AngularJS学习整理》系列分享专栏
<AngularJS学习整理>系列分享专栏 <AngularJS学习整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/re ...
- AngularJS学习笔记（四）内置指令
说说指令 不得不赞叹,指令是ng最为强大的功能之一,好吧,也可以去掉之一,是最强大的功能.ng内置了许多自定义的指令,这避免了我们自己去造轮子.同时,ng也提供了自定义指令的功能,可以让我们的页面元素 ...
- AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...
- AngularJS系统学习之Directive（指令）
本文转自https://www.w3ctech.com/topic/1612 原文作者: Nicolas Bevacqua 原文:AngularJS’ Internals In Depth, Part ...
- AngularJS学习之旅—AngularJS 指令(三)
1.AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令.2.Angu ...
随机推荐
- 陈灯WGF双缓冲绘图框架
“木丸子童屋”,专售各类儿童玩具,价格优惠,请大家多多支持:http://shop65552598.taobao.com/ WGF(windows graphic foundation)为window ...
- Console.WriteLine()与MessageBox.Show()的区别
Console.WriteLine(); 将当前行终止符写入标准输出流 在学习控制台应用程序时经常用,输出到控制台 MessageBox.Show(); 显示可包含文本.按钮和符号(通知并指示用户) ...
- Cppcheck代码分析（1）
一.检查点 1.自动变量检查: 返回自动变量(局部变量)指针 2.越界检查: 数组越界返回自动变量(局部变量)指针 3.类检查: 构造函数初始化 4.内存泄露检查: 5.空指针检查: 6.废弃函数检查 ...
- 基于野火M3开发板（STM32F103VET6）的迷宫小球（重力感应控制）游戏开发
2013-03-03 这是研一上学期<实时嵌入式系统实验>课程的大作业,是利用野火板的资源,加上一个AHRS(Attitude and Heading Reference System,姿 ...
- 基于adt-bundle的Android开发环境搭建
web与移动是当今的热门,怎么说都得会一点,完全不懂是不行的. 一直想玩一下移动开发,穷屌丝暂时没有iPhone和Mac,所以先拿Android开刀. 之前也有想过玩一下Android,但是都被各种博 ...
- OpenCV中的常用函数
1.cvLoadImage:将图像文件加载至内存: 2.cvNamedWindow:在屏幕上创建一个窗口: 3.cvShowImage:在一个已创建好的窗口中显示图像: 4.cvWaitKey:使程序 ...
- POJ 3764 （异或+字典树）
早就听过用字典树求异或最大值,然而没做过.发现一碰到异或的题就GG,而且因为以前做过的一道类似的题(事实上并不类似)限制了思路,蠢啊= =. 题意:一棵带权的树,求任意两点间路径异或的最大值. 题解: ...
- CP2102模块介绍（USB转uart）
1.主芯片为CP2102,安装驱动后生成虚拟串口2.USB取电,引出接口包括3.3V(<40mA),5V,GND,TX,RX,信号脚电平为3.3V,正逻辑3.板载状态指示灯.收发指示灯,正确安装 ...
- hdoj 2084 数塔
数塔 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...
- 了解CSS/CSS3原生变量var
一.变量是个好东西 在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处. 随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,C ...