我们知道Angular提供的标准服务组件有以下:
- $http:用于处理 XMLHttpRequest
- $location:提供当前URL的信息
- $q: 异步请求使用,promise/deferred模块
- $routeProvider:配置路由
- $log:日志服务
$http有下面短方法:$http.get() $http.head() $http.post() $http.put() $http.delete() $http.jsonp()
$的命名约定
前缀$是表示 Angular自己提供的服务名称,如$scope或$provide等,为了防止冲突,最好避免命名自己开发的服务以为$开头。
如果你检查一个scope内部,你也可能会发现一些属性开头也是以 $开头。这些特性被认为是私有的,并且不应该访问或修改。
下面这个代码是将$window注入到自己的服务中:
angular.module('myModule', [], function($provide) { $provide.factory('notify', ['$window', function(win) { var msgs = []; return function(msg) { msgs.push(msg); if (msgs.length == 3) { win.alert(msgs.join("\n")); msgs = []; } }; }]); });
这是一个通知服务,将消息发送到所有Angular提供的window窗口中显示。
要注意的是所有AngularJS服务都是单例的。这意味着在每一个注入器中都只有一个需要的服务的实例。因为AngularJS极度讨厌全局的东西,这是符合面向对象OO。
$resource服务与REST
myAppModule.factory('CreditCard', ['$http', function($http) { var baseUrl = '/user/123/card'; return { get: function(cardId) { return $http.get(baseUrl + '/' + cardId); }, save: function(card) { var url = card.id ? baseUrl + '/' + card.id : baseUrl; return $http.post(url, card); }, query: function() { return $http.get(baseUrl); }, charge: function(card) { return $http.post(baseUrl + '/' + card.id, card, {params: {charge:true}}); } }; }]);
$resource是一个依赖$Http的服务组件,它创建了一个资源对象,让你与RESTful服务器端数据源实现交互的工厂。返回的是资源对象,提供了高层次的行为,而不需要与低级别$ HTTP服务交互操作方法。需要ngResource 安装(<script src="lib/angular/angular-resource.js"></script>)。
对返回的数据进行默认的如下操作:
{ 'get': {method:'GET'}, 'save': {method:'POST'}, 'query': {method:'GET', isArray:true}, 'remove': {method:'DELETE'}, 'delete': {method:'DELETE'} };
例如:
var User = $resource('/user/:userId', {userId:'@id'}); var user = User.get({userId:123}, function() { user.abc = true; user.$save(); });
User定义为资源$resource类型,小写的user是其一个实例,实际是从服务器抓取的根据id为123的一个User Json数组,那么我们下面可以对user这个实例使用上面几个默认操作,比如user.$save();。可以轻松地执行CRUD操作(创建,读取,更 新,删除)。
总结为:
修改
app.factory('itemCategoryService', ['$resource', function($resource) { return $resource( '../systemConfig/updateCategory/:id', {}, {edit: {method: 'put'}} ); }]); var item = new itemCategoryService; item.name = $scope.typeData.name; item.code = $scope.typeData.code; item.$edit({'id': $scope.typeData.id}, function(data) { $location.url('/typeList'); }, function(error) { });
删除
$resource('../systemConfig/delCategory/:id').remove({'id' : id});
下面以phone举例返回列表:
var phonecatServices = angular.module('phonecatServices', ['ngResource']); phonecatServices.factory('Phone', ['$resource', function($resource){ return $resource('phones/:phoneId.json', {}, { query: {method:'GET', params:{phoneId:'phones'}, isArray:true} }); }]);
这是从后台返回phone列表的$resource用法。节省了$http之类转换。
AngularJS提供了一个内置Service $q,它提供了一种承诺/延后(promise/deferred),可以保证我们的调用代码一定能够拿到数据。当然,我们可以猜到,最后去服务器取数据 的方式肯定是异步的。只不过这个服务提供了表面上是同步访问的API,当数据获取成功之后,自动将数据提供给调用的代码。
1. 创建一个Service,去服务器读取数据:
// $q 是内置服务,所以可以直接使用 ngApp.factory('UserInfo', ['$http', '$q', function ($http, $q) { return { query : function() { var deferred = $q.defer(); // 声明延后执行,表示要去监控后面的执行 $http({method: 'GET', url: 'scripts/mine.json'}). success(function(data, status, headers, config) { deferred.resolve(data); // 声明执行成功,即http请求数据成功,可以返回数据了 }). error(function(data, status, headers, config) { deferred.reject(data); // 声明执行失败,即服务器返回错误 }); return deferred.promise; // 返回承诺,这里并不是最终数据,而是访问最终数据的API } // end query }; }]);
2. 在Controller上(以同步方式)使用这个Service:赋值
angular.module('ngApp') .controller('MainCtrl', ['$scope', 'UserInfo', function ($scope, UserInfo) { // 引用我们定义的UserInfo服务 var promise = UserInfo.query(); // 同步调用,获得承诺接口 promise.then(function(data) { // 调用承诺API获取数据 .resolve $scope.user = data; }, function(data) { // 处理错误 .reject $scope.user = {error: '用户不存在!'}; }); }]);
欢迎讨论和交流AngularJS及前端开发
相关推荐
angularJS router filter service diractive
angularjs的demo
网上搜集的三个angularjs的demo
SpringMVC整合AngularJS简单Demo.zip SpringMVC整合AngularJS简单Demo.zip
本demo是有requirejs封装的angularjs,原始angularjs的demo是来自于angular-ui-router上的官方实例
angularjsdemo
项目笔记地址:https://blog.csdn.net/lewky_liu/article/details/83280754
springmvc+angularjs springmvc 整合angularjs json demo
angularJs2官网demo,使用方法:需要在本地安装npm,(https://nodejs.org/en/下载最新版本的nodeJs,保证node的版本高于等于v5.x.x,npm版本高于等于3.x.x),使用node -V或者npm -V检查版本。 下载文档之解压到某个目录...
angularjs-demo-theme, 在http上,为post构建的演示主题 使用AngularJS和 WP REST API v2测试版 9在你的WordPress主题中这是我的教程文章中最后的项目文件: 使用AngularJS和 REST API 在你的WordPress主题中。...
AngularJS + Bootstrap Demo项目,获取豆瓣电影数据
angularjs的各种demo,http://blog.csdn.net/u011563903/article/details/48377299有详细解释
适合初学angularjs的一个demo,不大不小,刚刚学习的同学可以下载看看
angularJS route路由demo
AngularJS-Demo
AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等,本例子 是AngularJS 静态demo , 可以当入门学习,方便快速上手。
本解决方案下的ui.router项目是针对angularjs ui.router嵌套路由做的一个demo,程序代码采用VS2013开发,代码齐全,可直接运行。有需要的带走吧~v~v~
展示使用AngularJS和spring MVC4,我们将创建一个增删查改的应用。前端使用AngularJS,后端使用Spring REST API。AngularJS使用$http服务和后端进行异步通信,同时使用AngularJS进行表单验证。