Comment AngularJS implémente le modèle caching_AngularJS

Comment implémenter un cache de modèle dans AngularJS ?

Vous pouvez renvoyer un constructeur dans le fournisseur et concevoir un champ de cache dans le constructeur. Cette approche sera présentée à la fin de cet article.

De manière générale, le modèle doit être attribué à une variable dans Scope.

Certains attribuent directement l'objet à la variable Scope ; certains renvoient un objet dans le Provider puis l'affectent à la variable Scope ; certains renvoient un constructeur dans le Provider puis l'affectent à la variable Scope. Expérimentons-les un par un dans cet article.

Personnalisez d'abord une directive pour modifier la valeur d'une variable de portée en cliquant sur un bouton.

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

■ Attribuer un objet à la variable Scope

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

En 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>

Ci-dessus,

• ● La modification de la valeur d'entrée dans FirstCtrl affecte uniquement l'utilisateur variable dans FirstCtrl et n'affecte pas l'utilisateur variable dans SecondCtrl
• gree Cliquer sur le bouton dans FirstCtrl n'affecte que la variable utilisateur dans FirstCtrl
• ● Changer la valeur de l'entrée dans SecondCtrl affecte uniquement la variable utilisateur dans SecondCtrl et n'affecte pas la variable utilisateur dans FirstCtrl
• gree Cliquer sur le bouton dans SecondCtrl n'affecte que la variable utilisateur dans SecondCtrl

Renvoie un objet dans Provider et l'affecte à la variable Scope

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

En 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>

Ci-dessus,

• ● Changez la valeur de l'entrée dans ThirdCtrl et affectez simultanément les variables utilisateur dans ThirdCtrl et FourthCtrl
• ● Cliquez sur le bouton dans ThirdCtrl pour affecter simultanément les variables utilisateur dans ThirdCtrl et FourthCtrl
• ● Changez la valeur de l'entrée dans FourthCtrl et affectez simultanément les variables utilisateur dans ThirdCtrl et FourthCtrl
• Quantity Cliquez sur le bouton dans FourthCtrl pour affecter simultanément les variables utilisateur dans ThirdCtrl et FourthCtrl

Renvoie un constructeur dans Provider et l'affecte à la variable Scope

 .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返回构造函数，每一次构造，就生成一个实例
 .provider('UserModel', function(){
  this.$get = function(){
   return function(){
    this.data = 'cool';
   }
  }
 })

En 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>

Ci-dessus,

• ● La modification de la valeur d'entrée dans FifthCtrl affecte uniquement l'utilisateur variable dans FifthCtrl et n'affecte pas l'utilisateur variable dans SixthCtrl
  
• gree Cliquer sur le bouton dans FifthCtrl n'affecte que la variable utilisateur dans FifthCtrl
  
• ● Changer la valeur de l'entrée dans SixthCtrl affecte uniquement l'utilisateur variable dans SixthCtrl et n'affecte pas l'utilisateur variable dans FifthCtrl
  
• gree Cliquer sur le bouton dans SixthCtrl n'affecte que la variable utilisateur dans SixthCtrl

Renvoie un constructeur dans Provider avec un champ cache et l'affecte à la variable Scope

 .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返回构造函数，根据id获取，如果第一次就创建一个放缓存字段中，以后从缓存中获取
 .provider('SmartUserModel', function(){
  this.$get = ['$timeout', function($timeout){
   var User = function User(id){
    //先从缓存字段提取
    if(User.cached[id]){
     return User.cached[id];
    }
    this.data = 'cool';
    User.cached[id] = this;
   };
   
   User.cached = {};
   return User;
  }];
 })

En 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>

Ci-dessus,

• ● Changez la valeur de l'entrée dans SeventhCtrl et affectez simultanément les variables utilisateur dans SeventhCtrl et EighthCtrl
• ● Cliquez sur le bouton dans SeventhCtrl pour affecter simultanément les variables utilisateur dans SeventhCtrl et EighthCtrl
• ● Changez la valeur de l'entrée dans EighthCtrl et affectez simultanément les variables utilisateur dans SeventhCtrl et EighthCtrl
• ● Cliquez sur le bouton dans EighthCtrl pour affecter simultanément les variables utilisateur dans SeventhCtrl et EighthCtrl

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.