How AngularJS implements Model caching

How do you implement an Model cache in AngularJS?

You can do this by returning a constructor in Provider and designing a cache field in the constructor, which we'll introduce at the end of this section.

Generally, Model is assigned to a variable of Scope.

Some assign objects directly to the Scope variable; Some return an object in Provider and assign it to the Scope variable. Some return a constructor in Provider and assign it to the Scope variable. Here's a look at 11.

First, customize 1 directive to click the button to change 1 scope variable value.

angular
 .module('app',[])
 .directive('updater', function(){
  reutrn {
   scope: {
    user: '='
   },
   template: '<button>Change User.data to whaaaat?</button>',
   link: function(scope, element, attrs){
    element.on('click', function(){
     scope.user.data = 'whaaaat?';
     scope.$apply();
    })
   }
  }

■ Assign an object to the Scope variable

 .controller('FirstCtrl', function(){
  var first = this;
  first.user = {data: 'cool'};
 })
 .controller('SecondCtrl', function(){
  var second = this;
  second.user = {data: 'cool'};
 })

Page:

<div ng-controller="FirstCtrl">
 {{user.data}}
 <input ng-model="user.data">
 <div updater user="user"></div>
</div>

<div ng-controller="SecondCtrl">
 {{user.data}}
 <input ng-model="user.data">
 <div updater user="user"></div>
</div>

The above,

● Changing the value of input in FirstCtrl only affects the variable user in FirstCtrl, not user in SecondCtrl ● Clicking the button in FirstCtrl affects only the variable user in FirstCtrl ● Changing the value of input in SecondCtrl only affects the variable user in SecondCtrl, not user in FirstCtrl ● Clicking the button in SecondCtrl only affects the variable user in SecondCtrl

■ Returns 1 object on Provider, assigning to the Scope variable

 .controller('ThirdCtrl',['User', function(User){
  var third = this;
  third.user = User;
 }])
 .controller('FourthCtrl', ['User',function(User){
  var fourth = this;
  fourth.user = User;
 }])
 //provider Returns the object 
 .provider('User', function(){
  this.$get = function(){
   return {
    data: 'cool'
   }
  };
 })

Page:

<div ng-controller="ThirdCtrl">
 {{user.data}}
 <input ng-model="user.data">
 <div updater user="user"></div>
</div>

<div ng-controller="FourthCtrl">
 {{user.data}}
 <input ng-model="user.data">
 <div updater user="user"></div>
</div>

The above,

● Changing the value of input in ThirdCtrl affects the variable user in BOTH ThirdCtrl and FourthCtrl ● Click the button in ThirdCtrl to affect the variable user in BOTH ThirdCtrl and FourthCtrl ● Changing the value of input in FourthCtrl affects the variable user in BOTH ThirdCtrl and FourthCtrl ● Click the button in FourthCtrl to affect the variable user in BOTH ThirdCtrl and FourthCtrl

■ Returns 1 constructor in Provider, assigned to the Scope variable

 .controller('FifthCtrl',['UserModel', function(UserModel){
  var fifth = this;
  fifth.user = new UserModel();
 }])
 .controller('SixthCtrl',['UserModel', function(UserModel){
  var sixth = this;
  sixth.user = new UserModel();
 }])
 //provider Returns the constructor, each 1 The subconstruct, you get alpha 1 An instance 
 .provider('UserModel', function(){
  this.$get = function(){
   return function(){
    this.data = 'cool';
   }
  }
 })

Page:

<div ng-controller="FifthCtrl">
 {{user.data}}
 <input ng-model="user.data">
 <div updater user="user"></div>
</div>

<div ng-controller="SixthCtrl">
 {{user.data}}
 <input ng-model="user.data">
 <div updater user="user"></div>
</div>

The above,

● Changing the value of input in FifthCtrl only affects the variable user in FifthCtrl, not user in SixthCtrl
● Clicking the button in FifthCtrl only affects the variable user in FifthCtrl
● Changing the value of input in SixthCtrl only affects the variable user in SixthCtrl, not the variable user in FifthCtrl
● Clicking the button in SixthCtrl only affects the variable user in SixthCtrl

■ Returns 1 constructor in Provider with a cached field assigned to the Scope variable

 .controller('SeventhCtrl',['SmartUserModel', function(SmartUserModel){
  var seventh = this;
  seventh.user = new SmartUserModel(1);
 }])
 .controller('EighthCtrl',['SmartUserModel', function(SmartUserModel){
  var eighth = this;
  eighth.user = new SmartUserModel(1);
 }])
 //provider Returns the constructor, according to id Get, if the 1 Time is created 1 To be retrieved from the cache at a later time 
 .provider('SmartUserModel', function(){
  this.$get = ['$timeout', function($timeout){
   var User = function User(id){
    // First extract from the cache field 
    if(User.cached[id]){
     return User.cached[id];
    }
    this.data = 'cool';
    User.cached[id] = this;
   };
   
   User.cached = {};
   return User;
  }];
 })

Page:

<div ng-controller="SeventhCtrl">
 {{user.data}}
 <input ng-model="user.data">
 <div updater user="user"></div>
</div>

<div ng-controller="EighthCtrl">
 {{user.data}}
 <input ng-model="user.data">
 <div updater user="user"></div>
</div>

The above,

● Changing the value of input in SeventhCtrl affects the variable user in BOTH SeventhCtrl and EighthCtrl ● Clicking the button in SeventhCtrl affects the variable user in BOTH SeventhCtrl and EighthCtrl ● Changing the value of input in EighthCtrl affects the variable user in BOTH SeventhCtrl and EighthCtrl ● Click the button in EighthCtrl, affecting the variable user in BOTH SeventhCtrl and EighthCtrl

Above is the entire content of this article, I hope to help you with your study.