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. ...
随机推荐
- spring mvc 启动过程及源码分析
由于公司开源框架选用的spring+spring mvc + mybatis.使用这些框架,网上都有现成的案例:需要那些配置文件.每种类型的配置文件的节点该如何书写等等.如果只是需要项目能够跑起来,只 ...
- 设计模式之代理模式（Proxy）（2）
代理模式是为其他对象提供一种代理以控制对这个对象的访问.在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用,其特征是代理类与委托类有同样的接口. ...
- REST风格下如何放行静态资源
在配置DispatcherServlet(前端控制器)时,如果把拦截路径配置成rest风格(即斜杠/),则会将静态资源也一并拦截(比如.css .js ,jpg)为了避免这个情况,可以把拦截路径设置成 ...
- Git在商业项目中的使用流程
一 引言 这一篇文章还是记录我在杭州工作的总结. 我刚来公司的时候,对Git的使用很头痛,因为在学校里面很少用这个东西,即使用,一般也只有一个分支,不会出现代码冲突和代码合并的情况.但是公司里面一个项 ...
- vue.js的手脚架vue-cli项目搭建的步骤
手脚架是什么? 众所周知,现在的前端项目发展得越渐越大,我们前端程序员要从0开始去搭建一套完整的项目很费时,所以这时候前端工程的手脚架就出现了. 我用得vue-cli也是其中之一,还有其他的我也说不清 ...
- 从0开始的Python学习003序列
sequence 序列 序列是一组有顺序数据的集合.不知道怎么说明更贴切,因为python的创建变量是不用定义类型,所以在序列中(因为有序我先把它看作是一个有序数组)的元素也不会被类型限制. 序列可以 ...
- c/c++ 继承与多态 继承中的public, protected, private
问题:类B私有继承类A,类A有个protected成员,那么在类B的成员函数里是否可以使用类A的protected成员? 可以使用. 估计有的同学说不对吧,类B都私有继承了类A了,怎么还能访问类A的p ...
- MVC Remote 服务器验证
用此验证必须在Controller中编写返回值为JsonResult的Action public JsonResult CheckUserName(string UserName) { EFHelpe ...
- keepalived+nginx负载均衡+ApacheWeb实现高可用
1.Keepalived高可用软件 Keepalived软件起初是专为LVS负载均衡软件设计的,用来管理并监控LVS集群系统中各个服务节点的状态,后来又加入了可以实现高可用的VRRP功能.因此,kee ...
- linux安装成功后怎么调出终端
一.Ubuntu 桌面如下,点击搜索 二.输入terminal 终端 三.锁定到菜单栏 四.接下来就可以练习linux下的常用命令,如:ls mkdir cat touch 等等 这些命令后 ...