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 ...
随机推荐
- MSP430 flash的操作
今天顺便研究了一下msp430的flash操作,很多人也许看了我的博客,会发现网站上有很多的人总结得比我要好,这点我承认,因为自己能力有限,但是,从这篇博客起,我会参照以前大神们写的博客,添加大神们写 ...
- jvm 漫谈 笔记
1.Jvm到底是什么呢? Jvm其实就是模拟一台计算机,每种cpu都有自己的指令集,jvm自己设置一套指令集,这就是我满看的的字节码,然后jvm需要执行这些字节码,其实这些字节码最终直接对应到cpu的 ...
- 【暑假】[实用数据结构]UVAlive 3644 X-Plosives
UVAlive X-Plosives 思路: “如果车上存在k个简单化合物,正好包含k种元素,那么他们将组成一个易爆的混合物” 如果将(a,b)看作一条边那么题意就是不能出现环,很容易联想到K ...
- codeforce 600A - Extract Numbers
学习string #include <bits/stdc++.h> #define eps 1e-8 #define M_PI 3.141592653589793 ; using name ...
- SQL2008R2日志传送需要注意点
当SQL2008R2采用日志传送方式进行备份/还原时需要注意事项 主从数据库机器必须是局域网内可互相通过共享访问的主机 主从数据库须添加系统帐号,并将sqlagent服务的启动帐号设定为此帐号,最好主 ...
- IE比Chrome强的一个地方
今天在开发时,调试一个功能.死活显示和同事不一样,他是测试过正常的,我的Chrome显示死活不对. 最后要重新部署了,才想起会不会是缓存的问题.清除Chrome缓存,再一试,一切正常. IE有一个功能 ...
- UIBezierPath精讲
前言 笔者在写本篇文章之前,也没有系统学习过贝塞尔曲线,只是曾经某一次的需求需要使用到,才临时百度看了一看而且使用最基本的功能.现在总算有时间停下来好好研究研究这个神奇而伟大的贝塞尔先生! 笔者在学习 ...
- Android 查看内存
文章参照自:http://stackoverflow.com/questions/2298208/how-to-discover-memory-usage-of-my-application-in-a ...
- 爬去知乎百万用户信息之UserTask
UserTask是获取用户信息的爬虫模块 public class UserManage { private string html; private string url_token; } 构造函数 ...
- MSSQLSERVER数据库- 慎用SELECT INTO复制表
很多时候我们习惯于用SELECT INTO复制一个表或表结构,因为它方便,快捷,而且在某些情况下效率比INSERT INTO 效率要高一些.但是要注意: SELECT INTO 复制表或表结构的时候, ...