AngularJS custom service, factory(), service(), value()

demo.html (factory method implementation):

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

        // Three ways to implement custom service factory, service, value
        // Custom service. The following [] means dependency injection
        App.factory('myservice',['$filter',function($filter) {
        	// custom service, which depends on $filter
        	return function(inputData) { // You can return an object, so you need to modify it when calling the service
        		var uppercase = $filter('uppercase'); // uppercase filter  
            	inputData = uppercase(inputData);
        		return inputData;
        	}
        }]);

        // The controller uses the custom service
        App.controller("DemoController",['$scope','myservice',function($scope,myservice) {  
        	$scope.name = myservice('zhangsan'); // call custom service
        }]);
          
    </script>  
</body>  
</html>

demo.html (service method implementation):

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

        // Three ways to implement custom service factory, service, value
        // Custom service. The following [] means dependency injection
        App.service('timeService',['$filter',function($filter) {
        	this.showTime = function() { // this represents the custom service timeService
        		var date = $filter('date'); // date filter
        		return date(new Date,'yyyy-MM-dd hh:mm:ss');
        	}
        	// default return this;
        }]);

        // The controller uses the custom service
        App.controller("DemoController",['$scope','timeService',function($scope,timeService) {  
        	$scope.time = timeService.showTime(); // call custom service
        }]);
          
    </script>  
</body>  
</html>

demo.html (value method implementation):

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

        // Three ways to implement custom service factory, service, value
        // Custom service. value
        App.value('author','Zhang San'); // The form of key-value pair, equivalent to a constant
        App.value('version','1.0.1');

        // The controller uses the custom service
        App.controller("DemoController",['$scope','author','version',function($scope,author,version) {
        	$scope.author = author; // call custom service (constant)
        	$scope.version = version;
        }]);
          
    </script>  
</body>  
</html>

AngularJS custom service, factory(), service(), value()

Guess you like