Created
January 13, 2015 23:11
-
-
Save mreis1/f4ad6ea77fbcb586931a to your computer and use it in GitHub Desktop.
This exaplains how we can take advantage of factories to share data across controllers in angular.js source http://jsbin.com/feciqatari
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html ng-app="myApp"> | |
<head> | |
<meta name="description" content="This is a template for angular experiments" /> | |
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> | |
</head> | |
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script> | |
<body> | |
<ul> | |
<li> | |
<a href="#factories">Understanding Factories</a> | |
</li> | |
<li> | |
<a href="#sharing-data-on-controllers">Sharing data between controllerss</a> | |
</li> | |
<li> | |
<a href="#topic1">Javascript: Objects passed as reference</a> | |
</li> | |
<li> | |
<a href="#topic2">When does the reference stop working?</a> | |
</li> | |
<li> | |
<a href="#example">Example</a> | |
</li> | |
</ul> | |
<h1 id="factories">Understanding Factories</h1> | |
<h2 id="sharing-data-on-controllers">Sharing data between controllers</h2> | |
<span><b>by marcio reis</b></span> | |
<h5 id="topic1">Javascript: Objects passed as reference</h5> | |
<p> | |
Any singleton is passed as reference when it comes to javascript. | |
</p> | |
<pre> | |
var b = { name: 'Ricardo' } | |
var a = b; | |
//updating the property name of b.name to something else will cause the a.b to be updated. This is what happens when when we use factories. | |
</pre> | |
<h5 id="topic2">When does the reference stop working?</h5> | |
<p>Whenever we try to bind an object to other object properties the reference is lost and changing values wont be reflected anymore without our intervention</p> | |
<pre> | |
var b = { name: 'Ricardo' } | |
var a = b; | |
var c = b.name; //c is now 'Ricardo'; | |
c = 'Maria'; | |
// b.name is still Ricardo | |
// a.name is still Ricardo | |
</pre> | |
<!-- | |
THE DEMO | |
--> | |
<div id="example" style="background:#f3f3f3"> | |
<h1>Example</h1> | |
<h4>Keep data sync using the object reference <a href="#topic1">from here</a></h4> | |
<div ng-controller="foo"> | |
This controller updates the property when we click the link 'update' <br/> | |
{{binValue.getByte();}} | |
<input type="text" ng-model="value"> | |
<a href="javascript:void(0);" ng-click="setBin()">update</a> | |
<span style="color:red;">The input value doesn't update when you write on the inputbox of the second example because it's a different property! </span> | |
</div> | |
<br/><br/> | |
<div ng-controller="bar"> | |
This controller has a two-way binding input between the input value and binFactory property 'byte' which causes other scopes that are bound to the same object reference to update automatically <br/> | |
{{binValue.getByte();}} | |
<input type="text" ng-model="binValue.byte"> | |
</div> | |
<br/><br/> | |
<h4>Failing Examples</h4> | |
<div ng-controller="fooFail"> | |
{{binValue.getByte();}} | |
<input type="text" ng-model="value"> | |
<a href="javascript:void(0);" ng-click="setBin(value)">update</a> | |
<span style="color:red;">DON'T!!! This example binds the scope to different properties and methods of our factory. This breaks the object reference!</span> | |
</div> | |
<br/><br/> | |
<div ng-controller="barFail"> | |
{{binValue.getByte();}} | |
<input type="text" ng-model="value"> | |
<a href="javascript:void(0);" ng-click="setBin()">update</a> | |
<span style="color:red;">DON'T: This example doesn't update when we change the value on the first 2 examples because it's bound to a property of the factory. ($scope.value = 'binFactory.byte'). But when we click the update button the first to examples are updated because we call the method setByte on it's own object reference</span> | |
</div> | |
</div> | |
<script id="jsbin-javascript"> | |
angular.module('myApp',[]) | |
.controller('foo', function(binFactory,$scope){ | |
$scope.binValue = binFactory; | |
$scope.setBin = setBin; | |
$scope.value = 'foo'; | |
function setBin(){ | |
binFactory.setByte($scope.value) | |
} | |
}) | |
.controller('bar', function(binFactory,$scope){ | |
$scope.binValue = binFactory; | |
}) | |
.factory('binFactory',function(){ | |
var byte = 'dog'; | |
var service = { | |
byte: byte, | |
getByte: getByte, | |
setByte: setByte | |
} | |
return service; | |
function getByte(){ | |
return this.byte; | |
} | |
function setByte(value){ | |
this.byte = value; | |
} | |
}) | |
.controller('fooFail', function(binFactory,$scope){ | |
$scope.setBin = binFactory.setByte; | |
$scope.value = binFactory.byte; //remeber, binding to object props break the reference and sync won't work anymore | |
}) | |
.controller('barFail', function(binFactory,$scope){ | |
$scope.value = binFactory.byte; | |
$scope.setBin = setBin; | |
function setBin(){ | |
binFactory.setByte($scope.value) | |
} | |
}) | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">angular.module('myApp',[]) | |
.controller('foo', function(binFactory,$scope){ | |
$scope.binValue = binFactory; | |
$scope.setBin = setBin; | |
$scope.value = 'foo'; | |
function setBin(){ | |
binFactory.setByte($scope.value) | |
} | |
}) | |
.controller('bar', function(binFactory,$scope){ | |
$scope.binValue = binFactory; | |
}) | |
.factory('binFactory',function(){ | |
var byte = 'dog'; | |
var service = { | |
byte: byte, | |
getByte: getByte, | |
setByte: setByte | |
} | |
return service; | |
function getByte(){ | |
return this.byte; | |
} | |
function setByte(value){ | |
this.byte = value; | |
} | |
}) | |
.controller('fooFail', function(binFactory,$scope){ | |
$scope.setBin = binFactory.setByte; | |
$scope.value = binFactory.byte; //remeber, binding to object props break the reference and sync won't work anymore | |
}) | |
.controller('barFail', function(binFactory,$scope){ | |
$scope.value = binFactory.byte; | |
$scope.setBin = setBin; | |
function setBin(){ | |
binFactory.setByte($scope.value) | |
} | |
})</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
angular.module('myApp',[]) | |
.controller('foo', function(binFactory,$scope){ | |
$scope.binValue = binFactory; | |
$scope.setBin = setBin; | |
$scope.value = 'foo'; | |
function setBin(){ | |
binFactory.setByte($scope.value) | |
} | |
}) | |
.controller('bar', function(binFactory,$scope){ | |
$scope.binValue = binFactory; | |
}) | |
.factory('binFactory',function(){ | |
var byte = 'dog'; | |
var service = { | |
byte: byte, | |
getByte: getByte, | |
setByte: setByte | |
} | |
return service; | |
function getByte(){ | |
return this.byte; | |
} | |
function setByte(value){ | |
this.byte = value; | |
} | |
}) | |
.controller('fooFail', function(binFactory,$scope){ | |
$scope.setBin = binFactory.setByte; | |
$scope.value = binFactory.byte; //remeber, binding to object props break the reference and sync won't work anymore | |
}) | |
.controller('barFail', function(binFactory,$scope){ | |
$scope.value = binFactory.byte; | |
$scope.setBin = setBin; | |
function setBin(){ | |
binFactory.setByte($scope.value) | |
} | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment