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

来源：互联网发布：java微信编辑：程序博客网时间：2024/06/01 07:21

一、为什么要用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;//注意这里要有返回值}])

以上，就是使用factory创建自定义服务的方法。另外，还可以使用service和provider创建自定义服务。

四、美图欣赏

这里写图片描述

0 0