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例子
<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服务。
![字节跳动内推](https://img2020.cnblogs.com/blog/323808/202004/323808-20200415172728571-1992447742.jpg)
找我内推: 字节跳动各种岗位
作者:
ZH奶酪(张贺)
邮箱:
cheesezh@qq.com
出处:
http://www.cnblogs.com/CheeseZH/
*
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。