一、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. 《JS高程》基本类型和引用类型的值学习笔记

    ECMAScript 变量可能包含两种不同数据类型的值:基本类型值和引用类型值. 创建方式类似:创建一个变量并为其赋值. (1)基本类型值和引用类型值比较 基本类型值 引用类型值 简单的数据段 可能由 ...

  2. dedecms内容页调用缩略图 缩略图多种用法(借鉴)

    给大家分享一下文章内容页调用缩略图的方法. 这种问题是:文章有缩略图,但是文章里面没有,想把缩略图添加到文章里面. 1.文章内容页调用缩略图方法如下两种.第一种没有大小设置.原图显示.第二种.可以设大 ...

  3. UI学习笔记---第十四天数据持久化

    一.沙盒机制 每个应用程序位于文件系统的严格限制部分 每个应用程序只能在为该程序创建的文件系统中读取文件 每个应用程序在iOS系统内斗放在了统一的文件夹目录下 沙盘路径的位置 1. 通过Finder查 ...

  4. iOS学习笔记---oc语言第三天

    继承.初始化方法 一.继承 继承的上层:父类  继承的下层:子类 继承是单向的,不能相互继承 继承具有传递性:A继承于B,B继承于C,A具有B和C的特征和行为 子类能继承父类全部的特征和行为(私有变量 ...

  5. bootstrap-3

    段落: 1.全局文本字号为14px(font-size); 2.行高为1.42857143(line-height),大约是20px(一串数字是由less编译器计算出来的,当然sass也有这样的功能) ...

  6. 精美的HTML5 Loadding页面

    以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...

  7. JAVA基本语义简介

    1.标识符 标识符可以有字母.数字.下划线(_).美元符($)组成,但不能包含@.%.空格等其他特殊符,不能以数字开头. 标识符不能是JAVA关键字和保留字(JAVA预留的关键字,以后的升级版中有可能 ...

  8. Linux perf tools

    http://techblog.netflix.com/2015/08/netflix-at-velocity-2015-linux.html

  9. dir:一行代码，提取出所有视频文件名称及路径

    某次,部门接到一个任务,要求对公司现有的视频文件资料做一个统计整理分类的工作. 领导召集开会,问:两周时间够用吗? 统计整理分类工作的第一步骤是把视频文件名称来源类别信息录入到 excel 表格中,才 ...

  10. Linux-lsof命令

    lsof,List Open Files 列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在,通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件(lsof强大原因).所以 ...