[译]AngularJS 1.3.0 开发者指南(二) -- 概念综述
[译]AngularJS 1.3.0 开发者指南(二) -- 概念综述这部分通过示例简略的介绍了Angular的所有重要内容,详情见向导部分.
第一个示例: 数据绑定在下面的例子中,我们将创建一个表单来计算订单的金额. <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> 试着运行上面的实时预览,然后我们将通读示例源码,描述它是怎样运行的. 第一种新的标记叫做"directives(指令)". 指令适用于在HTML属性或元素中添加特定的行为. 上面示例中,我们使用了指令
第二种新的标记是双花括号 上面的示例中包含一个"filter(过滤器)". 过滤器可以将表达式的值格式化后展示给用户. 在上面的示例中,过滤器 重要的一点是,在上面的示例中,Angular提供的动态绑定机制: 输入的值无论什么时候改变,表达式的值都会自动重新计算,DOM元素也会自动更新显示的值. 这就是Angular所提供的模型与视图之间的"双向数据绑定机制". 添加UI逻辑: 控制器现在让我们在上面的示例中添加一些业务逻辑,使我们可以使用不同的货币输入,计算金额并完成支付. invoice.js angular.module('invoice1', []) .controller('InvoiceController', function() { this.qty = 1; this.cost = 2; this.inCurr = 'EUR'; this.currencies = ['USD', 'EUR', 'CNY']; this.usdToForeignRates = { USD: 1, EUR: 0.74, CNY: 6.09 }; this.total = function total(outCurr) { return this.convertCurrency(this.qty * this.cost, this.inCurr, outCurr); }; this.convertCurrency = function convertCurrency(amount, inCurr, outCurr) { return amount * this.usdToForeignRates[outCurr] / this.usdToForeignRates[inCurr]; }; this.pay = function pay() { window.alert("Thanks!"); }; }); index.html <div ng-app="invoice1" 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> 做了哪些修改 ? 首先,添加了一个JavaScript文件,其中有个被叫做"controller(控制器)"的函数. 更确切的说,这个文件中包含一个构造函数,这个构造函数可以创建控制器实例. 控制器的作用是给表达式和指令暴露变量和函数,供它们使用. 除这个包含控制器代码的JavaScript文件以外,我们还在HTML中添加了 我们还修改了页面中读写变更的所有表达式,给他们添加了控制器的实例名称 当然,这个绑定也是动态的,换句话说,无论函数结果什么时候发生变化,DOM都会自动修改其展示的值. 付款按钮使用了指令 在这个新增的JavaScript文件中,我们还创建一个module(模块),并且将控制器注册在了这个模块上. 我们将在下一部分对模块进行讨论. 下图展示的是加入了控制器之后,应用中的每一部分是如何协作的: 独立于视图的业务逻辑: Services(服务)现在,控制器 我们重构下我们的示例,将货币转换移动到另一个文件的service(服务)中. angular.module('finance2', []) .factory('currencyConverter', function() { var currencies = ['USD', 'CNY']; var usdToForeignRates = { USD: 1, CNY: 6.09 }; var convert = function (amount, outCurr) { return amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr]; }; return { currencies: currencies, convert: convert }; }); invoice2.js 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, outCurr); }; this.pay = function pay() { window.alert("Thanks!"); }; }]); index.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> 有哪些变化? 我们将函数 轮到"Dependency Injection(依赖注入)"出场了. Dependency Injection (DI)依赖注入是一种软件设计模式,它解决了对象和函数是如何得到已经创建好的并且被它们所依赖的对象的引用的. Angular中的每个部分(指令,控制器,服务...)都是通过依赖注入机制来创建和关联的. 在Angular中,DI窗口被称叫"injector". 为了使用DI(依赖注入),所有需要协作的部件都需要统一注册的一个位置. 在Angular中,"mudules(模块)"就是为解决这个问题. Angular从指令 在上面的示例中: 模板中包含了指令 既然Angular了解应用所有部分的定义,那么就可以来创建它们. 在上一段中,我们是使用一个工厂方法创建了控制器. 而对于服务来说,有多种定义它们工厂的方式(见服务指南). 在上面的示例中,我使用一个返回 回到最初的问题: 控制器 这次改动中的最后一点是,我们将一个数组传入了 访问后台让我们通从Yahoo金融API获取汇率来完成我们的示例. 下面的示例将展示Angular是怎样做的: invoice3.js angular.module('invoice3', ['finance3']) .controller('InvoiceController', outCurr); }; this.pay = function pay() { window.alert("Thanks!"); }; }]); finance3.js angular.module('finance3', ['$http', function($http) { var YAHOO_FINANCE_URL_PATTERN = '//query.yahooapis.com/v1/public/yql?q=select * from '+ 'yahoo.finance.xchange where pair in ("PAIRS")&format=json&'+ 'env=store://datatables.org/alltableswithkeys&callback=JSON_CALLBACK'; var currencies = ['USD', 'CNY']; var usdToForeignRates = {}; var convert = function (amount, outCurr) { return amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr]; }; var refresh = function() { var url = YAHOO_FINANCE_URL_PATTERN. replace('PAIRS', 'USD' + currencies.join('","USD')); return $http.jsonp(url).success(function(data) { var newUsdToForeignRates = {}; angular.forEach(data.query.results.rate, function(rate) { var currency = rate.id.substring(3,6); newUsdToForeignRates[currency] = window.parseFloat(rate.Rate); }); usdToForeignRates = newUsdToForeignRates; }); }; refresh(); return { currencies: currencies, convert: convert, refresh: refresh }; }]); index.html <div ng-app="invoice3" 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> 修改了什么? （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |