求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Model Center   Code  
会员   
 
 
     
   
    全部     工程实例     标准规范     名校讲义     知识库    
 
 

AngularJS教程
AngularJS快速入门
AngularJS环境设置
AngularJS MVC体系结构
AngularJS第一个应用程序
AngularJS指令
AngularJS表达式
AngularJS控制器
AngularJS过滤器
AngularJS表格
AngularJS HTML DOM
AngularJS模块
AngularJS表单
AngularJS包括
AngularJS Ajax
AngularJS视
AngularJS作用域
AngularJS服务
AngularJS依赖注入
AngularJS自定义指令
AngularJS国际化
 
 

AngularJS服务

    您可以捐助,支持我们的公益事业。

金额: 1元 10元 50元

姓名:

邮件:

电话:

公司:

说明:

认证码: 验证码,看不清楚?请点击刷新验证码 必填



 
 捐助

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

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

有两种方法来创建服务。

  • 工厂
  • 服务

使用工厂方法

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

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。看到结果如下。


    您可以捐助,支持我们的公益事业。

金额: 1元 10元 50元

姓名:

邮件:

电话:

公司:

说明:

认证码: 验证码,看不清楚?请点击刷新验证码 必填



 
 捐助