Page 137 - AngularJS权威教程

14.2 使用服务 117

// 因此我们需要调用data.data来获取原始数据 1
$scope.events = data.data;
})
});
}); 2
由于$http返回的是promise对象，可以通过.success()方法像直接调用$http一样
调用返回的对象。 3

和上面的例子一样，并不推荐在控制器中使用$watch，这里只是为了方便演示。在
实际生产中会将这个功能封装进一个指令，并在指令中设置$watch。 4

在这个例子中，你可能会注意到在输入字段发生变化前，有一个延时。如果不延时，将导致 5
输入字段中的任何一个键盘输入都会让终端对GitHub API进行调用，这显然不是我们希望的。
通过内置服务$timeout来介绍一下这个延时。同注入githubService一样，需要将$timeout 6
服务注入到控制器中：

app.controller('ServiceController', function($scope, $timeout, githubService) { 7
});

在自定义服务之前注入所有的AngularJS内置服务，这是约定俗成的规则。
8
现在可以在控制器中使用$timeout服务了。在这个例子中$timeout服务会取消所有网络请
求，并在输入字段的两次变化之间延时350 ms。换句话说，如果用户两次输入之间有350 ms的间 9
隔，就推断用户已经完成了输入，然后开始向GitHub发送请求：

app.controller('ServiceController', function($scope, $timeout, githubService) { 10
// 和上面的示例一样, 添加了$timeout服务
var timeout;
$scope.$watch('username', function(newUserName) {
if (newUserName) { 11
// 如果在进度中有一个超时(timeout)
if (timeout) $timeout.cancel(timeout);
timeout = $timeout(function() { 12
githubService.events(newUserName)
.success(function(data, status) {
$scope.events = data.data;
}); 13
}, 350);
}
}); 14
});
到现在为止，我们只介绍了服务如何将类似的功能打包在一起，而使用服务也是在控制器之
间共享数据的典型方法。 15
例如，如果我们的应用需要后端服务的授权，可以创建一个SessionsService服务处理用户
16
的授权过程，并保存服务端返回的令牌。当应用中任何地方要发送一个需要授权的请求，可以通
过SessionsService来访问令牌。
17
如果我们的应用中有一个用来设置GitHub用户名的设置页面，我们希望在应用中所有的控制
器之间共享用户名。
18