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

인프런의 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

factory (팩토리)

service 는 싱글턴 패턴으로 객체를 하나만 사용할 수 있습니다.

다양한 형태의 객체를 controller 에서 사용할 수 있도록 하는 요소가 factory 입니다.

factory 를 사용할 때는 this 대신 새롭게 만든 객체를 사용하고 return 합니다.

angularjs 관련 다른 글 ▼

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

angularjs ng-model 이란?

angular js scope와 rootscope 의 차이

angularjs table 예제

from http://minimilab.tistory.com/47 by ccl(A) rewrite - 2020-03-06 05:54:32