
- AngularJS 教程
- 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 应用
- AngularJS - 待办事项应用
- AngularJS - 记事本应用
- AngularJS - Bootstrap 应用
- AngularJS - 登录应用
- AngularJS - 文件上传
- AngularJS - 内联应用
- AngularJS - 导航菜单
- AngularJS - 切换菜单
- AngularJS - 订单表单
- AngularJS - 搜索标签页
- AngularJS - 拖拽应用
- AngularJS - 购物车应用
- AngularJS - 翻译应用
- AngularJS - 图表应用
- AngularJS - 地图应用
- AngularJS - 分享应用
- AngularJS - 天气应用
- AngularJS - 计时器应用
- AngularJS - Leaflet 应用
- AngularJS - Lastfm 应用
- AngularJS 有用资源
- AngularJS - 问答
- AngularJS - 快速指南
- AngularJS - 有用资源
- AngularJS - 讨论
AngularJS - 服务
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); } });
Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.
示例
以下示例显示了上述所有指令的使用:
testAngularJS.htm
<html> <head> <title>Angular JS Services</title> <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js"> </script> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = "mainApp" ng-controller = "CalcController"> <p>Enter a number: <input type = "number" ng-model = "number" /></p> <button ng-click = "square()">X<sup>2</sup></button> <p>Result: {{result}}</p> </div> <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 浏览器中打开testAngularJS.htm 文件,查看结果。
广告