AngularJS基础应用

古城微笑少年丶 2022-05-09 14:40 154阅读 0赞

为了理解AngularJS的概念，这里记录下在网上学习AngularJS的几个例子，并且快速接触AngularJS的重要部分。

## 1、数据绑定 ##

下面编写一个表单，用来计算一个订单在不同币种下的总价。  
首先，我们做一个单币种表单，它有数量和单价两个输入框，并且把数量和单价相乘得出该订单的总价格。

*dataBinding.html* \-

<html ng-app>
    <head>
    <script src="js/angular.js"></script>
    </head>
    <body>
    	<div ng-init="count=1;price=2">
    		<b>订单:</b>
    		<div>
    			数量: <input type="number" ng-model="count" required>
    		</div>
    		<div>
    			单价: <input type="number" ng-model="price" required>
    		</div>
    		<div>
    			<b>总价:{
       {count * price}}</b>
    		</div>
    	</div>
    </body>
    </html>

*页面展示* \-  
![在这里插入图片描述][20181016170411149]  
首先，我们来详细讲解一下这个HTML。这个HTML带了一些新的标记，在Angular中叫做“模板”。当Angular启动应用时，它通过“编译器”来解析并处理模板中的这些标记。这些经过加载、转换、渲染而成的DOM就叫做“视图”。这一类新标记叫做“指令”。它们通过HTML中的属性或元素来为页面添加特定的行为。

**ng-app指令**  
ng-app定义了AngularJS应用程序的`根元素`。  
ng-app在网页加载完毕时会自动引导(自动初始化)应用程序。

**ng-init指令**  
ng-init指令为AngularJS应用程序定义了初始值。  
通常情况下，会使用控制器或模块来代替它。

**ng-model指令**  
ng-model指令绑定HTML元素到应用程序数据。

**\{ \{expression | filter\}\}**  
expression是“表达式”语句，filter是“过滤器”语句。表示AngularJS数据绑定表达式。AngularJS中的数据绑定，同步了AngularJS表达式与AngularJS数据。\{ \{count \* price\}\}是通过ng-model="count"与ng-model=“price” 进行同步。

--------------------

## 2、控制器 ##

现在，添加一些逻辑，让该例子支持不同的币种。它将允许我们使用不同的币种来输入、计算和支付这个订单。

*controllerBinding.html* \-

<html ng-app="invoice1">
      <head>
        <script src="js/angular.js"></script>
        <script src="js/invoice1.js"></script>
      </head>
      <body>
        <div ng-controller="InvoiceController as invoice">
          <b>订单:</b>
          <div>
            数量: <input type="number" ng-model="invoice.count" required >
          </div>
          <div>
            单价: <input type="number" ng-model="invoice.price" required >
            <select ng-model="invoice.inCurr">
              <option ng-repeat="c in invoice.currencies" value="{
       {c}}">{
       {c}}</option>
            </select>
          </div>
          <div>
            <b>总价:</b><br/>
            <span ng-repeat="c in invoice.currencies">{
       {c}}{
       {invoice.total(c)}}<br/></span><br/>
            <button class="btn" ng-click="invoice.pay()">支付</button>
          </div>
        </div>
      </body>
    </html>

*invoice1.js* \-

angular.module('invoice1', [])
      .controller('InvoiceController', function() {
        this.count = 1;
        this.price = 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.count * this.price, this.inCurr, outCurr);
        };
        this.convertCurrency = function convertCurrency(amount, inCurr, outCurr) {
          return amount * this.usdToForeignRates[outCurr] * 1 / this.usdToForeignRates[inCurr];
        };
        this.pay = function pay() {
          window.alert("谢谢！");
        };
      });

*页面展示* \-  
![在这里插入图片描述][20181016173639404]  
看看这次发生了什么变化？这里增加了一个JavaScript文件，它包含一个被称为“控制器(controller)”的函数。其实，这个文件相当于定义了一个构造函数，它用来在创建这个控制器函数的实例。控制器的用途是导出一些变量和函数，供模板中的`表达式`和`指令`使用。

**ng-controller指令**  
ng-controller指令定义了应用程序控制器。控制器是JavaScript对象，由标准的JavaScript对象的构造函数创建。`ng-controller="InvoiceController as invoice"`属性是一个AngularJS指令。用于定义一个控制器。InvoiceController as invoice是把InvoiceController实例赋值给当前作用域（Scope）中的invoice变量。

**ng-repeat指令**  
ng-repeat指令对于集合中（数组中）的每一项会克隆一次HTML元素。

**ngClick指令**  
当它被点击时，自动执行invoice.pay()函数。

--------------------

## 3、服务 ##

现在，InvoiceController包含了这个例子所有的逻辑。如果这个应用程序的规模继续扩大，最好的做法是：把控制器中与视图无关的逻辑都移植到“`服务(service)`”中。以便程序可以复用这部分的逻辑。  
接下来，就让我们重构我们的例子，并且把币种兑换的逻辑移入到一个独立的服务(service)中。

*serviceBinding.html* \-

<html ng-app="invoice2">
      <head>
        <script src="js/angular.js"></script>
        <script src="js/finance2.js"></script>
        <script src="js/invoice2.js"></script>
      </head>
      <body>
        <div ng-controller="InvoiceController as invoice">
          <b>订单:</b>
          <div>
            数量: <input type="number" ng-model="invoice.count" required >
          </div>
          <div>
            单价: <input type="number" ng-model="invoice.price" required >
            <select ng-model="invoice.inCurr">
              <option ng-repeat="c in invoice.currencies" value="{
       {c}}">{
       {c}}</option>
            </select>
          </div>
          <div>
            <b>总价:</b><br/>
            <span ng-repeat="c in invoice.currencies">{
       {c}}{
       {invoice.total(c)}}<br/></span><br/>
            <button class="btn" ng-click="invoice.pay()">支付</button>
          </div>
        </div>
      </body>
    </html>

*finance2.js* \-

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

*invoice2.js* \-

angular.module('invoice2', ['finance2'])
          .controller('InvoiceController', ['currencyConverter', function(currencyConverter) {
            this.count = 1;
            this.price = 2;
            this.inCurr = 'EUR';
            this.currencies = currencyConverter.currencies;
         
            this.total = function total(outCurr) {
              return currencyConverter.convert(this.count * this.price, this.inCurr, outCurr);
            };
            this.pay = function pay() {
              window.alert("谢谢！");
            };
          }]);

*页面展示* \-  
![在这里插入图片描述][20181017093708747]  
这次有什么改动？我们把`convertCurrency`(invoice1.js)函数和所支持的币种独立到一个新的文件：finance2.js。但是控制器怎样才能找到这个独立的函数呢？  
*invoice1.js* \-

this.convertCurrency = function convertCurrency(amount, inCurr, outCurr) {
          return amount * this.usdToForeignRates[outCurr] * 1 / this.usdToForeignRates[inCurr];
    };

这下该“`依赖注入(Dependency Injection)`”出场了。依赖注入（DI）是一种设计模式，它用于解决下列问题：我们创建了对象和函数，但是它们怎么得到自己所依赖的对象呢？Angular中的每一样东西都是用依赖注入（DI）的方式来创建和使用的，比如指令(Directive)、过滤器（Filter）、控制器（Controller）、服务（Service）。在Angular中，依赖注入（DI）的容器叫做“注入器(Injector)”。  
要想进行依赖注入，你必须先把这些需要协同工作的对象和函数注册(Register)到某个地方。在Angular中，这个地方叫做“模块(module)”。

在上面这个例子中： 模板包含了一个`ng-app="invoice2"`指令。这告诉Angular使用invoice2模块作为该应用程序的主模块。 像`angular.module('invoice2', ['finance2'])`这样的代码告诉Angular：invoice2模块依赖于finance2模块。 这样一来，Angular就能同时使用`InvoiceController`这个控制器和`currencyConverter`这个服务了。

刚才我们已经定义了应用程序的所有部分，现在，需要Angular来创建它们了。 在上一节，我们了解到控制器(controller)是通过一个工厂函数创建的。 而对于服务(service)，则有多种方式来定义它们的工厂函数（参见服务指南）。 上面这个例子中，我们通过一个返回currencyConverter函数的函数作为创建currencyConverter服务的工厂。 （**注**：`js中的“工厂(factory)”是指一个以函数作为“返回值”的函数`）

回到刚才的问题：InvoiceController该怎样获得这个currencyConverter函数的引用呢？ 在Angular中，这非常简单，只要在构造函数中定义一些具有特定名字的参数就可以了。 这时，注入器(injector)就可以按照正确的依赖关系创建这些对象，并且根据名字把它们传入那些依赖它们的对象工厂中。 在我们的例子中，InvoiceController有一个叫做currencyConverter的参数。 根据这个参数，Angular就知道InvoiceController依赖于currencyConverter，取得currencyConverter服务的实例，并且把它作为参数传给InvoiceController的构造函数。

这次改动中的最后一点是我们现在把一个数组作为参数传入到`module.controller`函数中，而不再是一个普通函数。 这个数组前面部分的元素包含这个控制器所依赖的一系列服务的名字，最后一个元素则是这个控制器的构造函数。 Angular可以通过这种数组语法来定义依赖，以免js代码压缩器(Minifier)破坏这个“依赖注入”的过程。 因为这些js代码压缩器通常都会把构造函数的参数重命名为很短的名字，比如a，而常规的依赖注入是需要根据参数名来查找“被注入对象”的。 （译注：因为字符串不会被js代码压缩器重命名，所以数组语法可以解决这个问题。）  
![在这里插入图片描述][20181017100712655]

[20181016170411149]: /images/20220506/c7d653c4eda644e1a2ff359486a56542.png
[20181016173639404]: /images/20220506/a22b0566d74b4ee5b9d0caa51b618b37.png
[20181017093708747]: /images/20220506/313f05c43aaf4512b43206df3fcc3719.png
[20181017100712655]: /images/20220506/a3f61155b90f4f19b13c298aa3182abe.png