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. jsonkit mrc于arc混编

  2. C#中WinForm程序退出方法技巧总结（转）

    本文实例总结了C#中WinForm程序退出方法技巧.分享给大家供大家参考.具体分析如下: 在c#中退出WinForm程序包括有很多方法,如:this.Close(); Application.Exit ...

  3. 在springmvc中,获取Connection接口

    ServletContext context = request.getSession().getServletContext();WebApplicationContext wac = WebApp ...

  4. TCP和UDP的聊天

    TCP聊天 TCP(Transmission Control Protocol,传输控制协议)是基于连接的协议. 1.一个TCP连接必须要经过三次"对话"才能建立起来,其中的过程非 ...

  5. Some useful links

    Integrating the FlyCapture SDK for use with OpenCV CStereoGrabber_Bumblebee.h OpenCV with PGR Flycap ...

  6. struts2常用标签使用说明

    在struts2中,用的是s标记,先在jsp文件中引入标记:<%@ taglib prefix="s" uri="/struts-tags"%> & ...

  7. .net 设置导航的当前状态

    1.静态地址共用母版页时,加当前页的状态(使用加参数的方法实现): a: main.Master为链接设参数 MenuId <li> <a <%=MenuId==?" ...

  8. css渐变颜色在线制作

    http://www.colorzilla.com/gradient-editor/

  9. 20145334赵文豪 《Java程序设计》第1周学习总结

    20145334赵文豪 <Java程序设计>第1周学习总结 教材学习内容总结 第一周的学习在紧张中结束了,我们这周了解了各门课的基本内容与授课形式,在第一周java课程的的学习中我们学习了 ...

  10. html代码中的form参数是基本一致的

    由于pear的大多数模块仍处于开发当中,因此,这里列举的是随着php4.05一起发布的pear中的模块,需要注意的是,一些抽象类或者是基类(如mail.php,log.php,cache.php)没有 ...