一、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. python发布文件(windows)

    怎样发布文件 首先发布本地文件有一个好的用处,就是省去了朋友同import的时候还要使用sys.path,省的自己出错 1.新建文件夹d:\ tool 在的d:\tool文件夹中建立login.py ...

  2. TCP/IP 协议大致的概念

    最近在看<图解HTTP>和<HTTP权威指南>,对TCP/IP大致过了一下. TCP/IP 不仅仅是TCP 和 IP  TCP/IP 是协议族,与之相对的事IEEE等标准组织设 ...

  3. python数据结构与算法——小猫钓鱼(使用队列)

    按照<啊哈>里的思路实现这道题目,但是和结果不一样,我自己用一幅牌试了一下,发现是我的结果像一点,可能我理解的有偏差. # 小猫钓鱼 # 计算桌上每种牌的数量 # 使用defaultdic ...

  4. HDU 5748 最长上升子序列的长度nlogn(固定尾部)

    Bellovin Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total ...

  5. poj 3264 线段树 求区间最大最小值

    Description For the daily milking, Farmer John's N cows (1 ≤ N ≤ 50,000) always line up in the same ...

  6. 转：db2 iptables相关用法（2）

    Centos 6 iptables 配置 Ben 2011/12/24 [root@localhost ben.liu]# service iptables status Table: filter ...

  7. leetcode 125. Valid Palindrome ----- java

    Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...

  8. HDU 5234 Happy birthday --- 三维01背包

    HDU 5234 题目大意:给定n,m,k,以及n*m(n行m列)个数,k为背包容量,从(1,1)开始只能往下走或往右走,求到达(m,n)时能获得的最大价值 解题思路:dp[i][j][k]表示在位置 ...

  9. GCC编译器

    详见<gcc中文手册> 编译过程 预处理器cpp 编译器gcc 汇编器as 链接器linker file.c   -------------> file.i  ----------- ...

  10. GPU（CUDA）学习日记（十一）------ 深入理解CUDA线程层次以及关于设置线程数的思考

    GPU线程以网格(grid)的方式组织,而每个网格中又包含若干个线程块,在G80/GT200系列中,每一个线程块最多可包含512个线程,Fermi架构中每个线程块支持高达1536个线程.同一线程块中的 ...