Angular JS学习第二天

Angular JS

推荐大家看官方文档学习，我这基本上都是官方文档中摘取的

中文文档连接
ps.不过感觉中文文档有些地方有点问题，有需要的时候大家可以和英文的比对着看

服务Service

现在，InvoiceController包含了我们这个例子中的所有逻辑。如果这个应用程序的规模继续成长，最好的做法是：把控制器中与视图无关的逻辑都移到"服务(service)"中。 以便这个应用程序的其他部分也能复用这些逻辑。

invoice2.js

angular.module('invoice2', ['finance2'])//第二个参数 ['finance2'] 是一个数组，包含了当前模块所依赖的其他模块。在这里，模块 'invoice2' 依赖于模块 'finance2'。
    .controller('InvoiceController', ['currencyConverter', function (correncyConverter) {
        this.qty = 1;
        this.cost = 2;
        this.inCurr = 'EUR';
        this.currencies = currencyConverter.currencies;

        this.total = function total(outCurr) {
            return correncyConverter.convert(this.qty * this.cost, this.inCurr, outCurr);
        };
        this.pay = function pay() {
            window.alert("谢谢！");
        };
    }]);

• controller 方法用于定义一个控制器。
• 第一个参数 ‘InvoiceController’ 是控制器的名称。在这里，我们定义了一个名为 ‘InvoiceController’ 的控制器。
• 第二个参数 [‘currencyConverter’, function(currencyConverter) { … }] 是一个数组，包含了控制器所依赖的其他服务或对象。
  • 这里我们依赖了名为 currencyConverter 的服务(在finance.js中定义)。
    • ‘currencyConverter’ 是服务的名称。
  • function(currencyConverter) { … } 是一个函数，接收 ‘currencyConverter’ 作为参数。在控制器中，我们可以使用 currencyConverter 对象来访问 currencyConverter 服务提供的功能。

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]/ usdToForeignRates[inCurr];
        }
    })

注意要修改ng-app=“invoice2”，ng-app 是 AngularJS 中的指令，用于定义 AngularJS 应用程序的根元素。具体来说，ng-app 指令会告诉 AngularJS 在哪个元素上启动应用程序，并且使用指定的模块作为应用程序的根模块。

在这个例子中，ng-app=“invoice2” 意味着 AngularJS 应用程序将会以 invoice2 模块作为根模块来启动。也就是说，该 HTML 页面中的所有 AngularJS 功能都将受到 invoice2 模块的影响和管理。

• 在 AngularJS 中，ng-app 指令通常会放置在 HTML 文档的 或 标签上，用于标识 AngularJS 应用程序的根元素。这样做的好处是确保整个文档都在 AngularJS 的控制之下，从而使得 AngularJS 可以管理整个应用程序。

• 在 HTML 文档中，ng-app 指令可以放置在任何元素上，但是只有一个 ng-app 指令会被 AngularJS 所识别。如果有多个 ng-app 指令，AngularJS 只会识别第一个指令，并且忽略后续的指令。

• 因此，为了避免混淆和不必要的复杂性，通常建议将 ng-app 指令放置在 HTML 文档的 或 标签上。这样做可以确保整个文档都在 AngularJS 的控制之下，并且避免潜在的问题。

依赖注入

• 要想进行依赖注入，你必须先把这些需要协同工作的对象和函数注册(Register)到某个地方。在Angular中，这个地方叫做“模块(module)”。
• 在上面这个例子中： 模板包含了一个ng-app="invoice2"指令。这告诉Angular使用invoice2模块作为该应用程序的主模块。 像angular.module(‘invoice’, [‘finance’])这样的代码告诉Angular：invoice模块依赖于finance模块。 这样一来，Angular就能同时使用InvoiceController这个控制器和currencyConverter这个服务了。
• 把一个数组作为参数传入到module.controller函数中，而不再是一个普通函数。 这个数组前面部分的元素包含这个控制器所依赖的一系列服务的名字，最后一个元素则是这个控制器的构造函数。 Angular可以通过这种数组语法来定义依赖，以免js代码压缩器(Minifier)破坏这个“依赖注入”的过程。 因为这些js代码压缩器通常都会把构造函数的参数重命名为很短的名字，比如a，而常规的依赖注入是需要根据参数名来查找“被注入对象”的。 （译注：因为字符串不会被js代码压缩器重命名，所以数组语法可以解决这个问题。）

finance3.js

这个例子我试了下英文文档里的，有点bug，执行结果不对，就不放了，有需要大家可以自己去看看