Visualizzazione di oggetti complessi in AngularJS

Question

Visualizzazione di oggetti complessi in AngularJS

#1 da (0 voti)

2

Quale è secondo te il modo migliore per visualizzare oggetti complessi in AngularJS ?

Hai una sorta di ritorno da un servizio utilizzato in più posti in un'app e potresti dover visualizzare più proprietà, ciascuna con un filtro specifico in ogni luogo.

Con un pensiero rapido, posso nominare 3 diversi modi, ma non sono sicuro che nessuno di essi sia il modo migliore o come implementarli.

Plunker

Oggetto campione (e semplice)

Diciamo che devo mostrare questo oggetto in questo modo: John SMITH ($ 30,00).

{
    firstName: 'John',
    lastName: 'Smith',
    pocket: 30
}

Potrei facilmente andare

{{person.firstName}} {{person.lastName | uppercase}} ({{person.pocket | currency}})

Ma cosa succede se lo ho come attributo da qualche parte, come in ng-option

Stringa lunga

Quindi dovrei farlo

<select ng-options="(p.firstName + ' ' + (p.lastName | uppercase) + ' ' + '\(' + (p.pocket | currency) + '\)') for p in persons" ng-model="person"></select>

È molto lungo e non molto leggibile, se lo stesso tipo di formattazione avviene in altri posti non è molto ASCIUTTO neanche.

Funzione

Potrei andare al percorso della funzione con questo

$scope.formatPerson = function(person) {
    return person.firstName + ' ' + $filter('uppercase')(person.lastName) + ' ' + '\(' + $filter('currency')(person.pocket) + '\)';
}

-

<select ng-options="(formatPerson(p)) for p in persons" ng-model="person"></select>

Lungo, ma nascosto dietro così non tanto come un grosso problema. Ma se sto definendo questo sul controller, di nuovo non è molto SECCO, dove dovrebbe essere una funzione come questa? Nel servizio che fornisce l'oggetto?

Filtro

Questo mi piace di più

app.filter('person', function($filter) {
  return function(person) {
    return person.firstName + ' ' + $filter('uppercase')(person.lastName) + ' ' + '\(' + $filter('currency')(person.pocket) + '\)';
  }
});

Certo, dovrei aggiungere alcune guardie contro cose che non sono oggetti personali, ma i filtri dovrebbero essere usati contro oggetti complessi, sono fatti solo per le primitive. Oggetti più complessi possono portare a rallentamenti in quanto il filtro passa costantemente attraverso la struttura ad albero?

Ci sono altri modi per farlo, o uno di questi modi è il modo migliore e corretto?

design angularjs

posta Ingó Vals 11.12.2015 - 12:36

fonte

1 risposta

Leggi altre domande sui tag design angularjs

Come documentare le transizioni delle schermate della GUI di un'applicazione complessa Come rappresentare gli oggetti dati gradualmente aumentati in una pipeline [chiuso]

score 0 · Answer 1

CacheFactory sarebbe il più facile da usare e più facile da eseguire per il debug:

function sharedCache($cacheFactory)
   {
   var sharedCache = $cacheFactory.get('sharedCache') ? $cacheFactory.get('sharedCache') : $cacheFactory('sharedCache');

   return sharedCache;
   }

function bar(sharedCache)
   {
   var data = {
     firstName: 'John',
     lastName: 'Smith',
     pocket: 30
     };

   sharedCache.put('sharedCache', data);
   }

bar.$inject = ['sharedCache', '$scope'];
sharedCache.$inject = ['$cacheFactory'];

angular.module('foo',[]);
angular.module('foo').constant('sharedCache', sharedCache);
angular.module('foo').run(bar);

I filtri possono leggere i dati e l'output usando ng-include e il templateCache. Ad esempio:

function bop(name)
  {
  var data = baz.data.get('sharedCache');
  var tmpl = '';

  try
     {
     tmpl = tmpl.concat('<h1>',data.firstName, '</h1>');
     baz.tmpl.put(name, tmpl);
     }
  catch(e)
     {
     console.log(e);
     }
  }

function baz($templateCache, sharedCache)
  {
  baz.tmpl = $templateCache;
  baz.data = sharedCache;
  return bop;
  }

baz.$inject=['$templateCache', 'sharedCache'];
angular.module('foo').filter('baz', baz);

Con questo markup:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="foo">
  <div ng-include="'userContent' | baz"></div>
</div>