一、服务?
AngularJS功能最基本的组件之一是服务(Service)。服务为你的应用提供基于任务的功能。服务可以被视为重复使用的执行一个或多个相关任务的代码块。
AngularJS服务是单例对象,这意味着只有一个实例被创建过,服务使用AngularJS的依赖注入机制来定义和注册。
可以把服务注入模块、控制器和其它服务。
二、内置服务
$http 发送http请求
$resource 创建一个可以RESTful服务器端数据源交互对象
$window 浏览器的window元素的jQuery包装
$document 浏览器的document元素的jQuery包装
$rootScope 根作用域的访问
$rootElement 根元素的访问
$cacheFactory 提供键/值对放置到对象缓存
$interval 提供对window.setInterval访问
$timeout 提供对window.setTimeout访问
$cookies 提供对浏览器的cookie的读写访问
$animate 提供动画钩子来同时链接到以CSS和JavaScript为基础的动画
2.1 $http
内置服务$http
内置服务,Angular提供了很多,在使用的时候
通过依赖注入的方式在组件、控制器、自定义指令、run()函数等等中使用
$http 是一个特殊的内置服务,主要用于进行异步数据请求的功能实现
语法:
$http({method: 'GET', url: '/someUrl'}).
success(function(data, status, headers, config) {
}).
error(function(data, status, headers, config) {
});
案例1:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>$http</title>
<script type="text/javascript" src="js/lib/angular.min.js" ></script>
</head>
<body>
<div ng-controller="myCtrl">
<ul>
<li ng-repeat="g in goodsList">
<span ng-bind="g.classID"></span>***
<span ng-bind="g.className"></span>
</li>
</ul>
</div>
</body>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",["$scope","$http",function($scope,$http){
$scope.goodsList=[]; //保存所有商品的数组 不写也可以
//异步请求获取数据
$http({
method:"GET",
url:"http://datainfo.duapp.com/shopdata/getclass.php"
}).then(
function success(resp){
console.log(resp);
$scope.goodsList=resp.data;
},
function error(resp){
console.log("errorLLLLLL"+resp);
}
);
}]);
</script>
</html>
<!DOCTYPE html>
<html ng-app="myAPP">
<head>
<meta charset="UTF-8">
<title>登录</title>
<script src="js/lib/angular.min.js" ></script>
</head>
<body>
<div class="form" ng-controller="login">
账号:<input type="text" ng-model="username"/><br />
密码:<input type="text" ng-model="password"/><br />
<button ng-click="loginFn()">登录</button>
</div>
</body>
<script>
var app=angular.module("myApp",[]);
app.controller("login",["$scope","$http",function($scope,$http){
$scope.loginFn=function(){
$http({
method:"GET",
url:"http://datainfo.duapp.com/shopdata/userinfo.php",
params:{
status:"login",
userID:$scope.username,
password:$scope.password
}
}).then(
function success(resp){
console.log("请求成功",resp);
if(resp.data){
console.log("登陆成功,跳转到首页");
}else{
console.log("登录失败");
}
},
function error(resp){
console.log("请求失败");
}
);
}
}]);
</script>
</html>
用图片来解释上面的代码: