[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.
相关文章
- 在VS中让一个JS文件智能提示另一个JS文件中的成员2--具体引用
- 微信公众号开发系列教程一(调试环境部署续:vs远程调试)
- Atitit 人员级别评定法 目录 1.1. 十级评定法1--10 vs 年级评定法1 1.2. 工龄评定 职级 岗位级别1 2. 修订系数 学历*授课+绩效1 3. 计算方法1
- VS报表图解《一》---菜鸟版
- 在VS中建立.aspx,.cs,.designer.cs之间的级联关系
- Hadoop vs Elasticsearch – Which one is More Useful
- 软件工程师VS硬件工程师的思维对比,说中你了吗?
- “进大厂大半年,每个月都想走!”大公司 VS 小公司到底该如何选择? | 必看
- 几种分布式调用技术的比较 -- RPC VS REST
- C++: std::call_once vs atomic
- VS code Markdown Preview Enhanced 预览白色改为黑色