mirror of
https://github.com/zhigang1992/angular.js.git
synced 2026-04-05 08:59:35 +08:00
@@ -32,9 +32,9 @@ In the following example we will build a form to calculate the costs of an invoi
|
||||
Let's start with input fields for quantity and cost whose values are multiplied to produce the total of the invoice:
|
||||
|
||||
|
||||
<example>
|
||||
<example name="guide-concepts-1" ng-app-included="true">
|
||||
<file name="index.html">
|
||||
<div ng-init="qty=1;cost=2">
|
||||
<div ng-app ng-init="qty=1;cost=2">
|
||||
<b>Invoice:</b>
|
||||
<div>
|
||||
Quantity: <input type="number" ng-model="qty" required >
|
||||
@@ -102,7 +102,7 @@ The concept behind this is <a name="databinding">"{@link databinding two-way dat
|
||||
Let's add some more logic to the example that allows us to enter and calculate the costs in
|
||||
different currencies and also pay the invoice.
|
||||
|
||||
<example module="invoice1">
|
||||
<example name="guide-concepts-2" ng-app-included="true" >
|
||||
<file name="invoice1.js">
|
||||
angular.module('invoice1', [])
|
||||
.controller('InvoiceController', function() {
|
||||
@@ -128,7 +128,7 @@ different currencies and also pay the invoice.
|
||||
});
|
||||
</file>
|
||||
<file name="index.html">
|
||||
<div ng-controller="InvoiceController as invoice">
|
||||
<div ng-app="invoice1" ng-controller="InvoiceController as invoice">
|
||||
<b>Invoice:</b>
|
||||
<div>
|
||||
Quantity: <input type="number" ng-model="invoice.qty" required >
|
||||
@@ -191,7 +191,7 @@ from the web, e.g. by calling the Yahoo Finance API, without changing the contro
|
||||
|
||||
Let's refactor our example and move the currency conversion into a service in another file:
|
||||
|
||||
<example module="invoice2">
|
||||
<example name="guide-concepts-2" ng-app-included="true">
|
||||
<file name="finance2.js">
|
||||
angular.module('finance2', [])
|
||||
.factory('currencyConverter', function() {
|
||||
@@ -228,7 +228,7 @@ Let's refactor our example and move the currency conversion into a service in an
|
||||
}]);
|
||||
</file>
|
||||
<file name="index.html">
|
||||
<div ng-controller="InvoiceController as invoice">
|
||||
<div ng-app="invoice2" ng-controller="InvoiceController as invoice">
|
||||
<b>Invoice:</b>
|
||||
<div>
|
||||
Quantity: <input type="number" ng-model="invoice.qty" required >
|
||||
@@ -302,7 +302,7 @@ to something shorter like `a`.
|
||||
Let's finish our example by fetching the exchange rates from the Yahoo Finance API.
|
||||
The following example shows how this is done with Angular:
|
||||
|
||||
<example module="invoice3">
|
||||
<example name="guide-concepts-3" ng-app-included="true">
|
||||
<file name="invoice3.js">
|
||||
angular.module('invoice3', ['finance3'])
|
||||
.controller('InvoiceController', ['currencyConverter', function(currencyConverter) {
|
||||
@@ -356,7 +356,7 @@ The following example shows how this is done with Angular:
|
||||
}]);
|
||||
</file>
|
||||
<file name="index.html">
|
||||
<div ng-controller="InvoiceController as invoice">
|
||||
<div ng-app="invoice3" ng-controller="InvoiceController as invoice">
|
||||
<b>Invoice:</b>
|
||||
<div>
|
||||
Quantity: <input type="number" ng-model="invoice.qty" required >
|
||||
|
||||
Reference in New Issue
Block a user