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 ...
随机推荐
- LoadRunner常见问题整理(转)
首先要感谢群友的无私分享,才能得到这篇好的学习资料,整理得太好了,所以收藏保存,方便以后学习. 一:LoadRunner常见问题整理 1.LR 脚本为空的解决方法: 1.去掉ie设置中的第三方支持取消 ...
- 备份 VPS 上得内容到国内
起源: 最近毕设快开题了,校园网进入了收费测试的阶段,得把车辆的数据库 down 下来.发现国内 down 的速度真心慢呢.于是乎使用了在美国的 VPS 来 down,果不其然,30M 左右的下载速度 ...
- 【译】 AWK教程指南 附录C-AWK的内建函数
C.1 字串函数 index( 原字串, 查找的子字串 ) 若原字串中含有欲寻找的子字串,则返回该子字串在原字串中第一次出现的位置,若未曾出现该子字串则返回0. 例如: $ awk 'BEGIN{ p ...
- Install minidwep-gtk
Hi to everyone in this time i'm going to show you how to install minidwep-gtk to test your own wifi ...
- python网络编程（六）---web客户端访问
1.获取web页面 urllib2 支持任何协议的工作---不仅仅是http,还包括FTP,Gopher. import urllib2 req=urllib2.Request('http://www ...
- GCC编译源代码的四个步骤【转】
GCC编译C源代码有四个步骤:预处理---->编译---->汇编---->链接. 可以利用GCC的参数来控制执行的过程,这样就可以更深入的了解编译C程序的过程. 下面将通过对一个程序 ...
- leetcode@ [72/115] Edit Distance & Distinct Subsequences (Dynamic Programming)
https://leetcode.com/problems/edit-distance/ Given two words word1 and word2, find the minimum numbe ...
- 说说通信设置方式之hostonly
Vmnetcfg.exe是配置它的网络. 虚拟机,虚拟出来有两个.VMnet1和VMnet8. ************************若用hostonly,则需要将VMnet1给启用.*** ...
- void类型及void指针
1.概述 许多初学者对C/C 语言中的void及void指针类型不甚理解,因此在使用上出现了一些错误.本文将对void关键字的深刻含义进行解说,并 详述void及void指针类型的使用方法与技巧. 2 ...
- mssql触发器demo
USE [pos]GO/****** Object: Trigger [dbo].[tr_insert] Script Date: 06/26/2014 09:27:19 ******/SET ANS ...