Podejście obiektowe z AngularJS

Question

Wygląda na to, że Angular nie zapewnia wbudowanego rozwiązania do definiowania instancji klas za pomocą właściwości i metod oraz że to deweloper powinien je zbudować.

Jaka jest według Ciebie najlepsza praktyka? Jak połączyć to z backendem?

Niektóre ze wskazówek, które zebrałem, używają usług fabrycznych i nazwanych funkcji.

Źródła: Tuto 1 Tuto 2

Dzięki za swoimi spostrzeżeniami

Answer 1

Myślę, że najbliżej struktura do obiektu to chyba factory, z kilku powodów:

podstawowe składnię:

.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 
    } 
    } 
}) 

I wtedy można go używać jak standardowy obiektu:

var obj = new myFactory() 

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

Mam nadzieję, że to pomoże, doskonale wiem, że pierwsze uderzenie z modułami kątowymi może być dość intensywne ...

Answer 2

byłoby użyć kątowy usługi.

Wszystkie usługi kątowe są pojedynczymi i mogą być wstrzykiwane do dowolnego kontrolera.

Najlepiej byłoby zachować tylko wiążące/akcje na html w kontrolerze, a reszta logiki byłaby w twojej usłudze.

Mam nadzieję, że to pomoże.

Answer 3

mam pojęcia, oceniając tę ​​bibliotekę: https://github.com/FacultyCreative/ngActiveResource

Jednak ta biblioteka zakłada ścisłą resztę, więc to nie było dla mnie. Co nie działa na to:

stworzyłem baza modelu

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

niż Wziąłem proste rozszerzenia funkcji "dziedziczy"

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

i teraz ja cam tworzenia moje modele jak ten

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; 

    } 
]); 

Wreszcie, używając go w kontr Oller

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

Teraz jest o wiele bardziej w naszym modelu i rozszerzeń, ale byłoby to główna zasada. Nie twierdzę, że jest to najlepsze podejście, ale pracuję dość dużą aplikacją i to naprawdę działa doskonale dla mnie.

UWAGA: Należy pamiętać, że wpisałem tutaj ten kod i mogą to być błędy, ale główna zasada jest tutaj.

Answer 4

Ponieważ moje pytanie nie odzwierciedla dokładnie problemu, przed którym stanąłem, po prostu opublikuję moje podejście do niego: Jak to ujął Domokun, zasada polega na oddzieleniu przodu i tyłu. Ale ponieważ buduję tylko prototyp i zarządzam obydwoma końcami, chciałbym zachować wszystko w jednym miejscu i pozwolić reszcie aplikacji wykorzystać centralną informację jako usługę.

Co chcę zrobić tutaj jest budowanie formy poprzez NG-repeat zawierający pola modelu i co najważniejsze, jak do wyświetlania informacji w postaci (np „Nazwisko” zamiast „Nazwisko”)

Tak kiedy zacząłem pracować z modelami mangusty, oto co udało mi się zrobić:

Po pierwsze, możliwe jest przekazanie schematu mangusty modelu od strony węzła do strony kątowej za pomocą żądania app.get z następującą odpowiedzią:

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

to wypisuje obiekt zawierający wszystkie pola z kolekcji "zasobów". Na szczycie, że pewne dodatkowe informacje zawarte w modelu tak:

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

mongoose.model('resources', resourceSchema); 

Więc w zasadzie mogę pobrać tę symetrycznie po stronie kątowej i mam wszystko, czego potrzebuję do mapowania pól i wyświetlić je estetycznie. Wygląda na to, że mogę również opisać walidację, ale jeszcze mnie nie ma.

Wszelkie konstruktywne opinie na temat tego podejścia (bez względu na to, czy są poprawne czy całkowicie heretyczne) są mile widziane.