How to implement a Model cache in AngularJS?
This practice can be introduced at the end of this article by returning a constructor in the Provider and designing a cache field in the constructor.
Generally speaking, Model needs to be assigned to a variable in Scope.
Some directly assign objects to Scope variables; some return an object in Provider and then assign them to Scope variables; some return a constructor in Provider and then assign them to Scope variables. Let’s experience this article one by one.
First, customize a directive to click the button to change the value of a scope variable.
angular
.module('app',[])
.directive('updater', function(){
reutrn {
scope: {
user: '='
},
template: '<button>Change to whaaaat?</button>',
link: function(scope, element, attrs){
('click', function(){
= 'whaaaat?';
scope.$apply();
})
}
}
■ Assign an object to the Scope variable
.controller('FirstCtrl', function(){
var first = this;
= {data: 'cool'};
})
.controller('SecondCtrl', function(){
var second = this;
= {data: 'cool'};
})
On the page:
<div ng-controller="FirstCtrl">
{{}}
<input ng-model="">
<div updater user="user"></div>
</div>
<div ng-controller="SecondCtrl">
{{}}
<input ng-model="">
<div updater user="user"></div>
</div>
above,
- ● Change the input value in FirstCtrl, only affect the variable user in FirstCtrl, and not the variable user in SecondCtrl.
- ● Click the button in FirstCtrl to only affect the variable user in FirstCtrl
- ● Change the input value in SecondCtrl, only affects the variable user in SecondCtrl, and does not affect the variable user in FirstCtrl.
- ● Click the button in SecondCtrl to only affect the variable user in SecondCtrl
■ Return an object in Provider and assign it to the Scope variable
.controller('ThirdCtrl',['User', function(User){
var third = this;
= User;
}])
.controller('FourthCtrl', ['User',function(User){
var fourth = this;
= User;
}])
//provider returns the object .provider('User', function(){
this.$get = function(){
return {
data: 'cool'
}
};
})
On the page:
<div ng-controller="ThirdCtrl">
{{}}
<input ng-model="">
<div updater user="user"></div>
</div>
<div ng-controller="FourthCtrl">
{{}}
<input ng-model="">
<div updater user="user"></div>
</div>
above,
- ● Change the input value in ThirdCtrl and affect the variable user in ThirdCtrl and FourthCtrl at the same time
- ● Click the button in ThirdCtrl to affect the variable user in ThirdCtrl and FourthCtrl at the same time
- ● Change the input value in FourthCtrl and affect the variable user in ThirdCtrl and FourthCtrl at the same time
- ● Click the button in FourthCtrl to affect the variable user in ThirdCtrl and FourthCtrl at the same time
■ Return a constructor in the Provider, assigning a value to the Scope variable
.controller('FifthCtrl',['UserModel', function(UserModel){
var fifth = this;
= new UserModel();
}])
.controller('SixthCtrl',['UserModel', function(UserModel){
var sixth = this;
= new UserModel();
}])
//provider returns the constructor, and each time it constructs, an instance is generated .provider('UserModel', function(){
this.$get = function(){
return function(){
= 'cool';
}
}
})
On the page:
<div ng-controller="FifthCtrl">
{{}}
<input ng-model="">
<div updater user="user"></div>
</div>
<div ng-controller="SixthCtrl">
{{}}
<input ng-model="">
<div updater user="user"></div>
</div>
above,
- ● Change the input value in FifthCtrl, which only affects the variable user in FifthCtrl, and does not affect the variable user in SixthCtrl.
- ● Click the button in FifthCtrl to only affect the variable user in FifthCtrl
- ● Change the input value in SixthCtrl, which only affects the variable user in SixthCtrl, and does not affect the variable user in FifthCtrl.
- ● Click the button in SixthCtrl to only affect the variable user in SixthCtrl
■ Return a constructor with cache field in Provider, assigning value to Scope variable
.controller('SeventhCtrl',['SmartUserModel', function(SmartUserModel){
var seventh = this;
= new SmartUserModel(1);
}])
.controller('EighthCtrl',['SmartUserModel', function(SmartUserModel){
var eighth = this;
= new SmartUserModel(1);
}])
//Provider returns the constructor, obtain it according to the id. If you create a cache field for the first time, you will get it from the cache later .provider('SmartUserModel', function(){
this.$get = ['$timeout', function($timeout){
var User = function User(id){
//Fetch from the cache field first if([id]){
return [id];
}
= 'cool';
[id] = this;
};
= {};
return User;
}];
})
On the page:
<div ng-controller="SeventhCtrl">
{{}}
<input ng-model="">
<div updater user="user"></div>
</div>
<div ng-controller="EighthCtrl">
{{}}
<input ng-model="">
<div updater user="user"></div>
</div>
above,
- ● Change the input value in SeventhCtrl, and affect the variable user in SeventhCtrl and EighthCtrl at the same time
- ● Click the button in SeventhCtrl to affect the variable user in SeventhCtrl and EighthCtrl at the same time
- ● Change the input value in EighthCtrl and affect the variable user in SeventhCtrl and EighthCtrl at the same time
- ● Click the button in EighthCtrl to affect the variable user in SeventhCtrl and EighthCtrl at the same time
The above is all about this article, I hope it will be helpful to everyone's learning.