Total: Today: Yesterday:
'상속'에 해당되는 글 1건
2016.04.20 AngularJS 서비스 상속에 대한 고찰
연구소/AngularJS | 2016. 4. 20. 14:39 | Posted by 자수씨

AngularJS 서비스 상속에 대해 여러 글들을 읽어보고 현재 구성된 부분에 적용을 해보아도 생각했던 결과물이 나오지 않았습니다. 그래도 그 중 에서 가장 도움이 많이 되었던 글을 기반으로 서비스 상속 구조를 구현해보았습니다.




#h5 DaoBaseService.js

### js


"use strict";


myApp.factory('DaoBaseService', function($q) {

return function() {

var conn = null;

var client = new MySQL.Client();

client.setSocketImpl(new MySQL.ChromeSocket2());


this.setConnectionInfo = function(connectionInfo) {


conn = connectionInfo;

};


this.login = function() {


var deferred = $q.defer();

client.login(conn.hostname, parseInt(conn.port), conn.username, conn.password, false, function(initialHandshakeRequest, result) {


if (result.isSuccess()) {

deferred.resolve();

} else {

deferred.reject('Login error: ' + result.errorMessage);

}

}, function(errorCode) {


deferred.reject('Error returned from MySQL server: ' + errorCode);

}, function(result) {


deferred.reject('Cannot connect to MySQL server: ' + result);

});


return deferred.promise;

};


this.logout = function() {


client.logout(function(result) {

console.log('logout');

});

},


this.query = function(sql) {


var deferred = $q.defer();

client.query(sql, function(columnDefinitions, resultsetRows) {


deferred.resolve(resultsetRows);

}, function(result) {


deferred.reject('Never called: ' + result);

}, function(result) {


console.error('Server returned error: ' + JSON.stringify(result));

}, function(result) {


console.error('Cannot send query: ' + result);

});


return deferred.promise;

}

};

});


```DaoBaseService``` 는 클래스 형태로 factory 에 등록합니다. 이러한 형태로 만든 이유는 AngularJS 에서 제공해주는 ```$q``` 서비스를 사용할 때 별도로 파라미터로 넘기지 않고 factory 에 등록하면서 사용할 수 있도록 이런 방식으로 구성하였습니다.



#h5 UserDaoService.js

### js


"use strict";


myApp.service('UserDaoService', function(DaoBaseService) {


var daoService = new DaoBaseService;


daoService.findByUserIdx = function(userIdx) {


var sql = 'select * from tbl_user where useridx = ' + userIdx;

return this.query(sql);

};


return daoService;

});


#h5 TaskDaoService.js

### js


"use strict";


myApp.service('TaskDaoService', function(DaoBaseService) {


var daoService = new DaoBaseService;


daoService.findByUserIdx = function(userIdx) {


var sql = 'select * from tbl_task where useridx = ' + userIdx;

return this.query(sql);

};


return daoService;

});

각 DaoService 에서는 ```DaoBaseService``` 의 객체를 생성하고 해당 객체에 각 서비스에 특화된 함수를 정의합니다. 이 객체를 반환하면 해당 객체가 서비스로 등록됩니다.



컨트롤러에서 사용할 경우에는 기존에 서비스 사용하듯이 선언하고 사용하면 됩니다. AngularJS 에서 service 는 싱글턴으로 유지되기 때문에 이와 같은 방식으로도 상속개념을 사용할 수 있는 것 같습니다.


#h5 MainController.js

### js


"use strict";


myApp.controller('MainController', function($scope, UserDaoService, TaskDaoService) {


...

UserDaoService.login().then(function() {

return UserDaoService.findByUserIdx(userIdx);

}).then(function(resultsetRows) {

$scope.userInfo = resultsetRows;

}).catch(function(fault) {

console.error(String(fault));

}).finally(function() {

console.log('cleanup!!');

UserDaoService.logout();

});

...

});



이러한 방법으로도 가능한 것을 공유하기 위해 포스팅합니다~~



#h3 References

http://blog.revolunet.com/blog/2014/02/14/angularjs-services-inheritance/

http://stackoverflow.com/questions/26642174/angularjs-service-inheritance

http://blog.mgechev.com/2013/12/18/inheritance-services-controllers-in-angularjs/

http://mobicon.tistory.com/329

'연구소 > AngularJS' 카테고리의 다른 글

auth0 & firebase  (0) 2016.04.18
AngularJS 기본 개발 환경 구성하기  (0) 2016.04.14