一、angularJs中的简单服务应用

下面的例子让我们明白在AngularJs中如何去调用文件中的数据,从而将文件中的数据显示在页面上;改变url的地址,也可以去调用后台接口.

实例：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body ng-app="myApp" ng-controller="LoadDataCtrl">

		<ul >

			<li ng-repeat="user in users">

				{{user.name}}

			</li>

		</ul>

	</body>

	<script type="text/javascript" src="js/angular.js" ></script>

	<script type="text/javascript" src="js/http.js" ></script>

</html>

http.js

var myModule=angular.module("myApp",[]);

//myModule.controller('LoadDataCtrl',['$scope','$http',function($scope){

myModule.controller('LoadDataCtrl',function($scope,$http){

	$http({

		method:'GET',

		url:'js/data.json'

	}).success(function(data,status,headers,config){

		console.log("success...");

		console.log(data);

		$scope.users=data;

	}).error(function(data,status,headers,config){

		console.log("error...");

	});

});

data.json:

html运行结果：

二、创建自定义服务(我们自己的服务)

明白两点：

1.如何注册服务

2.如何使用服务

完整的实例：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body ng-app="MyServiceApp" ng-controller="ServiceController">

	用户名：<input type="text" ng-model="username" placeholder="请输入用户名">

	<ul >

			<li ng-repeat="user in users">

				{{user.name}}

			</li>

		</ul>

	</body>

	<script type="text/javascript" src="js/angular.js" ></script>

	<script type="text/javascript" src="js/service.js" ></script>

</html>

service.js:

var myServiceApp = angular.module("MyServiceApp",[]);

myServiceApp.factory('userListService',function($http){

	var doRequest = function(username,path){

		return $http({

			method: 'GET',

			url:'js/data.json'

		});

	};

	return {

		userList: function(username) {

			return doRequest(username,'userList');

		}

	};

});

myServiceApp.controller("ServiceController",function($scope,$timeout,userListService){

	var timeout;

	$scope.$watch('username',function(newUserName) {

		if(newUserName){

			if(timeout){

				$timeout.cancel(timeout);

			}

		timeout = $timeout(function() {

			userListService.userList(newUserName)

			.success(function(data,status) {

				$scope.users = data;

			});

		},350);

		}

	});

});

data.json:

运行html文件的结果：

初始状态：

文本框中输入值回车后如下：

最常用的是使用factory的方式,这里主要总结factory创建服务的方式,以上面的例子为例.

详细分析：

1.创建服务的方式

2.注册服务

用angular.module api创建了一个名字叫userListService的服务,服务的工厂函数用来生成一个单例的对象或函数,这个对象或函数就是服务,它会存在于应用的整个生命周期内.

上面的例子中将方法设置为服务对象的一个属性将其暴露给外部(上面的例子中工厂函数包含一个方法返回一个promise,最后return一个userList函数的服务对象).

3.使用服务

当服务的名字当作参数传递给控制器函数,就可以将服务注入到控制器中;即当服务成了某个控制器的依赖,就可以在控制器中调用任何定义在服务对象上的方法.

注： 同创建控制器一样工厂函数即可以是一个函数,也可以是一个数组.

　

AngularJs中的服务的更多相关文章

  1. 怎么理解angularjs中的服务？

    AngularJS中的服务其实就是提供一种方式抽取共用类库 比如说一些工具类方法,我们传统的做法就是自己写个 utility 类,把相关的工具方法填充到utility里面去,最后把utility类放到 ...

  2. AngularJS中实现服务端分页

    这个教程将介绍在AngularJS应用中的服务端分页处理.在任何涉及到列表或表格数据的应用中都可能会用到分页. 概念 当我们处理异步分页时,每次只从服务器上获取一页数据.也就是说当用户点击第二页,就只 ...

  3. AngularJS中$http服务的简单用法

    我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象. 1.链式调用 $http服务是只能接受一个参数的函数,这个参数是一个对 ...

  4. $q -- AngularJS中的服务（理解）

      描述 译者注: 看到了一篇非常好的文章,如果你有兴趣,可以查看: Promises与Javascript异步编程 , 里面对Promises规范和使用情景,好处讲的非常好透彻,个人觉得简单易懂. ...

  5. $q -- AngularJS中的服务

    此 承诺/延迟(promise/deferred)实现 的灵感来自于 Kris Kowal's QCommonJS Promise建议文档 将承诺(promise) 作为和 异步执行操作(action ...

  6. AngularJS中实现日志服务

    本篇体验使用AngularJS自定义一个记录日志的服务. 在AngularJS中,服务的一些写法是这样的: var app = angular.module('app',[]); app.provid ...

  7. AngularJs之六（服务）

    服务:AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用.AngularJS 内建了30 多个服务. 最常用的服务:$location  服务,  $http 服务 ...

  8. angularJS中的Promise对象($q)的深入理解

    原文链接:a better way to learn AngularJS - promises AngularJS通过内置的$q服务提供Promise编程模式.通过将异步函数注册到promise对象, ...

  9. AngularJS内建服务以及自定义服务的用法

    在AngularJS中, 服务是一个比较重要的部分,它是一个对象或者是函数,可以在你的AngularJS的应用中使用.接下来介绍几种比较常用的内建服务以及自定义服务的方法. [内建服务] (1)loc ...

随机推荐

  1. 互联网保险O2O平台微服务架构设计(转)

    非常感谢http://www.cnblogs.com/skyblog/p/5044486.html 关于架构,笔者认为并不是越复杂越好,而是相反,简单就是硬道理也提现在这里.这也是微服务能够流行的原因 ...

  2. Python 将pdf转换成txt（不处理图片）

    上一篇文章中已经介绍了简单的python爬网页下载文档,但下载后的文档多为doc或pdf,对于数据处理仍然有很多限制,所以将doc/pdf转换成txt显得尤为重要.查找了很多资料,在linux下要将d ...

  3. 冒泡排序（python版）

    实现源码 def bubble(array): flag = len(array)- : iter = for i in range(flag): ]: array[i], array[i+]= ar ...

  4. Apache Flex + Adobe Flash Builder环境配置

    在开始学习Flex之前,需要配置开发环境.Apache Flex SDK包含了你开发所需要的东西,当然除了集成开发环境(Integrated Development Environment,IDE). ...

  5. [转载]新功能：用微软的Live Writer离线写博文

    原文地址:Writer离线写博文">新功能:用微软的Live Writer离线写博文作者:新浪博客 Writer离线写博文" title="[转载]新功能:用微软的 ...

  6. HDU 4358 莫队算法+dfs序+离散化

    Boring counting Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 98304/98304 K (Java/Others)T ...

  7. ES6-函数扩展

  8. php支付接口，代付、感悟

    支付接口: 1.验证用户登录信息 2.验证参数.用加密串来匹配,开信息是否被篡改 3.如果有必要可以仿造购物城 建立购物车列表 4.建立和请求方的关联表 5.进行订单生成.支付流程.各种判断.验证. ...

  9. 解决Ubuntu下Sublime Text 3无法输入中文

    前言 sublime很好用,但是ubuntu下不能输入中文,这是一个很大的问题.不知道为什么开发着一直也不解决,好在还是有高手在,总能找到方法.网上方法很多,但是也很乱,现在我将自己的经验总结一下. ...

  10. RedHat Linux下利用sersync进行实时同步数据

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://linux5588.blog.51cto.com/65280/772054 拓扑图 ...