Angular2 jak oni zapisać w pamięci podręcznej?

głosy
2

Starałem się o 5 min Anuglar2 Tutorial i kiedy to powiedział, że jesteś w stanie używać szablonów zewnętrznych spróbowałem.

Mój komponent wygląda następująco

import {Component, Template, bootstrap} from 'angular2/angular2';

// Annotation section
@Component({
  selector: 'my-app'
})
@Template({
  url: component.html
})
// Component controller
class MyAppComponent {
  constructor() {
    this.name = 'Alice';
  }
}

bootstrap(MyAppComponent);

Miałem błąd w moim szablonu zewnętrznego i naprawił, ale plik HTML nadal buforowane więc nie mogłem efekty w przeglądarce.

Dowiedzieć się, jak oni buforować to patrzyłem na kod na Github

znalazłem to

#angular/modules/angular2/src/core/compiler/template_loader.js

@Injectable()
export class TemplateLoader {
  _xhr: XHR;
  _htmlCache: StringMap;
  _baseUrls: Map<Type, string>;
  _urlCache: Map<Type, string>;
  _urlResolver: UrlResolver;

  constructor(xhr: XHR, urlResolver: UrlResolver) {
    this._xhr = xhr;
    this._urlResolver = urlResolver;
    this._htmlCache = StringMapWrapper.create();
    this._baseUrls = MapWrapper.create();
    this._urlCache = MapWrapper.create();
  }

  // TODO(vicb): union type: return an Element or a Promise<Element>
  load(template: Template) {
    if (isPresent(template.inline)) {
      return DOM.createTemplate(template.inline);
    }

    if (isPresent(template.url)) {
      var url = this.getTemplateUrl(template);
      var promise = StringMapWrapper.get(this._htmlCache, url);

      if (isBlank(promise)) {
        promise = this._xhr.get(url).then(function (html) {
          var template = DOM.createTemplate(html);
          return template;
        });
        StringMapWrapper.set(this._htmlCache, url, promise);
      }

      return promise;
    }

Więc sprawdź StringMapWrapper kątową / moduły / angular2 / src / fasady / collection.es6

i ustawić kod jest po prostu

static set(map, key, value) {
    map[key] = value;
  }

Widziałem, że StringMapWrapper pochodzi z globalnym

export var StringMap = global.Object;

Ale patrząc na kątowe / moduły / angular2 / src / fasady / lang.es6 ja mogę zorientować się, gdzie mapa jest buforowane.

Nie wiem zbyt wiele o procesie buforowania i nadzieję, że ktoś może wyjaśnić jak to robią w tej sprawie.

Utwórz 03/04/2015 o 13:21
źródło użytkownik
W innych językach...                            


2 odpowiedzi

głosy
0

StringMapWrapper.create()Tworzy obiekt dosłowny {}. Wykorzystują one coś takiego StringMapWrapperwsparcia Dart gdzie te prymitywy są tworzone w różny sposób w innym języku. W skrócie wszystko robią to za

var cache = {};
xhr(templateUrl).then(template => {
  cache[templateUrl] = template;
  return template;
})
Odpowiedział 22/09/2015 o 05:37
źródło użytkownik

głosy
0

@ gdi2290 omal nie odpowiedział na to pytanie, a jeśli chcesz zrozumieć więcej o zarządzaniu Cache w JavaScript / maszynopis, proszę zobaczyć mój post tutaj http://www.ravinderpayal.com/blogs/12Jan2017-Ajax-Cache-Mangement-Angular2- Service.html .

Jest to krok po kroku wyjaśnienia klasy zarządzania pamięcią podręczną, która działa jako warstwa AJAX i może być wstrzykiwany do komponentów jak Serwisu. Oto streszczenie kod z klasy: -

 private loadPostCache(link:string){
     if(!this.loading[link]){
               this.loading[link]=true;
               this.links[link].forEach(a=>this.dataObserver[a].next(false));
               this.http.get(link)
                   .map(this.setValue)
                   .catch(this.handleError).subscribe(
                   values => {
                       this.data[link] = values;
                       delete this.loading[link];
                       this.links[link].forEach(a=>this.dataObserver[a].next(false));
                   },
                   error => {
                       delete this.loading[link];
                   }
               );
           }
    }

    private setValue(res: Response) {
        return res.json() || { };
    }

    private handleError (error: Response | any) {
        // In a real world app, we might use a remote logging infrastructure
        let errMsg: string;
        if (error instanceof Response) {
            const body = error.json() || '';
            const err = body.error || JSON.stringify(body);
            errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
        } else {
            errMsg = error.message ? error.message : error.toString();
        }
        console.error(errMsg);
        return Observable.throw(errMsg);
    }

    postCache(link:string): Observable<Object>{

         return Observable.create(observer=> {
             if(this.data.hasOwnProperty(link)){
                 observer.next(this.data[link]);
             }
             else{
                 let _observable=Observable.create(_observer=>{
                     this.counter=this.counter+1;
                     this.dataObserver[this.counter]=_observer;
                     this.links.hasOwnProperty(link)?this.links[link].push(this.counter):(this.links[link]=[this.counter]);
                     _observer.next(false);
                 });
                 this.loadPostCache(link);
                 _observable.subscribe(status=>{
                     if(status){
                         observer.next(this.data[link]);
                     }
                     }
                 );
             }
            });
        }
Odpowiedział 12/01/2017 o 11:57
źródło użytkownik

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more