Angularjs How to implement model caching _ANGULARJS

How do you implement a model cache in ANGULARJS?

You can draw this practice at the end of this article by returning a constructor in provider and designing a cache field in the constructor.

In general, model assigns a value to a variable of scope.

Some directly assign the object to the scope variable, some return an object in the provider to the scope variable, and some return a constructor in the provider and assign the value to the scope variable. One by one experience in this article.

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 user.data to Whaaaat?</button> ',
   link:function (scope, element, Attrs) {
    element.on (' click ', Function () {
     scope.user.data = ' Whaaaat? '
     ) Scope. $apply ();
    })}}
  

Assign a value to a scope variable an object

 . Controller (' Firstctrl ', function () {
  var-i = this;
  First.user = {data: ' cool '};
 Controller (' Secondctrl ', function () {
  var second = this;
  Second.user = {data: ' cool '};
 }

On the 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>

Above

• Changing the value of input in Firstctrl only affects the variable user in Firstctrl and does not affect the variable user in Secondctrl
• Click the button in Firstctrl to affect only the variable user in Firstctrl
• Changing the value of input in the Secondctrl only affects the variable user in Secondctrl, and does not affect the variable user in Firstctrl
• Click the button in Secondctrl to affect only the variable user in Secondctrl

Returns an object in provider and assigns it 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 return object
 . Provider (' User ', function () {this
  . $get = function () {Returns
   {
    data: ' Cool '
   }
  };
 })

On the 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>

Above

• Change the value of input in Thirdctrl, while affecting variable user in Thirdctrl and Fourthctrl
• Click the button in the Thirdctrl and affect the variable user in Thirdctrl and Fourthctrl
• Change the value of input in Fourthctrl, while affecting variable user in Thirdctrl and Fourthctrl
• Click the button in the Fourthctrl and affect the variable user in Thirdctrl and Fourthctrl

Returns a constructor in provider, assigning 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 a constructor that generates an instance each time it is constructed
 . Provider (' Usermodel ', function () {this
  . $get = function () {return
   function () {
    this.data = ' cool ';
   }}}
 )

On the 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>

Above

• Changing the value of input in Fifthctrl only affects the variable user in Fifthctrl and does not affect the variable user in Sixthctrl
  
• Click the button in Fifthctrl to affect only the variable user in Fifthctrl
  
• Changing the value of input in the Sixthctrl only affects the variable user in Sixthctrl, and does not affect the variable user in Fifthctrl
  
• Click the button in Sixthctrl to affect only the variable user in Sixthctrl

Returns a constructor in provider with a cached field, assigned to a 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, which is obtained by ID, if the first time a drop cache field is created and then retrieved from the cache
 . Provider (' Smartusermodel ', function () {this
  . $get = [' $timeout ', function ($timeout) {
   var user = function User (ID) {
    //First extract
    if (User.cached[id]) from the cached field {
     return user.cached[id];
    }
    This.data = ' cool ';
    User.cached[id] = this;
   
   user.cached = {};
   Return User
  }];
 }

On the 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>

Above

• Change the value of input in Seventhctrl, while affecting variable user in Seventhctrl and Eighthctrl
• Click the button in the Seventhctrl and affect the variable user in Seventhctrl and Eighthctrl
• Change the value of input in Eighthctrl, while affecting variable user in Seventhctrl and Eighthctrl
• Click the button in the Eighthctrl and affect the variable user in Seventhctrl and Eighthctrl

The above is the entire content of this article, I hope to help you learn.