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

    /** * insertAdjacentHTML * 支持 insertAdjacentHTML()方法的浏览器有 IE.Firefox 8+.Safari.Opera 和 Chrome */ var ...

  2. Tomcat9源码编译及导入Eclipse(转)

    1.下载tomcat源码.建议下载最新版本tomcat9. svn地址:http://svn.apache.org/repos/asf/tomcat/tc9.0.x/branches/gsoc-jas ...

  3. CentOS 6.6 中设置Terminal快捷键

    排版比较乱,参见 https://www.zybuluo.com/Jpz/note/144583 CentOS 6.6 中设置Terminal快捷键 Linux开发环境配置 Terminal是Cent ...

  4. 装载：深入理解拉格朗日乘子法（Lagrange Multiplier) 和KKT条件

    在求取有约束条件的优化问题时,拉格朗日乘子法(Lagrange Multiplier) 和KKT条件是非常重要的两个求取方法,对于等式约束的优化问题,可以应用拉格朗日乘子法去求取最优值:如果含有不等式 ...

  5. tyvj 1057 dp 变形背包

    P1057 金明的预算方案 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 NOIP2006 提高组 第二道 描述 金明今天很开心,家里购置的新房就要领钥匙了 ...

  6. ES6 — 字符串String

    ES6对字符串新增了一些函数和操作规范.下面我们来看ES6中对字符串新加的特性. 1.模版字符串 (即用反引号定义的字符串) 传统的字符串拼接通过我们使用'+'号与变量连接.例如: let name= ...

  7. php会话(session)生命周期概念介绍及设置更改和回收

    http://www.169it.com/article/8429580816135935852.html https://my.oschina.net/jiec/blog/227252  sessi ...

  8. SQL Debugging

    C:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\Binn>“C:\Program Files\Debugging ...

  9. semat内核阿尔法的状态图

  10. C#代码：用事件模式实现通知

    事件提供了一种标准的机制来通知监听者..NET的事件模式使用了事件语法来实现观察者模式.任意数量的客户对象都可以将自己的处理函数注册到事件上,然后处理这些事件.这些客户对象不需要再编译期就给出.时间也 ...