Approccio orientato agli oggetti con AngularJS

Question

Sembra che Angular non fornisca una soluzione integrata per definire istanze di classe con proprietà e metodi e che sia compito dello sviluppatore costruirlo.

Qual è la migliore pratica per farlo secondo la tua opinione? Come si collega questo con il back-end?

Alcuni dei suggerimenti che ho raccolto utilizzano i servizi di fabbrica e le funzioni con nome.

Fonti: Tuto 1 Tuto 2

Grazie per le tue intuizioni

Answer 1

Penso che la struttura più vicina ad un oggetto è probabilmente un factory, per diverse ragioni:

Sintassi di base:

.factory('myFactory', function (anInjectable) { 

    // This can be seen as a private function, since cannot 
    // be accessed from outside of the factory 
    var privateFunction = function (data) { 
    // do something 
    return data 
    } 

    // Here you can have some logic that will be run when 
    // you instantiate the factory 
    var somethingUseful = anInjectable.get() 
    var newThing = privateFunction(somethingUseful) 

    // Here starts your public APIs (public methods) 
    return { 
    iAmTrue: function() { 
     return true 
    }, 

    iAmFalse: function() { 
     return false 
    }, 

    iAmConfused: function() { 
     return null 
    } 
    } 
}) 

e quindi è possibile utilizzarlo come un oggetto standard:

var obj = new myFactory() 

// This will of course print 'true' 
console.log(obj.iAmTrue()) 

Spero che questo aiuti, so perfettamente che il primo impatto con i moduli angolari può essere piuttosto intenso ...

Answer 2

Si potrebbe usare un servizio angolare.

Tutti i servizi angolari sono singleton e possono essere iniettati in qualsiasi controller.

Idealmente manterrai solo binding/azioni su html nel tuo controller e il resto della logica sarebbe al tuo servizio.

Spero che questo aiuti.

Answer 3

ho avuto idea valutando questa libreria: https://github.com/FacultyCreative/ngActiveResource

Tuttavia questa libreria assume rigoroso riposo in modo che non era un lavoro per me. Che cosa ha fatto il lavoro per questo:

ho creato di base Modello

var app = angular.module('app', []); 

    app .factory('Model', function(){ 
     var _cache = {}; // holding existing instances 
     function Model() { 
      var _primaryKey = 'ID', 
       _this = this; 

       _this.new = function(data) { 
       // Here is factory for creating instances or 
       // extending existing ones with data provided 
       } 

     } 

     return Model; 
}); 

Than ho preso estensioni delle funzioni semplici "eredita"

Function.prototype.inherits = function (base) { 
     var _constructor; 
     _constructor = this; 
     return _constructor = base.apply(_constructor); 
    }; 

e ora Cam creare i miei modelli come questo

app.factory('Blog', [ 
    'Model', 
    '$http', 
    function(Model, $http) { 
    function Blog() { 
     // my custom properties and computations goes here 
     Object.defineProperty(this, 'MyComputed' , { 
     get: function() { return this.Prop1 + this.Prop2 } 
     }); 
    } 

    // Set blog to inherits model 
    Blog.inherits(Model); 

    // My crud operations 

    Blog.get = function(id) { 
    return $http.get('/some/url', {params: {id:id}}).then(function(response) { 
     return Blog.new(response.data); 
    }); 
    } 

    return Blog; 

    } 
]); 

Infine, utilizzarlo in contr oller

app.controller('MyCtrl', [ 
    '$scope', 'Blog', 
    function($scope, Blog) { 
     Blog.get(...).then(function(blog) { 
     $scope.blog = blog; 
     }); 
    } 
]) 

Ora, c'è molto di più nel nostro Modello e nelle estensioni, ma questo sarebbe un principio fondamentale. Non sto affermando che questo è il miglior approccio, ma sto lavorando app piuttosto grandi e funziona davvero benissimo per me.

NOTA: Si prega di notare che ho digitato questo codice qui e potrebbero essere alcuni errori ma il principio principale è qui.

Answer 4

Come la mia domanda non riflette il problema che stavo affrontando, pubblicherò semplicemente il mio approccio per il gusto di farlo: Come diceva Domokun, la regola empirica è disaccoppiare fronte e retro. Ma poiché sto solo costruendo un prototipo e gestendo entrambi i fini, vorrei mantenere le cose in un solo posto e lasciare che il resto dell'applicazione utilizzi le informazioni centrali come un servizio.

Quello che voglio fare è quello di costruire una forma attraverso ng-repeat contenente i campi del modello e soprattutto come visualizzare le informazioni in forma (ad esempio 'cognome' invece di 'cognome')

Così come ho iniziato a lavorare con i modelli di mangusta ecco cosa sono riuscito a fare:

Innanzitutto, è possibile passare lo schema di mangusta di un modello dal lato del nodo al lato angolare con una richiesta app.get con la seguente risposta:

res.send(mongoose.model('resources').schema.paths); 

sputa fuori un oggetto che contiene tutti i campi della collezione 'risorse'. In cima a che ho inserito alcune informazioni aggiuntive nel modello come questo:

var resourceSchema = new Schema({ 
    _id: { type: Number }, 
    firstname: { type: String, display:'First name' }, 
    lastname: { type: String, display:'Last name' } 
}); 

mongoose.model('resources', resourceSchema); 

Quindi, in pratica posso recuperare questo simmetricamente sul lato angolare e ho tutto quello che ho bisogno di mappare i campi e li mostra bene. Sembra che posso anche descrivere la convalida, ma non ci sono ancora.

Qualsiasi apprezzamento costruttivo su questo approccio (che sia valido o totalmente eretico) è apprezzato.