AngularJS扩展了HTML?

看了几天AngularJS的各种中文教程,一直没有理解AngularJS是做什么的。

直到今天了英文文档,才有了初步了解。

HTML是静态语言。

JavaScript是为了操作HTML 的DOM。

JQuery是对JavaScript进行封装了的类库。

那么AngularJS是什么呢?

AngularJS是把HTML进行扩展,这句话很多教程里都会提及,但是我一直不明白这个“扩展”是什么意思。

英文文档中有一句:Attaching new behavior to DOM elements, such as DOM event handling.我才知道,所谓的“扩展”就是让HTML从“静态”变成“动态”,给DOM中的元素添加一些行为,在我们看来,仿佛HTML DOM元素自己有了自己的行为,不需要通过JavaScript去操纵,需要用到JavaScript的地方就是用JavaScript去描述DOM元素的行为。

AngularJS适用场景?

AngularJS适用于CRUD操作的web应用,不适用与游戏、图形编辑器这种DOM操作频繁的web应用。

AngularJS的一些概念

网上的太杂乱,还说不清,自己看了看,感觉理解深入了一些。

Template        模版:      含有附加标记的HTML;

Directives       指令:      扩展HTML所用的自定义属性和元素

Model             模型:      用户看到的并与之交互的视图View中的数据

Scope             范围:     存储模型Model的一个context,以便控制器、指令、表达式能够访问模型Model。

Expressions    表达式:   访问Scope中的variables和functions

Compiler         编译器:   解析模版template,实例化指令directives和表达式expressions

Filter              过滤器:    把一个表达式expression的值按照一定的格式展示给用户;

View              视图:       用户看到的。(也可以叫HTML DOM)

Data Binding  数据绑定: 同步模型Model和视图View中的数据。

Controller      控制器:    视图View背后的业务逻辑。

Dependency Injection  依赖注入:(创建creates+连接wires)(对象objects+功能functions)

Injector         注入器:    依赖注入的容器。

Module           模块:     一个用来配置注入器的容器,里边包含了一个app的控制器、服务、过滤器、指令

Service          服务:      独立于视图Views的可复用的业务逻辑。

AngularJS例子

<div ng-app ng-init="qty=1;cost=2">
<b>Invoice:</b>
<div>
Quantity: <input type="number" min="0" ng-model="qty">
</div>
<div>
Costs: <input type="number" min="0" ng-model="cost">
</div>
<div>
<b>Total:</b> {{qty * cost | currency}}
</div>
</div>

上边的这段代码,和HTML很像,就是多了一些新的标记,在Angular中,这个文件就叫模版“template”。

当Angular启动web app时,就用编译器“compiler”解析并处理代码中的那些标记。

解析后的DOM就是用户看到的视图“view”。

第一种新的标记就叫指令“directives”。他们给HTML中的属性或元素添加了特定的行为。在这个例子中,我们用ng-app这个属性,关联到了一个自动初始化application的指令。Angular还为input元素定义了一个指令,给这个元素添加了某些行为。ng-model指令stores/updates输入框中的值into/from一个变量。

范围Scope是隐藏的;

视图View是可见的DOM;

上图中的蓝色箭头形象的展示了“双向绑定”的含义。

定制访问DOM的指令:在Angular中,一个应用访问DOM的唯一位置就是在指令内部,否则会导致DOM难以测试。如果你要直接访问DOM,最好写一个定制的指令。

第二种新的标记就是双大括号{{expression|filter}},当编译器遇到这个标记,就会用对应的值进行替换。expression就和JavaScript中可读写的变量一样,这些变量就是在scope中的那些数据,也可以是模型model对应的值。

首先实例化一个InvoiceController的对象invoice,存储在Scope中,这个invoice的属性和行为在Controller中进行了定义;

视图中的两个ng-model指令把DOM元素的值和invoice对象的属性进行捆绑;

控制器的total和pay行为和DOM中的指令也进行绑定。

======================================================================

依赖注入来了~

Service:当一个应用越来越大,可以将一些控制器中的公共行为放到一个Service中。

HTML代码:

<div ng-app="invoice2" ng-controller="InvoiceController as invoice">
<b>Invoice:</b>
<div>
Quantity: <input type="number" min="" ng-model="invoice.qty" required >
</div>
<div>
Costs: <input type="number" min="" ng-model="invoice.cost" required >
<select ng-model="invoice.inCurr">
<option ng-repeat="c in invoice.currencies">{{c}}</option>
</select>
</div>
<div>
<b>Total:</b>
<span ng-repeat="c in invoice.currencies">
{{invoice.total(c) | currency:c}}
</span>
<button class="btn" ng-click="invoice.pay()">Pay</button>
</div>
</div>

控制器代码:

angular.module('invoice2', ['finance2'])
.controller('InvoiceController', ['currencyConverter', function(currencyConverter) {
this.qty = ;
this.cost = ;
this.inCurr = 'EUR';
this.currencies = currencyConverter.currencies; this.total = function total(outCurr) {
return currencyConverter.convert(this.qty * this.cost, this.inCurr, outCurr);
};
this.pay = function pay() {
window.alert("Thanks!");
};
}]);

Service代码:

angular.module('finance2', [])
.factory('currencyConverter', function() {
var currencies = ['USD', 'EUR', 'CNY'];
var usdToForeignRates = {
USD: ,
EUR: 0.74,
CNY: 6.09
};
var convert = function (amount, inCurr, outCurr) {
return amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr];
}; return {
currencies: currencies,
convert: convert
};
});

依赖注入(DI)是一种软件设计模式,主要用于处理怎么样创建对象或功能函数以及怎样处理依赖关系。

Angular中的每一个概念(指令、过滤器、控制器、服务。。。)都是使用DI思想。在Angular中,DI容器叫做注入器。

为了使用DI,需要有这样一个空间,所有应该一起工作的东西都注册其中。在AngularJS中,这个空间叫做模块module。当一个AngularJS应用启动,ng-app指令就定义了一个模块。

在上边的例子中,模版通过指令ng-app="invoice2"告诉应用,这个模块是应用的主模块。

代码angular.module('invoice2',['finance2'])指定invoice2模块依赖finance2模块。通过这个,Angular使用InvoiceController控制器的时候,也可以使用currencyConverter服务。

AngularJS是什么?的更多相关文章

  1. 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  2. AngularJs之九(ending......)

    今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...

  3. AngularJS过滤器filter-保留小数,小数点-$filter

    AngularJS      保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...

  4. Angular企业级开发(1)-AngularJS简介

    AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...

  5. 模拟AngularJS之依赖注入

    一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...

  6. 步入angularjs directive(指令)--点击按钮加入loading状态

    今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...

  7. 玩转spring boot——结合AngularJs和JDBC

    参考官方例子:http://spring.io/guides/gs/relational-data-access/ 一.项目准备 在建立mysql数据库后新建表“t_order” ; -- ----- ...

  8. 玩转spring boot——结合jQuery和AngularJs

    在上篇的基础上 准备工作: 修改pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

  9. 通过AngularJS实现前端与后台的数据对接(一)——预备工作篇

    最近,笔者在做一个项目:使用AngularJS,从而实现前端与后台的数据对接.笔者这是第一次做前端与后台的数据对接的工作,因此遇到了许多问题.笔者在这些问题中,总结了一些如何实现前端与后台的数据对接的 ...

  10. AngularJS 系列 学习笔记 目录篇

    目录: AngularJS 系列 01 - HelloWorld和数据绑定 AngularJS 系列 02 - 模块 (持续更新)

随机推荐

  1. HTML的各个标签的默认样式

    head{ display: none } body{ margin: 8px;line-height: 1.12 } button, textarea,input, object,select { ...

  2. Spotlight on linux 监控 linux服务器资源

    步骤一:在window主机上安装spotlight 下载地址:http://worlddownloads.quest.com.edgesuite.net/Repository/www.quest.co ...

  3. PowerDesigner设置唯一约束/唯一索引/唯一键

    注意:还需要设置unique约束,也是在这个界面. 参考: https://blog.csdn.net/cnham/article/details/6676650 https://blog.csdn. ...

  4. java开发C语言编译器

    http://study.163.com/course/introduction.htm?courseId=1003169025 http://study.163.com/course/courseM ...

  5. [Apache] Apache 從 2.2 換至 2.4 httpd.conf 的調整筆記 (windows 環境)

    原文地址: http://www.dotblogs.com.tw/maplenote/archive/2012/07/20/apache24_httpd_conf.aspx 整理一下 Windows ...

  6. 转 iOS开发debug跟release版本log屏蔽方法

    简单介绍以下几个宏: ) __VA_ARGS__ 是一个可变参数的宏,这个可变参数的宏是新的C99规范中新增的,目前似乎只有gcc支持(VC6.0的编译器不支持).宏前面加上##的作用在于,当可变参数 ...

  7. 转 iOS 调试技巧

    调度技巧一: 程序在崩溃的时候,xcode经常没有给出准确的堆栈信息,而是定位在了main方法里,这个让人很是头疼,又怀念起了vs, 其实xcode只要装简单设置一下,就能准确给出堆栈信息了,  打开 ...

  8. 1. python 字符串简介与常用函数

    1. python中的字符串简介与常用函数 在python中,字符串变成了一个强大的处理工具集,他是不可变的,也就是说字符串包含字符与字符的顺序,他不可以原处修改 字符串是我们后面需要学习的稍大一点的 ...

  9. CVS环境搭建

    1.下载cvsnt(可以从附件中下载) 2.安装cvsnt     直接双击运行cvsnt安装文件,安装过程中可以选择以经典.自定义和完全三种方式安装,在自定义方式中可以选择安装路径.安装完成后,在控 ...

  10. 我所遭遇过的游戏中间件---SpeedTree

    我所遭遇过的游戏中间件---SpeedTree SpeedTree是一个专门用于渲染植被的中间件,并提供了一套完善的植物编辑工具.在它官方提供的DEMO中,你会看到高度逼真的树木和植物,在风的影响下树 ...