自定义服务

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

下面我们用 factory 的方法来创建一个 service ,在我们应用里有两个控制器 UserController ,还有 ShowController ,这两个控制器可能都需要一些功能,就是去找到当前登录的用户,UserController 里面可能需要显示当前用户的名字,修改用户的档案等等,ShowController 有可能要用到当前用户的 id 去做一些事情,比如根据这个 id 找到当前用户喜欢的或者是订阅过的电视剧。

使用 service ,我们可以在控制器之间共享一些数据或者行为。这个视频我们通过一个简单的例子,来理解一下。

先在这个 app.js 里面新建一个 service ,输入 myApp.factory() ... 使用 factory 的方法来创建这个服务,另外还可以使用 service ,provider 的方法。使用哪种方法要看应用的需求或者个人喜好。

这个 factory 的第一个参数就是这个要创建的服务的名字 ... 我们可以叫它 User ,因为这个服务可以提供跟用户相关的一些功能。它的第二个参数就是服务可以做的事情。

myApp.factory('User', function () {};

我们先在一开始创建一个叫 user 的对象 ... var user = {}; 这里面包含一下简单的用户相关的内容 ...

var user = {
id: 1,
name: 'wanghao',
email: "wanghao@ninghao.net"
};

然后再创建一个函数 ... var _getUser = function() {}; 我们可以假设这个函数做了很多事情,比如到后台查询出当前用户的相关的信息。这里为了演示,我们让它简单的返回上面的 user 这个对象 ...

var _getUser = function () {
return user;
};

下面再创建一个函数 ... 可以叫它 _saveProfile ... 假设它做的事是去保存用户修改之后的个人档案 ... 同样保持简单,我们只是手工的去重新的设置一下 user 对象里面的相关的信息 ...

var _saveProfile = function () {
user.name = 'xiaoxue';
user.email = 'xiaoxue@ninghao.net';
};

最后在这个服务里面,我们需要返回这个服务要提供的功能或者数据 ... 用一个 return ... 返回一个对象 ... 这个服务我们想要提供 getUser 还有 saveProfile 这两个功能。 getUser 对应的是 _getUser ... saveProfile 对应的就是 _saveProfile ...

return {
getUser: _getUser,
saveProfile: _saveProfile
};

注入依赖

有了这个简单的服务以后,我们就可以在应用程序里面的其它组件里使用它了 ... 这里我们把它用在下面的这两个控制器里 ... 需要把这个服务作为控制器的依赖注入进来 ... 可以使用这个服务的名字 ... 作为一个参数 ... 这里要注入的,除了 $scope ,还有就是 User 这个服务 ...

在这个控制器里面,我们可以使用 User 服务提供的功能,比如使用它的 getUser 去得到当前的用户 ... 我们可以把它交给 $scope 的一个属性 ... $scope.user 等于 User.getUser();

然后在这个控制器里,再定义一个方法 ... 可以去提交用户修改个人档案的请求 ... $scope.submit = function() {} ... 在这个 submit 里面,可以使用 User 服务的 saveProfile() ...

myApp.controller('UserController', function ($scope, User) {
$scope.user = User.getUser();
$scope.submit = function () {
User.saveProfile();
};
});

下面,我们在 ShowController 这个控制器里,也用一下 User 这个服务 ... 比如我们也想在这个控制器里得到当前的用户 ... 先指定一下这个控制器的依赖 ... 一个是 $scope ... 还有就是 User ...

然后再把 User 服务的 getUser() 返回来的当前用户的相关的内容交给 $scope 上面的一个属性 ..

$scope.user = User.getUser();

HTML

保存 ... 再打开 index.html ... 添加一个标签 ... 上面使用 UserController 这个控制器 ... 标签里先添加一个标题 ... 然后可以再绑定输出 user.name ... 就是 UserController 这个控制器通过 User 服务的 getUser 得到的当前的用户的名字 ... 一个逗号,再输出用户的 email 地址 ...

然后另起一行,我们可以再用一个这个控制器里的 submit() 方法 ... 用一个 button 标签,按钮上面的文字是 提交 ... 上面加上 ng-click ... 点击这个按钮要做的事就是去执行 submit() 这个方法 ... 这个方法里面用到了 User 服务提供的 saveProfile ,它要做的就是去改变一下用户的相关信息。

<div ng-controller="UserController">
<h1>user</h1>
{{ user.name }},{{ user.email }}
<button ng-click="submit()">提交</button>
</div>

在下面,我再添加一组标签 ... 上面可以使用 ShowController 这个控制器 ... 里面添加一个标题 .. 再输出 user.name ... 还有 user.email ... 这两个东西表示的数据,也都是来自 User 服务的 getUser ...

保存 .... 在浏览器上,两个控制器里面,输出的用户名,还有用户的 email 地址是一样的 ... 在 UserController 这个控制器里面,我们还用了一个按钮 ... 点一下这个按钮 ... 这样会去执行这个控制器的 submit() 方法 ... 这个方法会用到 User 服务的 saveProfile .. 去改变用户的相关信息 ...

你会看到,绑定了用户相关信息的地方,会立即反映出修改之后的用户信息 ...

自定义服务《 AngularJS 基础 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点