AngularJS의 지시어 링크 기능
AngularJS에서 지시어와 지시어 링크 기능을 소개하고 예제를 통해 이해합니다.
Angular의 지시문 링크
지시문은 AngularJS가 HTML을 DOM 요소와 그 자식으로 확장하도록 지시하는 DOM 요소 마커입니다.
AngularJS에서 대부분의 지시문은 ng-로 시작합니다. 여기서 ng는 Angular를 나타냅니다. AngularJS에는 많은 기본 제공 지시문이 있으며 애플리케이션에 대한 사용자 지정 지시문을 만들 수도 있습니다.
널리 사용되는 내장 지시문은 ng-app, ng-init, ng-model, ng-bind 등입니다.
지시문 예제를 살펴보기 위해 새 AngularJS 응용 프로그램을 만들어 보겠습니다.
먼저 script 태그를 사용하여 AngularJS 라이브러리를 추가합니다.
# AngularJs
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
이제 ng-app을 사용하여 AngularJS 애플리케이션을 정의합니다.
# AngularJs
<body ng-app="">
...
</body>
그런 다음 ng-model 지시문을 사용하여 모델 이름을 정의하고 div에 모델 값을 표시합니다.
# AngularJs
<input type="text" ng-model="name" />
<div class="Identity-name">
Hello {{name}}, Welcome Back!
</div>
출력:
값을 입력하여 테스트해 보겠습니다.
출력:
Angular의 지시어 링크 기능
이제 AngularJS에서 사용자 지정 지시문을 만드는 방법을 이해하기 위해 예제를 통해 Angular의 지시문 링크 기능에 대해 논의해 보겠습니다.
먼저 AngularJS 라이브러리를 포함하여 index.html에 템플릿을 설정하고 ng-app="my-app"을 사용하여 AngularJS 애플리케이션을 정의합니다. 애플리케이션 내에서 ng-controller="Controller"를 사용하여 작동할 컨트롤러를 설명합니다.
컨트롤러 내부에 사용자 지정 지시문 링크 programming-language가 있는 div를 생성합니다.
index.html의 코드는 다음과 같습니다.
# AngularJs
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Directive Link Function Example by Rana Hasnain Khan</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="my-app">
<div ng-controller="Controller">
<div programming-language></div>
</div>
</body>
</html>
이제 컨트롤러 내부의 script.js에서 해당 언어의 이름과 최신 버전을 제공할 언어 범위를 정의합니다.
# AngularJs
(function(angular) {
'use strict';
angular.module('my-app', [])
.controller('Controller', ['$scope', function($scope) {
$scope.language = {
name: 'Angular Js',
version: '1.8.2'
};
}])
directive link 함수를 사용하여 지시문 programming-language와 함수를 연결합니다. 언어 범위의 값으로 템플릿을 전달합니다.
script.js의 최종 코드는 다음과 같습니다.
# AngularJs
(function(angular) {
'use strict';
angular.module('my-app', [])
.controller('Controller', ['$scope', function($scope) {
$scope.language = {
name: 'Angular Js',
version: '1.8.2'
};
}])
.directive('programmingLanguage', function() {
return {
template: 'Name: {{language.name}} <br> Version: {{language.version}}'
};
});
})(window.angular);
출력:
이런 식으로 내장 지시문을 쉽게 사용하고 템플릿 파일의 값이나 템플릿을 전달하는 데 사용할 수 있는 새로운 사용자 지정 지시문을 만들 수 있습니다.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn