一、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. notebook

    1. 2.

  2. ubuntu默认root密码

    安装完Kubuntu后一直都是用我的用户名bbking登录, 一直没想到root的问题, 以为每次sudo输入的密码就是我的root密码. 刚才为了修改文件夹的所有者,想使用su root切换到roo ...

  3. error: failed to initialize alpm library

    这个问题出在archlinux上面 [root@sarch pacman]# pacman -Syuerror: failed to initialize alpm library(database ...

  4. Sobel算子 （转）

    幻灯片1 Sobel算子 幻灯片2 一.Sobel边缘检测算子 l 在讨论边缘算子之前,首先给出一些术语的定义: l (1)边缘:灰度或结构等信息的突变处,边缘是一个区域的结束,也是另一个区域的开始, ...

  5. 227. Basic Calculator II

    Implement a basic calculator to evaluate a simple expression string. The expression string contains ...

  6. 38. Count and Say

    The count-and-say sequence is the sequence of integers beginning as follows: 1, 11, 21, 1211, 111221 ...

  7. C++@冒号（:）和双冒号（::）的用法

    转自:http://blog.csdn.net/zimingjushi/article/details/6549390 1.冒号(:)用法 (1)表示机构内位域的定义(即该变量占几个bit空间) ty ...

  8. about JNI

    1.Java对C/C++事件处理的封装JIT(Just in Time.Java语言的原动态编译技术) 大多数的游戏引擎都是使用可移植的C语言开发的,然后通过简单的封装以适应特殊的平台. 2.Andr ...

  9. Java之JUC系列：外部Tools

    前面写了两篇JDBC源码的文章,自己都觉得有点枯燥,先插一段JUC系列的文章来换换胃口,前面有文章大概介绍过JUC包含的东西,JUC体系包含的内容也是非常的多,不是一两句可以说清楚的,我这首先列出将会 ...

  10. svn tree conflicts 解决方法

    svn resolve --accept working -R XXX. 其中XXX为提示冲突的目录.