AngularJs中的服务
2024-10-15 14:55:15
一、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.使用服务
当服务的名字当作参数传递给控制器函数,就可以将服务注入到控制器中;即当服务成了某个控制器的依赖,就可以在控制器中调用任何定义在服务对象上的方法.
注: 同创建控制器一样工厂函数即可以是一个函数,也可以是一个数组.
最新文章
- css中background背景属性概
- linux 修改ssh端口号
- URLConnection 使用
- JSONP的学习(收集整理)
- 转 Java中Filter、Servlet、Listener的学习
- (poj)1679 The Unique MST 求最小生成树是否唯一 (求次小生成树与最小生成树是否一样)
- dbartisan下载地址
- [Locked] Sparse Matrix Multiplication
- Qt中用QSS切分图片
- slice,substr,substring
- 解决QT编程出现 C2001错误
- git了解-使用笔记
- Java知多少(73)文件的压缩处理
- 如何通过钉钉扫码登录odoo
- 采用PowerDesigner 设计数据库
- 使用target打开的iframe 获取src的问题
- Linux下CPU信息的查看
- 洛谷P1242 新汉诺塔
- luogu P2801 教主的魔法
- 使用bootstrap-table等自动使用ajax地址载入数据的插件的数据设计建议