블로그 이미지
평범하게 살고 싶은 월급쟁이 기술적인 토론 환영합니다.같이 이야기 하고 싶으시면 부담 말고 연락주세요:이메일-bwcho75골뱅이지메일 닷컴. 조대협


Archive»


 
 

결과적으로 모두 Service를 정의하는 방법의 차이 - 코딩 스타일의 차이? (그렇다면 왜 만들어 놨을까?)


What is service,factory and provider


Difference between service and factory

http://blog.manishchhabra.com/2013/09/angularjs-service-vs-factory-with-example/


서비스를 생성하는 방법이 여러가지가 있는데 (클래스를 객체화 시키는 것 처럼)

Service를 가지고 직접 생성하는 방법이 있고,

아니면 Factory를 생성한후, Factory에서 instance를 받는 방법이 있고

아니면 Constructor에서, 받아서 생성하는 방법이 있고

또는 Provider를 사용하는 방법이 있다.


개념은 잡았는데, 구현 하라면 못하겄네.


아래는 service를 가지고 생성하는 방법

Service를 이용해서 생성하는 방법은 Common 서비스나 재사용 가능한 서비스를 정의 하는데 유리함



var app = angular.module('myApp', []);

     

// Service definition

app.service('testService', function(){

    this.sayHello= function(text){

        return "Service says \"Hello " + text + "\"";

    };        

});

 

// AngularJS Controller that uses the service

function HelloCtrl($scope, testService)

{

    $scope.fromService = testService.sayHello("World");

}


아래는 factory를 가지고 생성하는 방법

이건 class를 리턴해야 하는 경우에 유리함. (별 차이 없어 보이는데?)


var app = angular.module('myApp', []);

 

// Factory

app.factory('testFactory', function(){

    return {

        sayHello: function(text){

            return "Factory says \"Hello " + text + "\"";

        }  

    }               

});

 

// AngularJS Controller that uses the factory

function HelloCtrl($scope, testFactory)

{

    $scope.fromFactory = testFactory.sayHello("World");

}



angularJS를 이용한 REST Client 예제
서버는 http//URL/msg에서 다음과 같은 리턴값을 보냄
HTTP/1.1 200 OK
Content-Type: application/json;charset=utf-8
Content-Length: 57

{
"data":{
"name":"Terry",
"city":"Seoul"
}
}


AngularJS 코드

<!--

reference : http://www.jacopretorius.net/2013/04/using-ngresource-with-angularjs.html

reference : https://github.com/wprl/baucis/blob/master/examples/angular-example-resource.html

There are two ways to implement REST client

first one is using $http. It is more flexible but need more coding.

The other one is $resource. It is more efficient. 

-->

<html ng-app='jsonGetApp'>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.min.js"></script>        

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-resource.js"></script>        

<script type="text/javascript">

var jsonGetApp = angular.module('jsonGetApp',['ngResource']);

jsonGetApp.controller("MsgCtrl",["$resource","$scope","$log",function($resource,$scope,$log){

$scope.$log=$log;

$scope.jsonmsg='';

var msgs = $resource('/msg','',{query:{method:'GET',isArray:false}});

$scope.sendJson = function(){

$log.info('sendJson has been called');

var result = msgs.query();

$log.info(result);

$scope.jsonmsg=result;

}

}]

);

</script>

</head>

<body>

<div ng-controller="MsgCtrl">

<textarea rows="5" style="width: 100%" ng-model="jsonmsg" ></textarea>

<button ng-click="sendJson();">Get JSON</button>

{{jsonmsg}}

</div>

</body>

</html>



Fiddler는 간단하면서도 아주 강력한 웹 디버깅 툴이다. http://fiddler2.com

중간에서 웹서버 프록시 역할을 하면서, 오고 가는 트래픽을 모두 모니터링 및 디버깅할 수 도 있고, 기존에 보냈던 트래픽을 replay해서 다시 보낼 수 도 있다. (WireShark 보다 웹디버깅 측면에서는 오히려 더 편한듯).

여러가지 기능이 있지만,오늘은 Fiddler를 json 웹서버 처럼 사용하는 방법에 대해서 소개하고자 한다.

요즘 들어서, 특히 자바스크립트로 웹 클라이언트를 개발하는 일이 잦아지면서, 클라이언트 개발시 서버가 필요한데, 특히 JSON 서버의 경우에는 별도의 서버를 올리고, 간단하더라도 JSON 서비스를 만들어줘야 하기 때문에, JSON 클라이언트를 만드는 입장에서는 꽤나 번거롭다. 이를 Fiddler를 이용해서 간단하게 해결할 수 있다.


Fiddler의 기능중의 하나가 특정 URL 패턴으로 들어오는 request를 가로채서, 특정 Response를 보내게 만드는 기능이 있다.


바로 AutoResponder라는 기능인데, 위의 그림과 같이 설정할 수 있다.

RuleEditor에서 /jsonproxy 라는 URL로 설정해놓으면, 모든 사이트로 가는 Request에 대해 /jsonproxy라는 URI를 가지면 모두 이 Rule을 적용 받는다. 그리고, 아래에, Response를 선택할 수 있는데, 여기서는 특정 JSON 파일을 만들어서 선택하였다.

sample.json 파일의 내용은 아래와 같다.

HTTP/1.1 200 OK

Content-Type: application/json;charset=utf-8

Content-Length: 57


{

"data":{

"name":"Terry",

"city":"Seoul"

}

}

마지막으로 위의 AutoResponder메뉴에서 "Enable automatic response" 체크 박스를 선택해주면. /jsonproxy로 가는 모든 Request에 대해서, 위의 파일에 저장된 값을 리턴해준다.


AngularJS 개발 환경 준비하기

프로그래밍/JavaScript | 2014.01.12 12:02 | Posted by 조대협



Sublime Text 2 에디터


1. Package installer 설치 방법

메뉴에서 View > Show Console을 선택. Console 창이 열리면 아래와 같은 명령어를 이력


import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')


2. sublime text를 리스타트 한후에


메뉴에서 Tools > Command Palette를 선택한후, 

Package Control : Install Pacakge 를 선택하면

설치할 수 있는 패키지 목록을 찾아준다.


3. 패키지 준비

 AngularJS 패키지와 - https://github.com/angular-ui/AngularJS-sublime-package

 GitHub Tools를 찾아서 설치한다. - https://sublime.wbond.net/packages/Github%20Tools


참고

  • 온라인상에서 간단하게 개발할 수 있는 툴 - http://jsfiddle.net/
  • sublime text와 github 연동하기 - http://unikys.tistory.com/331

웹서버 세팅

View등을 사용하려면 local에서 file://로 접근하면 안되기 때문에, 웹서버가 필요함

- 파이썬 웹서버가 가장 간단함

- python -m SimpleHTTPServer 로 수행하면됨.


디버깅

-Chrome에서 AngularJS 디버깅 플러그인 설치

-메뉴 > 개발도구에서 추적

-주요 문제는 Java Script Console을 보면 에러 메세지들이 나옴.