AngularJS 内置服务

一、服务?

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 是一个特殊的内置服务,主要用于进行异步数据请求的功能实现

AngularJS的核心服务之一,这个服务主要封装了XMLHttpRequest对象和JSONP数据访问模式来完成远程服务的数据请求。

语法:

$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>


案例2:
之前用JQ写过登陆和注册页面,现在有了内置服务,就可以运用到了,举个登陆页面的例子:

<!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>

用图片来解释上面的代码:



分为3个板块,都在各自的板块做自己的事。

本章主要讲了内置服务中的$http,楼主会持续更新其他的几个服务~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章