[AngularJS] Services, Factories, and Providers -- Service vs Factory
Creating a Service:
Before actual create an angular service, first create a constructor in Javascript:
//constructor function function DroidService() { this.name = ''; } DroidService.prototype.speak = function () { return "Hi I am " + this.name; };
Then you we want to use this constutor function, you need to new an instance:
var droid = new DroidService(); droid.name = 'r2-d2'; console.log(droid.speak());
What need to understand here is that, you when do new opration, under the hook, Javascript does tow thing for you:
function DroidService() { // var this = {} this.name = ''; // return this; }
First is var a new this object, then return this object.
Angular service is a constructor function.
//constructor function function DroidService() { this.name = ''; } DroidService.prototype.speak = function () { return "Hi I am " + this.name; }; angular.module('app', []) .service('droid', DroidService) .controller('DroidController', DroidController); function DroidController(droid) { var droidCtrl = this; droid.name = 'r2-d2'; droidCtrl.message = droid.speak(); }
When you create a service in angular, it helps to 'new' the constructor (service), then inject this instance whenever you want to use it.
Creating a Factory:
You can create an function which return an object:
function droidFactory() { function speakingPrivately() { return "Hi I am " + this.name; } return { name: '', speak: speakingPrivately }; }
This is called reaveling modular partten, because you can choose which function or props to be public or private by include those into return object.
Then you just need to invoke the function, you can get the object.
var droid = droidFactory(); droid.name = 'c3-po'; console.log(droid.speak());
Angular Factory is a function which return an object. (No constructor fucntion, no new opreation):
//revealing module pattern function droidFactory() { function speakingPrivately() { return "Hi I am " + this.name; } return { name: '', speak: speakingPrivately }; } angular.module('app', []) .factory('droid', droidFactory) .controller('DroidController', DroidController); function DroidController(droid) { var droidCtrl = this; droid.name = 'c3-po'; droidCtrl.message = droid.speak(); }
When you create a factory, Angular will help to invoke the function so when you inject into controller, you will get the object back.
相关文章
- python用vscode还是pycharm_菜鸟VS高手
- VS Code自定义修改选中内容和tab颜色
- Jetbrains推出新一代编辑器:Fleet,网友:VS Code迎来劲敌JB Code!
- git merge vs git rebase
- pandas_VS_Excel统计各班成绩的最大最小平均分合格优秀尖子人数
- [译文]实用性 vs 理解力:进入 2022 年的机器学习领域
- 存算一体 VS 存算分离 ,IT发展下的技术迭代
- JetBrains再出手,这次要干翻VS Code了。。
- IPS vs IDS vs Firewall vs WAF,它们之间有什么区别与联系?
- 文心一言 VS chatgpt (3)-- 算法导论2.1
- 文心一言 VS chatgpt (4)-- 算法导论2.2 1~2题
- 使用VS连接 SQL Server数据库的简单指南(vs连接sqlserver)
- Windows VS Linux:操作系统之争(vslinux)
- 如何使用VS连接MySQL(vs怎么连接mysql)
- 性能比较比较分析:VS编译器与Oracle数据库的性能差异(vs与oracle数据库)
- VS如何连接Oracle数据库?(vs如何连接oracle)
- VS连接MSSQL:解决数据库连接问题(vs连接 mssql)
- VS联与SQL Server 配合协作,让工作更轻松。(vs联sqlserver)
- VS 开发 SQL Server 数据库应用实践(vs的sqlserver)
- 服务【VS帮助快速开启MSSQL服务】(vs开启mssql)
- VS与SQLserver:搭建强大的开发体系(vs与sqlserver)
- VS MSSQL:强势对抗,谁为佳?(vs mssql)
- VS下使用Redis数据库体验更佳数据交互性能(vs访问redis数据库)
- VS中使用Redis 一步一步搭建简易高效开发环境(vs中使用redis)
- 比较视图VS与Redis(vs与redis)
- 研究 VS C 如何从 Redis 中读取数据(vs c 读取redis)
- VS操作Redis 简单而不繁琐(在vs操作redis)