Total: Today: Yesterday:
'연구소/AngularJS'에 해당되는 글 3건
2016.04.20 AngularJS 서비스 상속에 대한 고찰
2016.04.18 auth0 & firebase
2016.04.14 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

연구소/AngularJS | 2016. 4. 18. 00:24 | Posted by 자수씨

새로운 라이브러리나 프레임워크를 공부할 때는 manning 사의 in Action 시리즈를 자주보게 되는데, 이번에도 AngularJS 공부하기 위해 "AngularJS in Action" 을 살펴보고 있는 중입니다.


쭉 살펴보는 도중 외부 서비스를 사용하는 부분이 있었는데, auth0 와 firebase 입니다.



#h3 auth0


이름에서 볼 수 있듯이 auth0 는 인증과 관련된 서비스를 제공해줍니다. 


홈페이지: https://auth0.com




You can easily and quickly connect your apps, choose identity providers, add users, set up rules, customize your login page and access analytics from your Auth0 dashboard. It really is identity made simple for developers.


https://auth0.com/how-it-works - Overview


위의 내용을 간략하게 보면 내가 만든 애플리케이션에서 접속, 인증 프로바이더 선택, 유저 추가 등을 쉽고 빠르게 적용할 수 있게 도와주는 서비스입니다. 애플리케이션에 가장 기본이 되는 사용자 관련 처리에 대해서 고민거리를 줄여줄 수 있는 서비스라 생각됩니다.


최대 액티브 유저 기준 7,000 명까지는 무료이므로 간단한 시스템 만들 때는 활용하는 것도 좋아보입니다.




#h3 Firebase


이름과 아이콘을 봤을 때는 저장소를 제공해주는 서비스로 생각되었습니다.


홈페이지: https://www.firebase.com





Firebase can power your app's backend, including data storage, user authentication, static hosting, and more. Focus on creating extraordinary user experiences. We'll take care of the rest.

- firebase overview


Firebase 는 데이터 저장소, 사용자 인증, 호스팅 등 백엔드 서비스를 주로 제공합니다. 무료 사용자도 1GB 의 저장소를 제공하기 때문에 auth0 과 마찬가지로 장난감 만들 때 요긴하게 사용할 수 있을 것 같습니다.





나름 10여년 개발하면서 장난감을 만들곤 했었는데, 그 때마다 반복적인 작업 & 설정에 귀찮음을 느끼고 그만둔 것들이 많았습니다. 이런 서비스를 활용한다면 손쉽게 장난감을 만들 수 있을 것이라는 알 수 없는 자신감이 넘쳐 흐름을 느낍니다.




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

AngularJS 서비스 상속에 대한 고찰  (0) 2016.04.20
AngularJS 기본 개발 환경 구성하기  (0) 2016.04.14

연구소/AngularJS | 2016. 4. 14. 18:06 | Posted by 자수씨

node.js 와 npm 이 설치된 상태에서 시작합니다.



기본 개발환경 위해 필요한 툴을 설치합니다.


  • yo (Yeoman): 최신 웹 애플리케이션의 뼈대를 잡아주는 툴 - http://yeoman.io/
  • bower: 웹 사이트의 프레임워크, 라이브러리 등을 관리하는 툴 - http://bower.io/
  • grunt-cli: 자바스크립트 태스크 러너 - http://gruntjs.com/
  • generator-angular: 요맨 AngularJS 제너레이터
  • generator-karma: 요맨 AngularJS 테스트 러너 제너레이터

npm install -g yo bower grunt-cli


npm install -g generator-angular generator-karma



요맨을 이용하여 기본 골격을 갖춘 AngularJS 샘플 프로젝트를 생성합니다.


yo angular sample_project


요맨 옵션은 Sass 사용 안함 외에는 기본 구성을 사용했습니다.





생성된 프로젝트가 정상적인지 실행해봅니다.


grunt serve






아래와 같이 페이지가 나오면 정상적으로 설정이 된 상태입니다.





간혹 "grunt serve" 로 서버를 띄우는 중에 오류가 발생하면 아래의 작업을 수행합니다.


npm install


bower install



개발환경이 갖춰졌으므로 테스트 코딩을 하러...



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

AngularJS 서비스 상속에 대한 고찰  (0) 2016.04.20
auth0 & firebase  (0) 2016.04.18