MINIMI LAB

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

운영하는 사람 — Sun, 20 Oct 2019 01:05:30 +0900

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

angularjs table 예제

app.controller 에서 선언한 data1 변수 내의 값을 <tr ng-repeat="obj in data1">로 접근합니다.
ng-repeat 은 for 문으로 생각하면되고, obj.name, obj.age 로 data1 에서 선언한 변수에 접근할 수 있습니다.
<tr> 태그는 테이블의 행을 만드는 html 태그로 <tr> 태그 내에 열을 만드는 <td> 태그에 obj.name, obj.age 데이터를 출력하면서 테이블을 만드는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<title>Insert title here</title>
<script>
	var app = angular.module("test_app", [])
	
	app.controller("controller1", function($scope, $http){
		$scope.data1 = [
							{
								name : "홍길동",
								age : 20
							},
							{
								name : "강길동",
								age : 21
							},
							{
								name : "최길동",
								age : 22
							}
		               ]
		var http = $http.get("data1.html")
		
		http.then(function(response){
			$scope.data2 = response.data
		})
	})
</script>
</head>
<body>

<div ng-app="test_app" ng-controller="controller1">
	<table border="1">
		<tr ng-repeat="obj in data1">
			<td>{{$index + 1}}</td>
			<td ng-if="$odd" style="color:red">{{obj.name}}</td>
			<td ng-if="$even" style="color:black">{{obj.name}}</td>
			<td>{{obj.age}}</td>
		</tr>
	</table>
	<hr/>
	<table border="1">
		<tr ng-repeat="obj in data2">
			<td>{{$index + 1}}</td>
			<td ng-if="$odd" style="color:red">{{obj.name}}</td>
			<td ng-if="$even" style="color:black">{{obj.name}}</td>
			<td>{{obj.age}}</td>
		</tr>
	</table>
</div>

</body>
</html>

angularjs 관련 다른 글 ▼

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

운영하는 사람 — Sun, 20 Oct 2019 00:01:15 +0900

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

angular js scope와 rootscope 의 차이

angularjs scope란?

scope 는 controller를 적용한 태그 내에서 사용할 변수나 함수를 저장해 놓을 수 있는 객체입니다.

angularjs rootscope란?

rootScope 는 문서 전체에서 사용할 변수나 함수를 저장해 놓는 객체입니다.
$rootScope 를 지정한 app.run() 함수는 angularjs module 객체가 생성되면 실행되는 함수입니다.
따라서 app module 객체가 생성되면 문서 전체에서 사용할 수 있는 data1, data2 변수가 생성됩니다.

$rootScope 를 지정한 run 함수는 angularjs module 객체가 생성되면 실행되는 함수입니다.
따라서 app 모듈 객체가 생성되면 data1 = 100, data2 = 200이 할당됩니다.
먼저 선언된 $rootScope 보다 뒤에 선언된 controller의 data1 = 1000 에 따라 최종적으로 data1 에는 1000이 할당됩니다.

controller 에서 data2에는 값을 재할당하지 않았으므로,
$rootScope 에서 설정한 200이 할당되어 있습니다.

controller 를 여러개 만들고, controller 마다 사용하는 data 변수를 다르게 지정해줄 수 있습니다.

angularjs 관련 다른 글 ▼

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

angularjs ng-model 이란?

운영하는 사람 — Sat, 19 Oct 2019 22:10:33 +0900

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

angularjs ng-model 이란?

ng-model 은 input, select, textarea 등의 태그에 ng-model을 지정하여 사용하며,
UI에서 변경된 값을 인지하고, 변경된 값을 가져와 사용할 수 있는 지시어 입니다.
화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시킬 수 있습니다.

ng-model="data1" 로 input 에 지정을 해주었고,
이에 따라 input 에 데이터를 입력하면 {{data1}} 표현식에 입력한 데이터가 출력됩니다.

input 창에 입력한 abcd, 116666 값이 출력되는 것을 확인하실 수 있습니다.

input 에 입력한 값이 숫자이거나 email 형식의 주소가 아닌 경우에,
$error 라는 지시어를 활용하여 어떤 데이터 타입을 입력하였는지 확인할 수 있습니다.
이에 따라 "숫자 입력 오류", "이메일 입력 오류" 라는 메세지를 출력할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<title>Insert title here</title>
<style>
	/* 비여있을 경우 */
	.test_css.ng-empty{
		background-color : aqua;
	}
	/* 입력이 되어 있을 경우 */
	.test_css.ng-not-empty {
		background-color : fuchsia;
	}
	/* 클릭한 적이 있을 경우 */
	.test_css.ng-touched{
		width : 200px;
	}
	/* 클릭하기 전 */
	.test_css.ng-untouched{
		width : 1000px;
	}
	/* 유효한 값이 들어 있을 때 */
	.test_css.ng-valid{
		height:200px;
	}
	/* 유효하지 않은 값이 들어 있을 때 */
	.test_css.ng-invalid{
		height:100px;
	}
	/*최초에 입력된 값과 다른 값이 입력된 경우 */
	.test_css.ng-dirty{
		color : white;
	}
</style>
</head>
<body>

<div ng-app="">
	data1 : <input type="text" ng-model="data1"/><br/>
	data2 : <input type="texT" ng-model="data2"/><br/>
	<hr/>
	data1 : {{data1}}<br/>
	data2 : {{data2}}<br/>
	<hr/>
	<form ng-app="" name="myForm">
		<input type="number" name="number1" ng-model="number1"/><br/>
		<span ng-show="myForm.number1.$error.number">숫자 입력 오류</span><br/>
		
		<input type="email" name="email1" ng-model="email1"/><br/>
		<span ng-show="myForm.email1.$error.email">이메일 입력 오류</span><br/>
		<button type="submit">확인</button>
	</form>
	<hr/>
	<form ng-app="" name="myForm2">
		<input type="email" name="email2" ng-model="email2"/>
	</form>
	<p>vaild(유효한 값일 true) : {{myForm2.email2.$valid}}</p>
	<p>dirty(초기값에서 변경되었을 때 true) : {{myForm2.email2.$dirty}}</p>
	<p>Touched(포커스를 잃었을 경우 true) : {{myForm2.email2.$touched}}</p>
	
	<input type="email" name="email3" class="test_css" ng-model="email3"/>
</div>

</body>

</html>

angularjs 관련 다른 글 ▼

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

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

운영하는 사람 — Wed, 16 Oct 2019 01:09:46 +0900

인프런의 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 관련 다른 글 ▼