AngularJS Services介绍 (一)

Service 的特点

  1. Service 提供的数据(data)在整个angular app 生命周期中都有效。
  2. Service 通常通过controller将数据传递给view(通常情况下指template,也就是.html文件)。
  3. Service 是单例对象(singleton object),每个应用程序只初始化一次。
  4. 通常用于应用程序中共享数据(data)和方法(function).

Service 的优势就在于单例对象(singleton object)和惰性加载(lazy instantiated)。Angular 只创建一个service 实例,如果该实例在应用程序中被依赖时。

例如,如果我们要创建一个service.js文件,文件中通过service方法创建了一个service,如下所示:

        var CalculatorService = angular.module('CalculatorService', []).service('Calculator', function () {
            this.square = function (a) { return a*a};
        });
    

AngularJS也可以通过其他不同的方式创建service.

service(),factory(),provider(),value()以及constant()。

接下来,可以用一个controller来引用刚刚创建的service --- CalculatorService

        var myApp = angular.module('myApp', ['CalculatorService']);
        myApp.controller('CalculatorController', function ($scope, Calculator) {
        $scope.findSquare = function () {
        $scope.answer = Calculator.square($scope.number);
        }
        });
    

接下来,就可以用view(.html文件)来绑定数据了。如下所示:

        <div class="container">
            <div>
                <div ng-controller="CalculatorController">
                    Enter a number:
                    <input type="number" ng-model="number">
                    <button  ng-click="findSquare()">Square</button>
                    <div>{{answer}}</div>
                </div>
            </div>
        </div>