AngularJS 1.x系列：AngularJS简介及第一个应用（2）
1. 安装AngularJS
1.1 AngularJS官网
Github源码：https://github.com/angular/angular.js
1.2 npm安装AngularJS
npm install angular
2. AngularJS应用的构成元素
◊ 模型（Model）：AngularJS应用中用于展示到页面的数据，本质是一个JavaScript对象。
◊ 视图（View）：View是用户所看到的网页内容，View是AngularJS指令与表达式经过解析后的DOM元素。
◊ 控制器（Controller）：AngularJS中用于处理业务逻辑的JavaScript方法。
◊ 作用域（Scope）：作用域可以理解为一个容器，在控制器（Controller）中可以访问这个容器（Scope），往容器中放入数据模型，在视图（View）中可以通过表达式将数据展现给用户。
◊ 指令（Directives）：扩展的HTML属性或标签，能够被AngularJS框架识别，根据不同的指令执行相应的动作。
◊ 表达式（Expressions）：用于向页面输出信息。
◊ 模板（Template）：AngularJS以HTML作为模板语言，AngularJS模板时间是HTML片段。
3. AngularJS第一个应用
示例：
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
</head>
<body>
{{"Hello AngularJS!"}}
</body>
</html>
说明：<html>标签中ng-app是AngularJS的一个内置指令，可以出现在任意位置。
ng-app两个作用：
(1). 启动AngularJS框架；
(2). AngularJS框架管理ng-app指令所在标签的开始标签到结束标签之间的所有DOM元素。
{{}}：是AngularJS的表达式形式，由两个嵌套的大括号构成，大括号中间为表达式内容。AngularJS会对表达式内容进行解析，将表达式内容输出到浏览器。
4. AngularJS表达式
AngularJS使用表达式把数据绑定到HTML。
4.1 表达式定义方式
AngularJS 表达式写在双大括号内：{{ expression }}。
4.2 表达式中的四则运算
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
</head>
<body>
四则运算：5 + 5 = {{ 5 + 5 }}
</body>
</html>
4.3 表达式中的逻辑运算
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
</head>
<body>
逻辑运算：true && false = {{ true && false }}
</body>
</html>
4.4 表达式与作用域
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
</head>
<body>
<div ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>
</body>
</html>
ng-init指令：用于初始化作用域。
5. AngularJS数据绑定
数据绑定是AngularJS框架在视图（View）与作用域（Scope）之间建立的数据同步机制。
5.1 双向绑定ng-model
AngularJS双向绑定：View的操作能实时同步到Scope中，Scope中的数据修改能够实时回显到View中。
ng-model 指令：用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("HelloCtrl", function($scope) {
$scope.text = "Hello AngularJS!";
});
</script>
</head>
<body>
<div ng-controller="HelloCtrl">
<input type="text" ng-model="text" /></div>
</body>
</html>
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="name" />
{{ name }}
</body>
</html>
注：上例中ng-app指令用于启动AngularJS应用。当AngularJS遇到ng-app指令时，会创建$rootScope作用域，为AngularJS的根作用域。
把ng-model制定作为属性添加到input标签中，AngularJS会在$rootScope作用域中添加属性。
当input表单中输入内容发生变化时，AngularJS会自动把输入的内容同步到作用域的属性中。
{{ name }}为AngularJS表达式形式，可以访问AngularJS作用域中的属性。AngularJS能够监控作用域中数据的变化，当数据发生变化时，页面实时更新显示内容。
5.2 单向绑定ng-bind
ng-bind指令：实现作用域（Scope）到视图（View）的单向数据绑定，和表达式功能类似。
<div>{{ text }}</div>
<div ng-bind="text"></div>
ng-bind与{{ expression }}区别：
在使用AngularJS表达式{{ expression }}时，如果遇到网络问题，会导致AngularJS加载缓慢，浏览器会直接把AngularJS表达式当作字符串渲染到页面中。
ng-bind指令在AngularJS没有加载完毕时不会解析执行，只有AngularJS加载完毕才会解析显示。
推荐使用ng-bind指令。
AngularJS 1.x系列：AngularJS简介及第一个应用（2）的更多相关文章
- Springboot 1.简介 及第一个demo
按照官网上的新建一个maven项目,然后将类引入pom.xml文件中 <?xml version="1.0" encoding="UTF-8"?> ...
- 测试框架httpclent 1.HttpClient简介及第一个demo
httpclient就是一个模拟 发送http请求的一个工具. 首先在pom.xml文件里面添加工具类 <dependencies> <dependency> <grou ...
- SpringBoot简介及第一个应用
一.Spring时代变换 1. Spring1.x 时代 Spring初代都是通过xml文件配置bean,随着项目的不断扩大,繁琐的xml配置,混乱的依赖关系,难用的bean装配方式,由此衍生了spr ...
- [原创]java WEB学习笔记04：Servlet 简介及第一个Servlet程序（配置注册servlet，生命周期）
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- 跟我学AngularJs:AngularJs入门及第一个实例
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...
- [后端人员耍前端系列]AngularJs篇：30分钟快速掌握AngularJs
一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...
- Angular系列----AngularJS入门教程05：双向绑定（转载）
在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...
- Angular系列----AngularJS入门教程00：引导程序（转载）
我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...
- Angular系列------AngularJS快速开始（转载）
Hello World! 开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”: 使用您喜爱的文本编辑器,创建一个HTML文件,例如:helloworld.html. ...
随机推荐
- Java开发笔记（二十五）方法的输入参数
前面通过main方法介绍了方法的定义形式,对于方法的输入参数来说,还有几个值得注意的地方,接下来分别对输入参数的几种用法进行阐述.一个方法可以有输入参数,也可以没有输入参数,倘若无需输入参数,则方法定 ...
- 十分钟(小时)学习pandas
十分钟学习pandas 一.导语 这篇文章从pandas官网翻译:链接,而且也有很多网友翻译过,而我为什么没去看他们的,而是去官网自己艰难翻译呢? 毕竟这是一个学习的过程,别人写的不如自己写的记忆深刻 ...
- OPC协议解析-OPC UA OPC统一架构
1 什么是OPC UA 为了应对标准化和跨平台的趋势,为了更好的推广OPC,OPC基金会近些年在之前OPC成功应用的基础上推出了一个新的OPC标准-OPC UA.OPC UA接口协议包含了之前的 ...
- 【学习笔记】【Javaweb】二、Session对象过期时间三种设置方法、Session失效监听器
一.前言 本文:https://www.cnblogs.com/Twobox/p/10361712.html 参考:https://www.cnblogs.com/diewufeixian/p/422 ...
- 转：sql server锁知识及锁应用
sql server锁(lock)知识及锁应用 提示:这里所摘抄的关于锁的知识有的是不同sql server版本的,对应于特定版本时会有问题. 一 关于锁的基础知识 (一). 为什么要引入锁 当多个用 ...
- python粗谈面向对象（二）
浅谈super() super并不是一个函数,是一个类名,形如super(B, self)事实上调用了super类的初始化函数,产生了一个super对象:Python的多继承类是通过mro的方式来保证 ...
- Page Cache与Page回写
综述 Page cache是通过将磁盘中的数据缓存到内存中,从而减少磁盘I/O操作,从而提高性能.此外,还要确保在page cache中的数据更改时能够被同步到磁盘上,后者被称为page回写(page ...
- adb server version doesn’t match this client
上传文件到海马玩模拟器 环境变量:ANDROID_SDK_HOME配置是D:\Android\android_sdk_windows 报错:adb server version (31) doesn' ...
- varnish学习以及CDN的原理
一.varnish学习Web Page Cache: squid --> varnish 程序的运行具有局部性特征: 时间局部性:一个数据被访问过之后,可能很快会被再次访问到: 空间局部性:一个 ...
- python离线安装包
一.用download命令离线下载包 *.whl , 这个方法好像python3.7以上才能用 那么我的requirement.txt内容就是: django==1.8.11 simplejson= ...