AngularJS implements Model caching _ AngularJS

This article mainly introduces how AngularJS implements Model caching and shares a variety of AngularJS methods for implementing Model caching, interested friends can refer to how to implement a Model cache in AngularJS?

You can return a constructor in the Provider and design a cache field in the constructor. This approach will be introduced at the end of this article.

Generally, the Model must assign a value to a variable in the Scope.

Some directly assign the object to the Scope variable; some return an object in the Provider and then assign the value to the Scope variable; some return a constructor in the Provider and assign the value to the Scope variable. This article provides a one-to-one experience.

First, define a direve ve to click the button to change the value of a scope variable.

angular .module('app',[]) .directive('updater', function(){  reutrn {   scope: {    user: '='   },   template: 'Change User.data to whaaaat?',   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:

 {{user.data}}  
 {{user.data}}  

Above,

• ● Changing the input value in FirstCtrl only affects the user variable in FirstCtrl and does not affect the user variable in SecondCtrl
• ● Click the button in FirstCtrl to only affect the user variable in FirstCtrl
• ● Changing the input value in SecondCtrl only affects the user variable in SecondCtrl and does not affect the user variable in FirstCtrl
• ● Click the button in SecondCtrl to only affect the variable user in SecondCtrl

■ Return an object in the Provider and assign the value 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 an object. provider ('user', function () {this. $ get = function () {return {data: 'cool '}};})

Page:

 {{user.data}}  
 {{user.data}}  

Above,

• ● Changing the input value in ThirdCtrl affects the variables user in ThirdCtrl and FourthCtrl.
• ● Click the button in ThirdCtrl to affect the user variables in ThirdCtrl and FourthCtrl.
• ● Change the input value in FourthCtrl, and affect the user variables in ThirdCtrl and FourthCtrl.
• ● Click the button in FourthCtrl to affect the user variables in ThirdCtrl and FourthCtrl.

■ Return a constructor in the Provider and assign it to the Scope variable.

. Controller ('{thctrl ', ['usermodel', function (UserModel) {var th = this; th. user = new UserModel () ;}]). controller ('sixthctrl ', ['usermodel', function (UserModel) {var sixth = this; sixth. user = new UserModel () ;}]) // provider returns the constructor. An instance is generated for each constructor. provider ('usermodel', function () {this. $ get = function () {return function () {this. data = 'cool ';}}})

Page:

 {{user.data}}  
 {{user.data}}  

Above,

• ● Changing the input value in FifthCtrl only affects the user variable in FifthCtrl and does not affect the user variable in SixthCtrl
  
• ● Click the button in FifthCtrl to only affect the variable user in FifthCtrl
  
• ● Changing the input value in SixthCtrl only affects the user variable in SixthCtrl and does not affect the user variable in FifthCtrl
  
• ● Click the button in SixthCtrl to only affect the variable user in SixthCtrl

■ Return a constructor in the Provider with a cache field and assign the value to the Scope variable.

. Controller ('seventhctrl ', ['smartusermodel', function (SmartUserModel) {var seventh = this; seventh. user = new SmartUserModel (1) ;}]). controller ('hhthctrl ', ['smartusermodel', function (SmartUserModel) {var eighth = this; eighth. user = new SmartUserModel (1) ;}]) // provider returns the constructor, which is obtained based on the id. If you create a cache field for the first time and obtain it from the cache. provider ('smartusermodel', function () {this. $ get = ['$ timeout', function ($ timeout) {var User = function User (id) {// extract if (User. cached [id]) {return User. cached [id];} this. data = 'cool '; User. cached [id] = this;}; User. cached = {}; return User ;}] ;})

Page:

 {{user.data}}  
 {{user.data}}  

Above,

• ● Changing the input value in SeventhCtrl affects the variables user in SeventhCtrl and EighthCtrl.
• ● Click the button in SeventhCtrl to affect the variable user in SeventhCtrl and EighthCtrl.
• ● Change the input value in EighthCtrl, and affect the variables user in SeventhCtrl and EighthCtrl.
• ● Click the button in EighthCtrl to affect the variable user in SeventhCtrl and EighthCtrl.

The above is all the content of this article, hoping to help you learn.