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. ...
随机推荐
- web前端图片上传
图片上传有很多种形式,但是听说ios只能传字符串,所以为了安卓.ios和web能用一个接口上传图片,采用了基于base64 的方法上传图片. 下面是我的html <div class=" ...
- java-同步控制及不可变设置（只读访问）
1.还是直接上代码简单了解一下: package com.synchronize.test; import java.util.ArrayList; import java.util.Collecti ...
- 38.Odoo产品分析 (四) – 工具板块(7) – 车队管理(2)
查看Odoo产品分析系列--目录 接上一篇Odoo产品分析 (四) – 工具板块(7) – 车队管理(1) 4 显示及状态说明 合同默认以列表视图显示: 当合约到期时,以红色显示,并显示状态为待关闭 ...
- 跨进程SharedPreferences异常。
诡异的SharedPreferences异常,在ACC之后,SharedPreferences获取不到值了,但是另一个应用可以获取到值.同样的方法,一个正常一个异常. Context c = null ...
- 如何程序化的构造Hibernate配置 // How to initialize Hibernate programmably
Java为什么被人诟病,因为一切都是过度设计.Hibernate其实就是实现了一套JPA的ORM,不过用极度冗赘的配置方式,nodejs Sequelize.js,甚至Python SQLAlchem ...
- Flutter数据持久化入门以及与Web开发的对比
对于大部分安卓或者IOS开发人员来说,App的数据持久化可能是很平常的一个话题.但是对于Web开发人员来说,可能紧紧意味着localStorage和sessionStorage. Web开发 loca ...
- IE8环境下的上传图片预览
今天做一个需要在IE浏览器上使用的信息录入项目,遇到了图片上传预览的问题,找了一些资料,最后使用了IE自带的滤镜做到了 <!--HTML IE8不支持opacity,只能使用双层,一层背景半透明 ...
- VS根据数据库生成实体类
一.在类库项目上添加新项 二. 三.依次填入数据库连接 选择数据库 就可以生成数据库实体
- js 学习之路4：js运行/输出中文乱码问题解决
网上找了一个简单的例子,编写出来很简单,但是乱码的问题稍微困扰了一下. 题目: 1. 大马驮2石粮食,中马驮1石粮食,两头小马驮一石粮食,要用100匹马,驮100石粮食,该如何调配? js解决代码: ...
- pycharm设置自动换行的方法
只对当前文件有效的操作:菜单栏->View -> Active Editor -> Use Soft Wraps: 如果想对所有文件都有效,就要在setting里面进行操作:File ...