angularjs-factory,provider,service,constant,value,decorator
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs-factory,provider,service,constant,value,decorator相关的知识，希望对你有一定的参考价值。
1、factory
用 Factory 就是创建一个对象，为它添加属性，然后把这个对象返回出来。你把 service 传进 controller 之后，在 controller 里这个对象里的属性就可以通过 factory 使用了。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> <script> angular.module(‘mod‘, []) //定义工厂模块-factory .factory(‘fact‘, [function () { return { str:"testfactory", sum:function (n1,n2) { return n1+n2 } }; }]) //添加依赖注入模块fact .controller(‘testCtrl‘, [‘$scope‘,‘fact‘, function ($scope,fact) { alert(fact.str) }]) </script> </head> <body ng-app=‘mod‘ ng-controller=‘testCtrl‘> </body> </html>
2、provide
Providers 是唯一一种你可以传进 .config() 函数的 service。当你想要在 service 对象启用之前，先进行模块范围的配置，那就应该用 provider。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<script>
angular.module(‘mod‘, [])
.controller(‘modCtrl‘, [‘$scope‘,‘prod‘, function ($scope,prod) {
alert(prod.a+prod.b)
}])
.provider(‘prod‘, [function () {
this.$get = [function() {
return {
a:12,
b:15
};
}];
}])
</script>
</head>
<body ng-app=‘mod‘ ng-controller=‘modCtrl‘>
</body>
</html>3、service
Service 是用"new"关键字实例化的。因此，你应该给"this"添加属性，然后 service 返回"this"。你把 service 传进 controller 之后，在controller里 "this" 上的属性就可以通过 service 来使用了。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<script>
angular.module(‘mod‘, [])
.service(‘serv‘, [function () {
this.a=12
}])
.controller(‘modCtrl‘, [‘$scope‘,‘serv‘, function ($scope,serv) {
alert(serv.a)
}])
</script>
</head>
<body ng-app=‘mod‘ ng-controller=‘modCtrl‘>
</body>
</html>4、constant与value
constant不可修饰
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<script>
angular.module(‘mod‘, [])
.constant(‘VERSION‘, ‘5.0.3‘)
.value(‘name‘, ‘cisco‘)
.controller(‘modCtrl‘, [‘$scope‘,‘VERSION‘,‘name‘, function ($scope,VERSION,name) {
alert(name+‘:‘+VERSION)
}])
</script>
</head>
<body ng-app=‘mod‘ ng-controller=‘modCtrl‘>
</body>
</html>5、decorator
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<script>
angular.module(‘mod‘, [])
.constant(‘VERSION‘, ‘5.0.3‘)
.value(‘name‘, ‘cisco‘)
.controller(‘modCtrl‘, [‘$scope‘,‘VERSION‘,‘name‘,‘prod‘, function ($scope,VERSION,name,prod) {
alert(name+‘ ‘+prod.nxos+‘‘+prod.type+‘ ‘+prod.date+‘ ‘+VERSION)
}])
.provider(‘prod‘, [function () {
this.$get = [function() {
return {
nxos:‘nxos‘,
type:‘5548‘
};
}];
}])
.decorator(‘prod‘,function ($delegate) {
$delegate.date=‘2007.1.10‘
return $delegate
})
</script>
</head>
<body ng-app=‘mod‘ ng-controller=‘modCtrl‘>
</body>
</html>以上是关于angularjs-factory,provider,service,constant,value,decorator的主要内容，如果未能解决你的问题，请参考以下文章
Flutter - Provider - 如何根据 Provider 的值更改 UI？
provider: TCP Provider, error: 0
<Provider> 中的错误 - 检查 `Provider` 的渲染方法。反应还原
flutter_bloc/provider RepositoryProvider vs Provider