angularjs-factory,provider,service,constant,value,decorator

前端之家收集整理的这篇文章主要介绍了angularjs-factory,provider,service,constant,value,decorator前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1、factory

Factory 就是创建一个对象,为它添加属性,然后把这个对象返回出来。你把 service 传进 controller 之后,在 controller 里这个对象里的属性就可以通过 factory 使用了。

  1. <!doctypehtml>
  2. <htmllang="en">
  3. <head>
  4. <Metacharset="UTF-8">
  5. <title>Document</title>
  6. <scriptsrc="angular.min.js"></script>
  7. <script>
  8. angular.module('mod',[])
  9. //定义工厂模块-factory
  10. .factory('fact',[function(){
  11. return{
  12. str:"testfactory",sum:function(n1,n2){
  13. returnn1+n2
  14. }
  15. };
  16. }])
  17. //添加依赖注入模块fact
  18. .controller('testCtrl',['$scope','fact',function($scope,fact){
  19. alert(fact.str)
  20. }])
  21. </script>
  22. </head>
  23. <bodyng-app='mod'ng-controller='testCtrl'>
  24.  
  25. </body>
  26. </html>

2、provide

Providers是唯一一种你可以传进 .config() 函数的 service。当你想要在 service 对象启用之前,先进行模块范围的配置,那就应该用 provider。

  1. <!doctypehtml>
  2. <htmllang="en">
  3. <head>
  4. <Metacharset="UTF-8">
  5. <title>Document</title>
  6. <scriptsrc="angular.min.js"></script>
  7. <script>
  8. angular.module('mod',[])
  9. .controller('modCtrl','prod',prod){
  10. alert(prod.a+prod.b)
  11. }])
  12. .provider('prod',[function(){
  13. this.$get=[function(){
  14. return{
  15. a:12,b:15
  16. };
  17. }];
  18. }])
  19. </script>
  20. </head>
  21. <bodyng-app='mod'ng-controller='modCtrl'>
  22.  
  23. </body>
  24. </html>

3、service

Service是用"new"关键字实例化的。因此,你应该给"this"添加属性,然后 service 返回"this"。你把 service 传进 controller 之后,在controller里 "this" 上的属性就可以通过 service 来使用了。

  1. <!doctypehtml>
  2. <htmllang="en">
  3. <head>
  4. <Metacharset="UTF-8">
  5. <title>Document</title>
  6. <scriptsrc="angular.min.js"></script>
  7. <script>
  8. angular.module('mod',[])
  9. .service('serv',[function(){
  10. this.a=12
  11. }])
  12. .controller('modCtrl','serv',serv){
  13. alert(serv.a)
  14. }])
  15. </script>
  16. </head>
  17. <bodyng-app='mod'ng-controller='modCtrl'>
  18.  
  19. </body>
  20. </html>

4、constant与value

constant不可修饰

  1. <!doctypehtml>
  2. <htmllang="en">
  3. <head>
  4. <Metacharset="UTF-8">
  5. <title>Document</title>
  6. <scriptsrc="angular.min.js"></script>
  7. <script>
  8. angular.module('mod',[])
  9. .constant('VERSION','5.0.3')
  10. .value('name','cisco')
  11. .controller('modCtrl','VERSION','name',VERSION,name){
  12. alert(name+':'+VERSION)
  13. }])
  14. </script>
  15. </head>
  16. <bodyng-app='mod'ng-controller='modCtrl'>
  17.  
  18. </body>
  19. </html>

5、decorator

  1. <!doctypehtml>
  2. <htmllang="en">
  3. <head>
  4. <Metacharset="UTF-8">
  5. <title>Document</title>
  6. <scriptsrc="angular.min.js"></script>
  7. <script>
  8. angular.module('mod',name,prod){
  9. alert(name+''+prod.nxos+''+prod.type+''+prod.date+''+VERSION)
  10. }])
  11. .provider('prod',[function(){
  12. this.$get=[function(){
  13. return{
  14. nxos:'nxos',type:'5548'
  15. };
  16. }];
  17. }])
  18. .decorator('prod',function($delegate){
  19. $delegate.date='2007.1.10'
  20. return$delegate
  21. })
  22. </script>
  23. </head>
  24. <bodyng-app='mod'ng-controller='modCtrl'>
  25.  
  26. </body>
  27. </html>

猜你在找的Angularjs相关文章