Angular 服务的简单使用

 

 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>

 

posted @ 2017-02-10 15:03  Young汨  阅读(376)  评论(0)    收藏  举报