AngularJS 内置服务

来源：互联网发布：php 九九乘法表表格编辑：程序博客网时间：2024/06/05 04:24

一、服务？

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,楼主会持续更新其他的几个服务~

0 0