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

最新推荐文章于 2020-01-20 15:00:08 发布

houyanhua1

最新推荐文章于 2020-01-20 15:00:08 发布

阅读量249

点赞数

分类专栏： AngularJS 文章标签： angularjs 自定义服务 factory service value

本文链接：https://blog.csdn.net/houyanhua1/article/details/80152622

版权

AngularJS 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

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>

houyanhua1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 自定义服务, factory(),service(),value()

demo.html（factory方法实现）：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;AngularJS&lt;/title&gt; &lt;script src=
复制链接

扫一扫