angular.js学习（2）--service和provider

来源：互联网发布：c语言判断字母大小写编辑：程序博客网时间：2024/05/17 22:50

1、使用$http服务

<!DOCTYPE html><html ng-app="app"><head><meta charset="utf-8"><title>http服务</title><script src="../angular-1.5.8/angular.min.js"></script><script src="http.js"></script></head><body><div ng-controller="appCtrl"><ul><li ng-repeat="item in books">{{item.title}}</li></ul></div></body></html>

var app = angular.module("app",[]);app.controller("appCtrl",["$scope","$http",function($scope,$http){$http({method:"GET",url:"data.json"}).success(function(data,status,header,config){console.log("success.....",data);console.log("success.....",status);console.log("success.....",header);console.log("success.....",config);$scope.books = data;}).error(function(data,status,header,config){console.log("error.....");});}]);

2、创建自己的service

<pre name="code" class="html">var app = angular.module("app",[]);app.factory("appFactory",["$http",function($http){var doRequest = function(username){return $http({method:"GET",url:"data.json"});}return {userList:function(username){return doRequest(username);}}}]).controller("myCtrl",["$scope","$timeout","appFactory",function($scope,$timeout,appFactory){var timeout;$scope.$watch('username',function(newUsername){if(newUsername){if(timeout){$timeout.cancel(timeout);}timeout = $timeout(function(){appFactory.userList(newUsername).success(function(data,status,header,config){console.log(status);$scope.users = data;})},350);}})}])

<!DOCTYPE html><html ng-app="app"><head><meta charset="utf-8"><title>http服务</title><script src="../angular-1.5.8/angular.min.js"></script><script src="http.js"></script></head><body><div ng-controller="myCtrl"><label>用户名：</label><input type="text" ng-model="username" /><pre ng-show="username">{{users}}</pre></div></body></html>

0 0