[AngularJS] 5. Factory를 이용한 동적 웹 페이지 구현 예제

Factory?

앵귤러JS 에서 Factory는 모듈에서 사용되는 서비스를 팩토리 형태로 등록하는 것을 말한다.

Factory를 이용하여 관련 기능을 하나로 묶고 그걸 이용하여 동적 웹페이지를 구현할 수 있다.

 

AngularJS에서 서비스를 등록하는 방법에는 provider, factory, service가 있는데

이 세 종류의 차이점은 아래 블로그에 잘 설명되어 있다.

https://blog.naver.com/PostView.naver?blogId=jjoommnn&logNo=130180336800&redirect=Dlog&widgetTypeCall=true&directAccess=false 

AngularJS의 provider, factory, service의 차이점

---

 

위 예제 코드는 Factory를 이용하여 서비스를 만들고 그 안에 기능들을 정의한 후, 뷰에서 서비스의 기능을 호출하면

testStr 값이 변경되는 코드이다.

---

14LINE

먼저 testFactory에 등록된 showMsg메소드를 파라미터를 넘겨 호출하여 testStr 초기 값을 초기화해줬다.

---

16LINE

testFactory에 등록된 showMsg 함수는 넘겨받은 파라미터를 그대로 리턴하는 함수 이기 때문에

뷰 단의 talk 버튼을 누르면 컨트롤러의 16LINE 함수가 호출되어 testStr 값이 변경이 된다.

---

19LINE

뷰 단의 goodBye버튼을 누르면 호출이 되는 함수로 컨트롤러의 $scope.name 은 초기값이 비어있지만 뷰 단의

인풋 태그로 인해 컨트롤러의 $scope.name 과 양방향 데이터 바인딩을 하고 있기 때문에 인풋 태그에 값을 입력하고 goodBye함수를 호출하면 $scope.name을 파라미터로 넘겨 조건문을 거치고 원하는 결과를 얻을 수 있다.

---

RESULT

초기화면

talk버튼 클릭 시

이름 입력 후 goodBye 버튼 클릭 시