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 ...
随机推荐
- 【原】Storm 守护线程容错机制
Storm入门教程 1. Storm基础 Storm Storm主要特点 Storm基本概念 Storm调度器 Storm配置 Guaranteeing Message Processing(消息处理 ...
- ASIHTTPRequest 编码问题
今天在模拟登陆时,中文的用户名一直登陆不上,对用户名进行了各种转码还是不能解决. 在这个问题上一直卡了半个多小时,最终才发现根本不是用户名的编码问题,而是使用的第三方网络插件的ASIHTTPReque ...
- SQL注入攻击及防范
一．什么是SQL注入1．SQL注入的定义 SQL注入(SQL Injection) 利用了程序中的SQL的漏洞,进行攻击的方法. 2．SQL注入举例 1)利用SQL语法错误获取数据库表的结构 ...
- 关于win10安装VisualSVN遇到的一个问题及解决办法
问题:在win10系统中安装VisaulSVN遇到问题,错误提示:There is problem with this Windows Installer package. A DLL require ...
- Java 开发@ JDBC链接SQLServer2012
下面请一字一句地看,一遍就设置成功,比你设置几十遍失败,费时会少得多. 首先,在连接数据库之前必须保证SQL Server 2012是采用SQL Server身份验证方式而不是windows身份验证方 ...
- 关于mac 80端口问题
使用 maven启动 jettry时 ,jetty使用的是80端口 ,但是 mac 在1024以下的端口似乎是不让随便使用的. 在网上查了好多方式,其中的一种说是做端口转发,其实也就是把80转换成别的 ...
- android中少用静态变量(android静态变量static生命周期)
在android中,要少用静态变量. 我现在做的一个应用中,之前的开发人员使用静态变量来存储cookie,这个全局的静态变量用来验证身份. 这时客户反应,应用长时间不使用,再次使用,会提示身份过期. ...
- Android实例-MotionSensor加速度(XE8+小米2)
结果: 1. 实例代码: unit Unit1; interface uses System.SysUtils, System.Types, System.UITypes, System.Classe ...
- Android实例-闪光灯的控制(XE8+小米2)
unit Unit1; interface uses System.SysUtils, System.Types, System.UITypes, System.Classes, System.Var ...
- 【Stage3D学习笔记续】山寨Starling（一）：从事件说起
我在GitHub上新开了一个项目:https://github.com/hammerc/hammerc-study-Stage3D 山寨的Starling版本我取名叫做Scorpio2D,以后的笔记中 ...