angularJs-The factory and service of angularJs

来源：互联网发布：淘宝网狗狗鞋子编辑：程序博客网时间：2024/05/17 17:43

angularAndService

angularJs支持使用服务的体系结构“关注分离”的概念；服务既是js函数，并负责只做一个特定的任务；这也使得他们成为维护和测试的单独实体；控制器，过滤器可以调用它们作为需求的基础。服务使用angularJs的依赖注入机制来注入。angularJs提供例如许多内在的服务，诸如：$http,$route,$window,$location等；每个服务负责例如一个特定的任务，$http是用来创建Ajax调用，以获得服务器的数据；$route用来定义路由信息的...；但内置的服务总是加前缀$符号。

介绍两种方法创建服务：工厂和服务

Factory

对于已经存在的实例对象的服务，Factory优先，直接返回这个对象。如：在多个controller之间共享传递参数，对$resource的请求资源的封装

Service

对于需要new创建的服务而言，则service优先，angular会自动new并创建这个对象实例，service更容易组织一组相同业务逻辑的API,使得业务逻辑更加的内聚。

实例展示

<html ng-app="myApp" >  <head>    <title>The factoryAndService of angularJs</title>  </head>  <body>    <h2>AngularJS`Sample</h2>    <div ng-controller="CalcController">     <p>Number: <input type="number" ng-model="number" />     <button ng-click="square()">x<sup>2</sup></button>     <p>Result: {{result}}</p >    </div>       <script src="angular.min.js"></script>    <script src="angular-route.min.js"></script>    <script src="angular-ui-router.min.js"></script>  <script>         var myApp = angular.module("myApp",[]);       //factory       myApp.factory("mathCalc",function(){            var factory = {};            factory.formula = function(a,b){                return a *b            }            return factory ;       });       //service       myApp.service("myService",function(mathCalc){        this.square = function(a){            return mathCalc.formula(a,a);        }       });       myApp.controller("CalcController",["myService","$scope",function(myService,$scope){            $scope.square = function(){                $scope.result = myService.square($scope.number);            }       }])  </script>  </body>  </html>

浏览器显示

显示内容

阅读全文

0 0