一:自执行匿名函数

(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学习总结一(表达式、指令、模型)的更多相关文章

  1. 【AngularJS学习笔记】01 指令、服务和过滤器

    AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 比如: ng-app 指令初始化一个 AngularJS 应用程序.注意ng-app一般为空,如果值不为空,就得加这样一句代码va ...

  2. angularjs学习第六天笔记(指令简介学习)

    您好,由于周末有事情,没哟学习angularjs,几天晚上开始继续学习angularjs,坚持加油每一天.谢谢 接着上周五学习了表单验证以后,今天开始学习angularjs中一个非常重要的模块:指令 ...

  3. AngularJs学习笔记3——自定义指令

    指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...

  4. AngularJS学习笔记(四) 自定义指令

    指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...

  5. 《AngularJS学习整理》系列分享专栏

    <AngularJS学习整理>系列分享专栏   <AngularJS学习整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/re ...

  6. AngularJS学习笔记(四)内置指令

    说说指令 不得不赞叹,指令是ng最为强大的功能之一,好吧,也可以去掉之一,是最强大的功能.ng内置了许多自定义的指令,这避免了我们自己去造轮子.同时,ng也提供了自定义指令的功能,可以让我们的页面元素 ...

  7. AngularJS学习笔记二:AngularJS指令

    AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...

  8. AngularJS系统学习之Directive(指令)

    本文转自https://www.w3ctech.com/topic/1612 原文作者: Nicolas Bevacqua 原文:AngularJS’ Internals In Depth, Part ...

  9. AngularJS学习之旅—AngularJS 指令(三)

    1.AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令.2.Angu ...

随机推荐

  1. 【原】Storm 守护线程容错机制

    Storm入门教程 1. Storm基础 Storm Storm主要特点 Storm基本概念 Storm调度器 Storm配置 Guaranteeing Message Processing(消息处理 ...

  2. ASIHTTPRequest 编码问题

    今天在模拟登陆时,中文的用户名一直登陆不上,对用户名进行了各种转码还是不能解决. 在这个问题上一直卡了半个多小时,最终才发现根本不是用户名的编码问题,而是使用的第三方网络插件的ASIHTTPReque ...

  3. SQL注入攻击及防范

    一.什么是SQL注入1.SQL注入的定义     SQL注入(SQL Injection) 利用了程序中的SQL的漏洞,进行攻击的方法. 2.SQL注入举例  1)利用SQL语法错误获取数据库表的结构 ...

  4. 关于win10安装VisualSVN遇到的一个问题及解决办法

    问题:在win10系统中安装VisaulSVN遇到问题,错误提示:There is problem with this Windows Installer package. A DLL require ...

  5. Java 开发@ JDBC链接SQLServer2012

    下面请一字一句地看,一遍就设置成功,比你设置几十遍失败,费时会少得多. 首先,在连接数据库之前必须保证SQL Server 2012是采用SQL Server身份验证方式而不是windows身份验证方 ...

  6. 关于mac 80端口问题

    使用 maven启动 jettry时 ,jetty使用的是80端口 ,但是 mac 在1024以下的端口似乎是不让随便使用的. 在网上查了好多方式,其中的一种说是做端口转发,其实也就是把80转换成别的 ...

  7. android中少用静态变量(android静态变量static生命周期)

    在android中,要少用静态变量. 我现在做的一个应用中,之前的开发人员使用静态变量来存储cookie,这个全局的静态变量用来验证身份. 这时客户反应,应用长时间不使用,再次使用,会提示身份过期. ...

  8. Android实例-MotionSensor加速度(XE8+小米2)

    结果: 1. 实例代码: unit Unit1; interface uses System.SysUtils, System.Types, System.UITypes, System.Classe ...

  9. Android实例-闪光灯的控制(XE8+小米2)

    unit Unit1; interface uses System.SysUtils, System.Types, System.UITypes, System.Classes, System.Var ...

  10. 【Stage3D学习笔记续】山寨Starling(一):从事件说起

    我在GitHub上新开了一个项目:https://github.com/hammerc/hammerc-study-Stage3D 山寨的Starling版本我取名叫做Scorpio2D,以后的笔记中 ...