1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Service</title>
6 </head>
7 <body ng-app="app" ng-controller="myCtrl">
8
9 <input type="text" ng-model="cont" >
10 <hr>
11 <button ng-click="get()">Get</button>
12
13 <ul ng-show="user">
14 <li>{{user.id}}</li>
15 <li>{{user.name}}</li>
16 <li>{{user.age}}</li>
17 </ul>
18
19
20 <script src="bower_components/angular/angular.js"></script>
21
22 <script>
23
24 var app = angular.module("app",[]);
25
26 // app.controller("myCtrl",["$scope","$http",function ($scope,$http) {
27 // $scope.get=function () {
28 // $http({
29 // method:'GET',
30 // url:'data.json'
31 // }).then(function suc(response) {
32 // $scope.user=response.data;
33 // console.log(response);
34 // });
35 // }
36 // }])
37
38
39
40 // app.controller("myCtrl",["$scope","$timeout","$http",function ($scope,$timeout,$http) {
41 // var timer;
42 // $scope.$watch("cont",function (newCont) {
43 // if(newCont) {
44 // if(timer){
45 // $timeout.cancel(timer);//延时500毫秒后请求数据，避免频繁的请求
46 // }
47 // timer = $timeout(function () {
48 // $http({
49 // method: 'GET',
50 // url: 'data.json'
51 // }).then(function suc(response) {
52 // $scope.user = response.data;
53 // console.log(response);
54 // });
55 // },500);//延时500毫秒后请求数据，避免频繁的请求
56 //
57 // }
58 // })
59 // }])
60
61 //自定义服务
62 app.factory("GetService",["$http",function ($http) {
63 return {
64 doget:function (url) {
65 return $http({
66 method: 'GET',
67 url: url
68 });
69 }
70 }
71 }]);
72 //自定义服务,放在最后一个参数中
73 app.controller("myCtrl",["$scope","$timeout","$http","GetService",function ($scope,$timeout,$http,GetService) {
74 var timer;
75 $scope.$watch("cont",function (newCont) {
76 if(newCont) {
77 if(timer){
78 $timeout.cancel(timer);//延时500毫秒后请求数据，避免频繁的请求
79 }
80 timer = $timeout(function () {
81 //使用自定义服务
82 GetService.doget('data.json').then(function suc(response) {
83 $scope.user = response.data;
84 console.log(response);
85 });
86 },500);//延时500毫秒后请求数据，避免频繁的请求
87 }
88 })
89 }])
90
91
92 </script>
93
94 </body>
95 </html>
