AngularJS是什么?
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例子
1
2
3
4
5
6
7
8
9
10
11
12
|
< 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="0" ng-model="invoice.qty" required ></div><div>Costs: <input type="number" min="0" 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 = 1;this.cost = 2;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: 1,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服务。
本文转自ZH奶酪博客园博客,原文链接:http://www.cnblogs.com/CheeseZH/p/4428770.html,如需转载请自行联系原作者
AngularJS是什么?相关推荐
- AngularJS和DataModel
通常,在AngularJS中使用JSON作为存储数据的模型.我们可能这样在controller中写model: app.controller('BookController',['$scope',fu ...
- AngularJS 杂项知识点
1.要用ngChange要同时使用ngModel,下拉选择获取当前选中值. 2.打包代替动态加载(js文件) requirejs真正的价值在于模块化,不是动态加载,angularjs本身有模块化机制, ...
- angularjs post 跨域
web api搞好了:用Ajax妥妥的:但是前端用的AngulagJS,也懒得再换为Ajax了: 但是问题来了:提示: 已拦截跨源请求:同源策略禁止读取位于 http://x.x.x.x:port/a ...
- AngularJS 指令
1. AngularJS指令的特点: AngularJS通过被称为指令的新属性来扩展HTML,指令的前缀为ng-. AngularJS通过内置的指令来为应用添加功能. AngularJS允许你自定义指 ...
- AngularJS中的按需加载ocLazyLoad
欢迎大家讨论与指导 : ) 初学者,有不足的地方希望各位指出 一.前言 ocLoayLoad是AngularJS的模块按需加载器.一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题.但是当 ...
- 【12】AngularJS 事件
AngularJS 事件 AngularJS 有自己的 HTML 事件指令. ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. <div ng-app=&qu ...
- Angular的ChangeDetectorRef.detectChanges()实现angularJS的$apply()方法,强制刷新数据渲染
在Javascript代码里,都是按照一定顺序来执行的,当轮到一个代码片段执行的时候,浏览器就只会去执行当前的片段,不会做任何其他的事情.所以有时候一些做得不是很好的网页,当点击了某个东西之后会卡住, ...
- AngularJS学习笔记(3)——通过Ajax获取JSON数据
通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...
- angularjs 学习笔记 简单基础
angularjs是谷歌公司的一个项目,弥补了hml在构建方面的不足,通过指令(directive)来扩展html标签,可以使开发者使用html来声明动态内容. angularjs主要用来开发单页应用 ...
- Angularjs集成第三方js插件之Uploadify
有时候需要用一些第三方插件,比如datepicker,slider,或者tree等.以前的做法是直接通过jquery取得某个元素,然后调用某个方法即可.但在angularjs中,不能直接这么写,必须写 ...
最新文章
- Docker操作系统理解
- stand up meeting 12/25/2015 weekend 12/26/2015~12/27/2015
- WebFetch 是无依赖极简网页爬取组件
- hdu2602 Bone Collector-01背包问题
- 链表的基本操作——反转与删除
- android 录音机 apk,实时录音机
- Android学习笔记(一)——Android应用的界面编程
- 台式计算机usb口不识别鼠标,答疑解惑:USB鼠标无法被电脑识别怎么办
- vs2012程序打包部署下载InstallShield2015LimitedEdition的下载及安装打包整套教程
- freertos认识(freertos篇-1)
- 数据外泄保护与国土安全部
- 如何在Digital Ocean VPS上安装cpanel / whm
- word2016如何插入题注并交叉引用
- 不同公司系统的对接心得
- 汉堡大学计算机科学,汉堡大学
- Libgdx之正交相机 OrthographicCamera
- 【如何使用idea合并当前分支的代码到主分支】
- 运用JAVA基础阶段知识,模拟双色球机选抽奖过程
- 干货丨小米自研主动降噪技术在Redmi Buds Pro4上的应用
- 轻轻松松做演讲的小窍门