AngularJs 自定义服务

最新推荐文章于 2020-09-10 16:36:17 发布

原创最新推荐文章于 2020-09-10 16:36:17 发布 · 399 阅读

0 ·

CC 4.0 BY-SA版权

前段_angularjs 专栏收录该内容

18 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en" ng-app="App">
	<head>
		<meta charset="UTF-8">
		<title>AngularJS 自定义服务</title>
	</head>
	<!--
		自定义服务:所谓服务是将一些通用性的功能逻辑进行封装方便使用， AngularJS允许将自定义服务
				服务本质就是一个对象或函数，所以自定义服务就是要返回一个对象或函数以供使用
	-->
	<body>
		
		<div ng-controller="DemoController">
			<span>自定义factory名为showTime1的服务:{{now}}</span><hr />
		</div>
		
		<div ng-controller="DemoController2">
			<span>自定义service名为showTime2的服务:{{now}}</span><hr />
		</div>
		
		<div ng-controller="DemoController3">
			定义一个常量作者:{{author}}<br />
			定义一个常量版本:{{ver}}
		</div>
		
		<script src="../libs/angular.min.js"></script>
		<script>
		
			// 定义一个名叫showTime1的服务
			var App = angular.module('App',[]);
			App.factory('showTime1', ['$filter', function ($filter) {
				var now = new Date();
				return $filter('date')(now, 'y-m-d H:m:s');
			}]);
			App.controller('DemoController', ['$scope', 'showTime1', function($scope, showTime1) {
				$scope.now = showTime1;
			}])
			
			
			
			
			// 自定义名为showTime2的显示日期服务
			App.service('showTime2', ['$filter', function($filter) {
				var now = new Date();
				var date = $filter('date');
				this.now = date(now, 'y-M-d H:mm:ss');
			}]);
			App.controller('DemoController2', ['$scope', 'showTime2', function($scope, showTime2) {
				$scope.now = showTime2.now;
			}])
		
		
		
		
		
			// 自定义常量服务
			App.value('author', 'itcast');
			App.value('version', '1.0');
	
			// 本质上一个服务 从表现形式上是一个常量
			// 常量就是不变的值与变对量相对应
			// 声明依赖调用服务
			App.controller('DemoController3', ['$scope', 'author', 'version', function($scope, author, version) {
				$scope.author = author;
				$scope.ver = version;
			}]);
		
		</script>	
	</body>
</html>