AngularJS가 모델 caching_AngularJS를 구현하는 방법

AngularJS에서 모델 캐시를 구현하는 방법은 무엇입니까?

공급자에서 생성자를 반환하고 생성자에서 캐시 필드를 디자인할 수 있습니다. 이 접근 방식은 이 문서의 끝 부분에서 소개됩니다.

일반적으로 모델은 범위의 변수에 할당되어야 합니다.

일부는 개체를 Scope 변수에 직접 할당하고, 일부는 Provider에서 개체를 반환한 다음 이를 Scope 변수에 할당하고, 일부는 Provider에서 생성자를 반환한 다음 이를 Scope 변수에 할당합니다. 이번 글에서 하나씩 경험해 보자.

먼저 버튼을 클릭하여 범위 변수의 값을 변경하는 지시문을 사용자 정의하세요.

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();
    })
   }
  }

■ Scope 변수에 개체 할당

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

페이지 내:

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

위

• ● FirstCtrl의 입력값을 변경하면 FirstCtrl의 user 변수에만 영향을 미치고 SecondCtrl의 user 변수에는 영향이 없습니다.
• ● FirstCtrl에서 버튼을 클릭하면 FirstCtrl의 변수 user에만 영향을 미칩니다.
• ● SecondCtrl의 입력 값을 변경하면 SecondCtrl의 user 변수에만 영향을 미치고 FirstCtrl의 user 변수에는 영향이 없습니다.
• ● SecondCtrl에서 버튼을 클릭하면 SecondCtrl의 변수 user에만 영향을 미칩니다.

■ Provider에 객체를 반환하고 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'
   }
  };
 })

페이지 내:

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

위

• ● ThirdCtrl의 입력 값을 변경하는 동시에 ThirdCtrl 및 FourthCtrl의 사용자 변수에 영향을 줍니다
• ● ThirdCtrl의 버튼을 클릭하면 ThirdCtrl과 FourthCtrl의 변수 사용자가 동시에 영향을 받습니다.
• ● FourthCtrl의 입력값을 변경하는 동시에 ThirdCtrl과 FourthCtrl의 변수 user에 영향을 줍니다
• ● FourthCtrl의 버튼을 클릭하면 ThirdCtrl과 FourthCtrl의 변수 사용자에게 동시에 영향을 줍니다

■ Provider에서 생성자를 반환하고 이를 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';
   }
  }
 })

페이지 내:

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

위

• ● FifthCtrl의 입력 값을 변경하면 FifthCtrl의 user 변수에만 영향을 미치고 SixthCtrl의 user 변수에는 영향이 없습니다
  
• ● FifthCtrl의 버튼을 클릭하면 FifthCtrl의 변수 user에만 영향을 줍니다
  
• ● SixthCtrl의 입력 값을 변경하면 SixthCtrl의 user 변수에만 영향을 미치고 FifthCtrl의 user 변수에는 영향이 없습니다
  
• ● SixthCtrl의 버튼을 클릭하면 SixthCtrl의 변수 사용자에만 영향을 미칩니다.

■ 캐시 필드가 있는 Provider의 생성자를 반환하고 이를 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;
  }];
 })

페이지 내:

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

위

• ● SeventhCtrl의 입력 값을 변경하고 SeventhCtrl 및 EighthCtrl의 사용자 변수에 동시에 영향을 줍니다
• ● SeventhCtrl의 버튼을 클릭하면 SeventhCtrl과 EighthCtrl의 변수 사용자가 동시에 영향을 받습니다.
• ● EighthCtrl의 입력 값을 변경하는 동시에 SeventhCtrl 및 EighthCtrl의 사용자 변수에 영향을 줍니다
• ● EighthCtrl의 버튼을 클릭하면 SeventhCtrl과 EighthCtrl의 변수 사용자가 동시에 영향을 받습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.