Mở rộng một lớp cơ sở trong dịch vụ Góc

Question

Tôi có một lớp cơ sở mà tôi muốn mở rộng trong một dịch vụ để giúp lấy dữ liệu vào phạm vi góc. Tôi đã tìm kiếm trên mạng cho một giải pháp, nhưng đã không tìm thấy một mà tôi thích. Tôi có một lớp cơ sở được sử dụng để truy cập vào hệ thống tập tin của thiết bị

cấu trúc lớp:

var cOfflineStorageBase = Class.extend({ 
    init: function(){ 
    }, 
    CreateFolderDir: function(){ 
    }, 
    DeleteAll: function(){ 
    }, 
    DeleteDirectories: function(){ 
    }, 
    DeleteItem: function(){ 
    }, 
    GetFiles: function(){ 
    }, 
    FileExists: function(){ 
    }, 
    GetPath: function(){ 
    }, 
    GetObject: function(){ 
    }, 
    SaveObject: function(){ 
    }, 
}); 

Tôi muốn để có thể mở rộng lớp này trong một số dịch vụ góc khác nhau (ví dụ offlineCart, offlineCustomLists , ect ...) trong đó mỗi dịch vụ sẽ có thể sử dụng cơ sở lưu trữ để lưu trữ các loại dữ liệu khác nhau. Tôi đang tìm cách tốt nhất, phù hợp nhất để làm điều này trong góc cạnh. Trong vani JavaScript, người ta sẽ làm một cái gì đó như thế này:

var newClass = cOfflineStorageBase.extend({ 
    //add new stuff here 
}); 

nhưng tôi muốn làm điều tương tự theo cách góc.

Cách tiếp cận Tôi đã được xem xét là sử dụng chức năng angular.extend, nhưng tôi không chắc chắn này là thích hợp hoặc một cái gì đó như thế này sẽ là một cách tiếp cận phù hợp hơn:

app.factory('someChild', ['$http' , 'cOfflineStorageBase', 
      function($http, cOfflineStorageBase){ 
    var SomeClass = cOfflineStorageBase.extend({ 
    init: function(){ 
     this._super.init() 
    }, 
    //Add more stuff here 
    }); 
    return SomeClass; 
}]); 

Tôi muốn một số lời khuyên nếu cách tiếp cận này là chính xác hoặc nếu có thể có cách khác tốt hơn cho những gì tôi muốn hoàn thành. Tôi cũng muốn hoặc muốn sử dụng những lời hứa trong phần lớn mã này vì nó sẽ không đồng bộ.

Answer 1

Tôi đã loại bỏ mẹo này gần đây.

Tôi sẽ bắt đầu bằng cách xác định một hàm tạo JavaScript đơn giản. Điều này không cần phải là một dịch vụ góc cạnh. Những gì tôi làm là, sau đó, các nhà thầu mở rộng có thể vượt qua bất kỳ tiêm cần thiết bởi tham số. Vì vậy, đây sẽ là "lớp" cơ bản của các dịch vụ góc của tôi. Đây là nơi tôi sẽ phơi bày bất cứ điều gì tôi muốn tất cả các dịch vụ góc cạnh để kế thừa.

function ParentService($http) { 
    this.$http = $http; 
} 

ParentService.prototype.foo = function() { 
    alert("Hello World"); 
}; 

Sau đó, tôi sẽ tiến hành xác định hàm tạo con bằng cách sử dụng thừa kế nguyên mẫu. Nhà xây dựng này thực sự sẽ là một dịch vụ góc cạnh (bạn có thể nói bằng cách sử dụng của tôi là $inject ở cuối).

function ChildService($http) { 
    Parent.call(this, $http); 
} 

ChildService.prototype = new ParentService(); 
ChildService.prototype.baz = function() { 
    return this.$http.get('/sample/rest/call'); 
} 
ChildService.$inject = ['$http']; 

Sau đó, tôi sẽ tiến hành đăng ký các dịch vụ à la carte trong module góc tương ứng:

var app = angular.module('SampleApp', []); 
app.service('child', ChildService); 

Cuối cùng, trong bộ điều khiển của tôi, tôi chỉ đơn giản là sẽ bơm dịch vụ của tôi, đó sẽ là một thể hiện của tôi ChildService constructor, do đó kéo dài constructor ParentService tôi:

app.controller('MainCtrl', ['$scope', 'child', function ($scope, child) { 
    child.foo(); //alert("Hello World") 
    var promise = child.bar(); 
}]); 

Bạn có thể thấy một JSFiddle here

Cũng có một video thú vị trên Youtube từ ngConf gọi là Writing A Massive Angular App bao gồm một số chủ đề này và một vài ý tưởng khác về khả năng tái sử dụng mã với góc cạnh.

Answer 2

Câu hỏi này được hỏi và trả lời, 18 tháng trước. Gần đây tôi đã trải qua cùng một vấn đề về một dự án. Tôi muốn có một Mô hình cơ sở được xác định rằng tôi có thể sử dụng để xây dựng các nhà máy. Angular có một Nhà cung cấp rất đơn giản để hỗ trợ điều này được gọi là Nhà cung cấp Giá trị Giá trị, mà Angular thực hiện bằng cách sử dụng Giá trị Công thức.

Tôi không chắc chắn bạn đang sử dụng phiên bản Angular nào vào thời điểm đó, nhưng ngày này trở lại (AFAIK) lên phiên bản 1.3.0. (Theo văn bản này, ổn định hiện nay là 1.4.8)

Tôi cũng đang sử dụng John Resig của Simple Inheritance Script. http://ejohn.org/blog/simple-javascript-inheritance/

Dưới đây là một đoạn mã của tôi (với hầu hết các logic ứng dụng cụ thể loại bỏ).

var MyApp = angular.module('MyApp',['ngResource','ngAnimate','ngSanitize']); 

/* ==================================================================================== */ 
// - Base Model Class ------------------------------------------------------------- 
/* ==================================================================================== */ 

MyApp 

/** 
* BaseModel - Value Provider 
* 
*/ 
.value('BaseModel',Class.extend({ 

    attribs: {}, 

    init: function(){ 

     var self = this; 

     _active = true; 

     _new = true; 

     _origs = {}; 

     _loadByObject = function(obj){ ... } 
    }, 

    get: function(key){ ... }, 
    set: function(key,val){ ... }, 

    isNew: function(){ ... }, 
    keep: function(){ ... }, 
    remove: function(){ ... }, 

    load: function(obj){ ... } 
    verify: function(){ ... },  
    save: function(){ ... }, 

})) 

.factory('UserFactory', 
    [ '$http', '$q', 'BaseModel', 
    function($http, $q, BaseModel){ 

    var UserFactory = BaseModel.extend({ 

     init: function(){ 

      this._super(false); 

      _fields = [ 
       'first', 'last', 'email', 
       'phone', 'password', 'role' 
      ]; 

      _permitted = [ 
       'first', 'last', 'email', 
       'phone', 'password', 'role' 
      ]; 

      _required = [ 
       'first', 'last', 'email', 'role' 
      ]; 

      _resource = "users"; 

      _api = "users"; 

     } 

    }); 

    return UserFactory; 

}]) 

Tôi cũng muốn nghe phản hồi của bất kỳ ai.

Đây là kiễu góc Documents: https://code.angularjs.org/1.3.0/docs/guide/providers