zoukankan html css js c++ java

AngularJs中的服务

一、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文件的结果：

初始状态：