angular js 예제, 강의 정리 (module, controller, service, factory)

운영하는 사람
Front-end
2019. 10. 16. 01:09

인프런의 Start Google Angular.js 앵귤러 과정 강좌를 보고 정리한 내용입니다.
https://www.inflearn.com/course/angular-js#

factory 는 아래 유투브를 참고하였습니다.
https://www.youtube.com/watch?v=UXu9xmSIhRs&list=PLYxzS__5yYQmX2bItSRCqwiQZn5dIL1gt&index=24

angular js 예제, 강의 정리
표현식, module(모듈), controller(컨트롤러), service(서비스), factory(팩토리)

표현식

원하는 곳에 원하는 데이터를 출력하는 구문으로 {{출력값}} 형식으로 사용합니다.

ng-init 에 변수 data1을 만든 후 100 값을 넣었습니다.
{{}} 안에 변수명인 data1 을 넣어 100이 출력되도록 합니다.

여러개의 변수(str, dict, array) 와 값을 ng-init 에 넣어서 출력할 수 있습니다.
참고 : ng-init 이 너무 길어질 경우, controller 를 사용하여 데이터를 제어하는 것이 용이합니다.

module(모듈)

지시자 설정, 함수 정의 등을 할 수 있는 angular js 의 객체형태입니다.
controller, service, factory 등 모듈에 다양한 설정을 할 수 있습니다.

app 이라는 변수에 test_app 이라는 angular 모듈을 선언합니다.
test_app 의 이름으로 선언한 모듈은 div 태그 안에 ng-app="test_app"의 형식으로 설정하였습니다.
test_app 모듈에 요소들(controller, service, 지시자 등)을 설정하면 div 태그 내에서 사용할 수 있습니다.

* 참고 : 지시자
ng-app : Angular js 애플리케이션에 대한 초기 설정
ng-init : 애플리케이션에서 사용할 데이터 설정
ng-model : HTML 에서의 입력 요소(input)들을 컨트롤하기 위한 지시자
ng-repeat : 지정된 태그를 배열에 들어 있는 요소만큼 반복하여 출력한다.

controller(컨트롤러)

컨트롤러는 html 파일의 div 태그 안에서 사용할 멤버 및 데이터들을 통제하기 위해 사용합니다.

모듈을 생성한 app 변수에 app.controller() 형식으로 컨트롤러를 설정할 수 있습니다.
컨트롤러는 div 안에서 사용할 멤버들을 정의합니다.
모듈에 설정한 test_controller를 div 태그 안에 ng-controller 에 적용함으로써, app.controller() 안에서 적용했던 변수들을 사용할 수 있습니다.

컨트롤러에서 함수도 설정할수 있습니다.
값 변경을 클릭 시, input 에 입력한 data1, data2 가 br 태그 앞에 노출되도록 합니다.

service(서비스)

angular js 에서 제공하고 있는 다양한 기능들을 가지고 있는 객체들을 의미합니다.
필요하면 서비스를 만들어서 사용할 수 있습니다.
만든 서비스 객체는 controller 에 추가하여 사용할 수 있습니다.

myService 를 정의 후, controller 에 등록했습니다.

등록한 myService 에 add, subtract 함수가 선언되어 있는데,
해당 함수들을 controller 안에서 myService.add(), myService.subtract() 와 같은 형식으로 사용할 수 있습니다.

참고
$scope 도 서비스 객체의 한 종류입니다.
$location 객체 : 주소 창의 주소를 관리합니다.
$get : ajax 통신을 통해 다른 파일의 응답 결과를 가져옵니다.
$timeout : javascript 의 timeout
$interval : javascript 의 interval