AngularJS支持使用服务的体系结构“关注点分离”的概念。服务是JavaScript函数，并负责只做一个特定的任务。这也使得他们即维护和测试的单独实体。控制器，过滤器可以调用它们作为需求的基础。服务使用AngularJS的依赖注入机制注入正常。

AngularJS提供例如许多内在的服务，如：$http, $route, $window, $location等。每个服务负责例如一个特定的任务，$http是用来创建AJAX调用，以获得服务器的数据。 $route用来定义路由信息等。内置的服务总是前缀$符号。

有两种方法来创建服务。

  1. 工厂
  2. 服务

使用工厂方法

使用工厂方法，我们先定义一个工厂，然后分配方法给它。

   var mainApp = angular.module("mainApp", []);

   mainApp.factory('MathService', function() {

     var factory = {};

     factory.multiply = function(a, b) {

      return a * b

     }

     return factory;

   });

使用服务方法

使用服务的方法，我们定义了一个服务，然后分配方法。还注入已经可用的服务。

mainApp.service('CalcService', function(MathService){

  this.square = function(a) {

 return MathService.multiply(a,a);

 }

});

例子

下面的例子将展示上述所有指令。
testAngularJS.html

<html>

<head>

  <title>Angular JS Forms</title>

</head>

<body>

  <h2>AngularJS Sample Application</h2>

  <div ng-app="mainApp" ng-controller="CalcController">

   <p>Enter a number: <input type="number" ng-model="number" />

   <button ng-click="square()">X<sup>2</sup></button>

   <p>Result: {{result}}</p>

  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

  <script>

   var mainApp = angular.module("mainApp", []);

   mainApp.factory('MathService', function() {

     var factory = {};

     factory.multiply = function(a, b) {

      return a * b

     }

     return factory;

   }); 

   mainApp.service('CalcService', function(MathService){

      this.square = function(a) {

      return MathService.multiply(a,a);

     }

   });

   mainApp.controller('CalcController', function($scope, CalcService) {

      $scope.square = function() {

      $scope.result = CalcService.square($scope.number);

     }

   });

  </script>

</body>

</html>

结果

在Web浏览器打开textAngularJS.html。看到结果如下。

简介AngularJS中使用factory和service的方法的更多相关文章

  1. AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法

    简介AngularJS中使用factory和service的方法 AngularJS支持使用服务的体系结构"关注点分离"的概念.服务是JavaScript函数,并负责只做一个特定的 ...

  2. AngularJS 中的 factory、 service 和 provider区别，简单易懂

    转自:http://blog.csdn.net/ywl570717586/article/details/51306176 初学 AngularJS 时, 肯定会对其提供 factory . serv ...

  3. 简介Python中用于处理字符串的center()方法

    简介Python中用于处理字符串的center()方法 这篇文章主要介绍了简介Python中用于处理字符串的center()方法,是Python入门中的基础知识,需要的朋友可以参考下 center() ...

  4. 【AngularJS中的自定义服务service VS factory VS provider】---它们的区别，你知道么？

    在介绍AngularJS自定义服务之前,我们先来了解一下AngularJS~ 学过HTML的人都知道,HTML是一门很好的伪静态文本展示设计的声明式语言,但是,要构建WEB应用的话它就显得乏力了. 而 ...

  5. angularjs中factory, service和provider

    在Angular里面,services作为单例对象在需要到的时候被创建,只有在应用生命周期结束的时候(关闭浏览器)才会被清除.而controllers在不需要的时候就会被销毁了(因为service的底 ...

  6. angularjs中provider，factory，service的区别和用法

    angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...

  7. AngularJS中的Provider们：Service和Factory等的区别

    引言 看了很多文章可能还是不太说得出AngularJS中的几个创建供应商(provider)的方法(factory(),service(),provider())到底有啥区别,啥时候该用啥,之前一直傻 ...

  8. [译]AngularJS中几种Providers(Factory, Service, Provider)的区别

    原文: http://blog.xebia.com/2013/09/01/differences-between-providers-in-angularjs/ 什么是Provider? Angula ...

  9. angularjs 中 Factory,Service,Provider 之间的区别

    本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行 ...

随机推荐

  1. RSA_RSA算法原理（一）

    如果你问我,哪一种算法最重要?我可能会回答"公钥加密算法". 因为它是计算机通信安全的基石,保证了加密数据不会被破解.你可以想象一下,信用卡交易被破解的后果. 进入正题之前,我先简 ...

  2. 用c#实现$.now()(1437813924915)的时间效果

    Convert.ToInt64((DateTime.UtcNow - Convert.ToDateTime("1970-01-01")).TotalMilliseconds)

  3. Windows Phone Data Protection

    To encrypt the PIN // Convert the PIN to a byte[]. byte[] PinByte = Encoding.UTF8.GetBytes(TBPin.Tex ...

  4. 设备像素比devicePixelRatio简单介绍

    本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持,随着显示器的发展,这个属性也慢慢登上了前端技术的舞台. ...

  5. android中的Dialog

    一.Dialog概述 二.使用系统自带的Dialog 1.新建Builder AlertDialog.Builder builder = new AlertDialog.Builder(StoryAc ...

  6. android中的ActionBar和ToolBar

    一.ToolBar 1.概述 Google在2015的IO大会上发布了系列的Material Design风格的控件.其中ToolBar是替代ActionBar的控件.由于ActionBar在各个安卓 ...

  7. js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  8. 在OSX下卸载Xamarin

    To uninstall Xamarin Studio, you'll want to run the following commands from a Terminal: sudo rm -rf ...

  9. 真机调试---打包6plus出现问题

    问题: dyld: Library not loaded: @rpath/libswiftCore.dylib Referenced from: /private/var/mobile/Contain ...

  10. 西部数据出现“WD SES Device USB Device”怎么办，而且说明书全是英文。

    您好.wd ses device driver这个驱动程序可以在baidu中输入关键词找到,什么驱动之家.驱动人生之类的专业驱动网站也都是有的. western digital的移动硬盘驱动程序安装步 ...