오늘은 몰랐으면 내일은 알면 된다

[Angular] AngularJS 튜토리얼 3. 모듈(Modules) 본문

Front/Angular

[Angular] AngularJS 튜토리얼 3. 모듈(Modules)

마스터피쓰 2021. 3. 4. 12:09

모듈은 애플리케이션을 정의하며, 일종의 main 메소드 역할을 한다.

 

어플리케이션의 각기 다른 부분을 부분을 구성하는 컨테이너이며, 컨트롤러의 컨테이너이기도 하다.

컨트롤러는 항상 모듈에 포함된다.

 

[ 모듈 생성 ]

 

: 모듈은 angular.module 함수로 만들 수 있다.

 

<script type="text/javascript">
	var app = angular.module("myApp", []);
</script>

<div ng-app="myApp"></div>

 

myApp 이라는 변수는 Angular가 돌아갈 HTML 요소를 가리킨다.

이러한 모듈에 controller, 디렉티브, 필터 등을 추가할 수 있다.

 

[ 컨트롤러 추가하기 ]

 

: ng-controller 디렉티브를 사용해서 컨트롤러를 추가할 수 있다.

 

<script type="text/javascript">
	var app = angular.module("myApp", []);
	
	app.controller("myCtrl", function($scope) {
		$scope.firstName = "NY";
		$scope.lastName = "KIM";
	});
</script>

<div ng-app="myApp" ng-controller="myCtrl">
	{{firstName + " " + lastName}}
</div>

 

 

[ 디렉티브 추가하기 ]

 

: Angular에는 몇가지의 미리 만들어진 디렉티브들이 있고, 애플리케이션에 기능을 추가하기 위해 사용할 수 있다.

그 외에도 커스텀 디렉티브를 만들어서 사용할 수도 있다.

 

<script type="text/javascript">
	var app = angular.module("myApp", []);

	app.directive("testDirective", function() {
		return {
			template : "custom directive"
		};
	});
</script>
<div ng-app="myApp" test-directive></div>
그런데 - 는 상관없이 인식을 하는 모양이다 왜일까

 

[ 파일로서의 모듈 및 컨트롤러 ]

 

: 모듈과 컨트롤러를 js 파일로 넣는다. 이건 설명보다 코드를 보는게 더 나을 것 같다.

 

<script src="/resources/js/myApp.js"></script>
<script src="/resources/js/myCtrl.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
	{{firstName + " " + lastName}}
</div>
이렇게 파일이 설정되어 있다고 했을 때
var app = angular.module("myApp", []);
myApp.js
app.controller("myCtrl", function($scope) {
	$scope.firstName = "NY";
	$scope.lastName = "KIM";
});
myCtrl.js

 

결과는 script 내에 다 썼을때와 동일하게 동작한다.

 

 

[ 전역함수 관련 ]

 

: JavaScript는 전역함수 사용을 지양하는데, 이유는 다른 script에 덮어씌워지거나 덮어쓸 수가 있기 때문이다.

그러나 AngularJS는 모든 함수를 module 내의 로컬함수로 관리하기 때문에 이러한 문제들을 줄일 수 있다.

 

 

[ 라이브러리 불러오기 ]

 

: HTML 문서 내의 </body> 태그 쪽에 script 소스를 써놓는게 일반적이지만, Angular를 사용할 때는 <head>안에 넣거나 <body> 쪽에 놓는 것이 권장된다.

angular.module이 라이브러리가 load 된 되에 컴파일 될 수 있기 때문이다.

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,=">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
	<div ng-app="myApp" ng-controller="myCtrl">
		{{firstName + " " + lastName}}
	</div>
    
    <script type="text/javascript">
        var app = angular.module("myApp", []);

        app.controller("myCtrl", function($scope) {
            $scope.firstName = "NY";
            $scope.lastName = "KIM";
        });
    </script>
</body>
</html>

 

'Front > Angular' 카테고리의 다른 글

[Angular] AngularJS 튜토리얼 6. 데이터 바인딩(Data Binding)  (0) 2021.03.10
[Angular] AngularJS 튜토리얼 5. 모델(ng-model directive)  (0) 2021.03.09
[Angular] AngularJS 튜토리얼 4. 지시어(Directives)  (0) 2021.03.05
[Angular] AngularJS 튜토리얼 2. 식(Expressions)  (0) 2021.03.02
[Angular] AngularJS 튜토리얼 1. 개요(Intro)  (0) 2021.03.02
'Front/Angular' Related Articles more