각도 서비스에서 기본 클래스 확장하기

Question

각도 범위로 데이터를 가져 오기 위해 서비스에서 확장하고자하는 기본 클래스가 있습니다. 나는 그물 주위에 해결책을 찾았지만, 내가 좋아하는 것을 찾지 못했습니다.

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

내가 여러 가지 각도 서비스에서이 클래스를 확장 할 수 있도록하고 싶습니다 (즉 offlineCart, offlineCustomLists : 나는 장치 클래스 구조

의 파일 시스템에 액세스하는 데 사용되는 기본 클래스를 , 요법 ...) 여기서 각 서비스는 다양한 데이터 유형을 저장하기 위해 스토리지 기반을 사용할 수 있습니다. 나는 각도에서 이것을하는 최선의 가장 적절한 방법을 찾고있다. 바닐라 자바 ​​스크립트에서 다음 중 하나를 수행하면됩니다.

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

하지만 같은 방식으로 각도를 사용하고 싶습니다.

내가 고려 된 접근 방식은 angular.extend 기능을 사용할 수 있습니다,하지만 난이 적절한 경우, 또는이 같은 것이 더 적절한 방법이 될 것입니다 확실하지 않다 : 나는 몇 가지 조언을하고자

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

만약 논문 접근법이 정확하거나 내가 성취하고자하는 목적을 위해 더 나은 접근법이 있다면. 나는 또한 비동기 적이기 때문에이 코드의 많은 부분에서 약속을 사용하기를 원한다.

Answer 1

최근에이 트릭을 제거했습니다.

일반 JavaScript 생성자를 정의하여 시작할 것입니다. 이것은 각도 서비스 일 필요는 없습니다. 내가하는 일은 나중에, 확장 생성자가 매개 변수에 의해 필요한 모든 주입을 전달할 수 있다는 것입니다. 그래서, 이것은 나의 모난 봉사의 기본 "계급"이 될 것입니다. 이것은 모든 각도 서비스가 상속 받기를 원하는 모든 것을 드러내는 곳입니다.

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

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

그럼 프로토 타입 상속을 사용하여 하위 생성자를 정의합니다. 이 생성자는 실제로 각도 서비스입니다 (여러분은 내 마지막으로 $inject을 사용하여 알 수 있습니다).

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']; 

그럼 해당 각 모듈에 일품 요리 à 서비스를 등록 진행 :

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

마지막으로, 나는 단순히 내 서비스를 주입 할 내 컨트롤러에있는이의 인스턴스가 될 것입니다 내 JSFiddle here

를

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

당신은 볼 수 차례 내 ParentService 생성자를 확장 ChildService 생성자,

ngConf의 Youtube에는 재미있는 비디오가 있습니다. Writing A Massive Angular App은 이러한 주제 중 일부와 각도 재사용에 대한 몇 가지 다른 아이디어를 다룹니다.

Answer 2

이 질문은 18 개월 전에 요청되었으며 답변되었습니다. 나는 최근에 프로젝트에서 같은 문제를 겪었다. 공장을 만들 때 사용할 수있는 기본 모델을 정의하고 싶었습니다. Angular에는 값 제공자이라는 보조를 제공하는 매우 간단한 제공자가 있으며 각도는 값 제조법을 사용하여 구현됩니다.

내가 사용하고 있을지도 모르는 Angular의 버전이 확실하지 않지만 AFAIK가 버전 1.3.0으로 되돌아갑니다. 나는 또한 사용하고

(이 글을 쓰는 현재의 안정은 1.4.8이다) 존 레식의 Simple Inheritance Script. http://ejohn.org/blog/simple-javascript-inheritance/

여기 (응용 프로그램 특정 논리의 대부분이 제거 포함) 내 코드의 코드 조각입니다.

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; 

}]) 

누구의 의견도 듣고 싶습니다.

다음은 각도 문서입니다 : 공장은 인스턴스를 반환해야합니다 https://code.angularjs.org/1.3.0/docs/guide/providers