AngularJS教程 AngularJS从0到1——AngularJS服务

3052world

于 2017-04-27 21:47:54 发布

阅读量656

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记 AngularJS AngularJS从0到1教程文章标签： angularjs angular教程 angular服务

本文链接：https://blog.youkuaiyun.com/jasper_success/article/details/70832703

学习笔记同时被 3 个专栏收录

107 篇文章

订阅专栏

AngularJS

6 篇文章

订阅专栏

AngularJS从0到1教程

6 篇文章

订阅专栏

本文介绍了AngularJS服务的概念及其重要性，详细解释了AngularJS服务如何帮助开发者实现代码复用，并提供了系统内置服务和自定义服务的创建及使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、为什么要用AngularJS服务

我们之前已经学过AngularJS中的控制器了，在控制器中，我们可以定义函数、变量。设想一下，是否会遇到这样的问题：多个页面中同时用到一个功能相似的函数，但是因为页面不一样，所以每个页面对应的控制器中我们都写了一遍。

如果你学到其他编程语言，比如Java，就会自然联想到我们应该把这个函数封装到一个公共类里，以此简化代码，方便调用。

AngularJS中的服务就是由此而来。

二、AngularJS服务是什么

AngularJS中的服务指的是一些封装好的函数或对象，开发者可以在整个应用范围内访问服务中的函数或对象。

每个服务只有一个实例（类似于Java中被static修饰过的），所以如果在一个地方对该实例进行变更，那么就是在这个应用范围内进行变更。

注意：AngularJS服务和Android里的服务不是一回事，Android里的服务指的是后台任务执行单元，这里的服务仅仅是一组对象或者方法的集合。

AngularJS中服务的创建方式有如下几种：

factory
service
provider

三、AngularJS中如何使用服务

3.1 系统内置服务

AngularJS提供了一系列的内置服务，也就是AngularJS为我们封装了一些公共的方法或对象，我们只需要拿来直接用即可。常见的系统内置服务有：

$http //用于访问网络(异步)
$log //用于打印日志
$location //用于操作URL
$window //封装了全局的window对象

注意：AngularJS内置的服务都是以$开头，所以我们自定义的服务不能用$，以免引起误会

$location服务应用示例

html代码

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body ng-controller="MainCtrl as ctrl">
        <p ng-bind="ctrl.path"></p>
    </body>
</html>

app.js代码（新建一个javascript文件，起名为app.js，当然也可起别的名字）

angular.module('app',[])
.controller('MainCtrl',['$location',function($location){//注入$location服务
    var self = this;
    self.path = $location.absUrl();//获得当前URL，把此值赋值给页面path
}])

代码分析

我们新建了一个JavaScript文件，起名为app.js。

注意这里的controller函数，第二个参数数组里多了一个陌生的角色——$location，这就是我们所谓的内置服务。

在使用的时候注意，数组中的function函数前，写服务的名字，用单引号括起来，function参数中给服务起一个别名（虽说名字不限制，但通常就是用服务本身的名字），这里面的名字不需要用单引号。使用的时候，我们直接用这个别名进行调用即可。其中absUrl() 就是$location 服务的内置函数，此函数会返回URL的绝对地址。

此处只以$location举例，其他内置服务使用方法类似。

3.2 自定义服务

使用factory方式创建服务

html代码
这里写图片描述

app.js代码

angular.module('app',[])
.controller('MainCtrl',['$location','myservice',function($location,myservice){//注入$location服务
    var self = this;
    self.path = $location.absUrl();//获得当前URL，把此值赋值给页面path

    myservice.setTitle('首页');//使用自定义服务对象调用其内部方法
}])

service.js(新建一个js文件，起名service.js，当然可以起别的名字)

angular.module('app')
.factory('myservice',[function(){
//定义一个对象，在最后返回
    var f = {
    //这里面可以定义对象，也可以定义方法
        setTitle:function(title){
            document.getElementById('title').innerHTML=title;
        }
    };
    return f;//注意这里要有返回值
}])