AngularJS 自定义服务, factory(),service(),value()

demo.html（factory方法实现）：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>AngularJS</title>  
    <script src="angular.min.js"></script>  <!-- 引入AngularJS框架 -->  
</head>  
<body ng-app="App">  
    <div ng-controller="DemoController">
    	{{name}}
    </div>
    <script>  
        var App = angular.module('App',[]);  

        // 三种方法实现自定义服务 factory、service、value
        // 自定义服务。 后面的[]表示依赖注入
        App.factory('myservice',['$filter',function($filter) {
        	// 自定义服务, 该服务依赖于$filter
        	return function(inputData) {  // 可以返回一个对象,那么调用该服务时也要进行修改
        		var uppercase = $filter('uppercase');  // uppercase过滤器  
            	inputData = uppercase(inputData); 
        		return inputData;
        	}
        }]);

        // 控制器  使用自定义的服务
        App.controller("DemoController",['$scope','myservice',function($scope,myservice) {  
        	$scope.name = myservice('zhangsan');  // 调用自定义的服务
        }]);
          
    </script>  
</body>  
</html>

demo.html（service方法实现）：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>AngularJS</title>  
    <script src="angular.min.js"></script>  <!-- 引入AngularJS框架 -->  
</head>  
<body ng-app="App">  
    <div ng-controller="DemoController">
    	{{time}}
    </div>
    <script>  
        var App = angular.module('App',[]);  

        // 三种方法实现自定义服务 factory、service、value
        // 自定义服务。 后面的[]表示依赖注入
        App.service('timeService',['$filter',function($filter) {
        	this.showTime = function() {  // this就表示自定义服务timeService
        		var date = $filter('date');  // date过滤器
        		return date(new Date,'yyyy-MM-dd hh:mm:ss');
        	}
        	// 默认 return this;
        }]);

        // 控制器  使用自定义的服务
        App.controller("DemoController",['$scope','timeService',function($scope,timeService) {  
        	$scope.time = timeService.showTime();  // 调用自定义的服务
        }]);
          
    </script>  
</body>  
</html>

demo.html（value方法实现）：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>AngularJS</title>  
    <script src="angular.min.js"></script>  <!-- 引入AngularJS框架 -->  
</head>  
<body ng-app="App">  
    <div ng-controller="DemoController">
    	<h3>{{author}}</h3>
    	<h3>{{version}}</h3>
    </div>
    <script>  
        var App = angular.module('App',[]);  

        // 三种方法实现自定义服务 factory、service、value
        // 自定义服务。 value
        App.value('author','张三');   // 键值对的形式,相当于常量
        App.value('version','1.0.1');

        // 控制器  使用自定义的服务
        App.controller("DemoController",['$scope','author','version',function($scope,author,version) {
        	$scope.author = author;  // 调用自定义的服务 (常量)
        	$scope.version = version;
        }]);
          
    </script>  
</body>  
</html>

AngularJS 自定义服务, factory(),service(),value()

猜你喜欢