AngularJS 지시문: ng-init, ng-app, ng-model 및 ng-repeat
제임스 하트만
AngularJS의 지시문이란 무엇입니까?
A 지령 AngularJS에서는 HTML에 새로운 기능을 제공하는 명령입니다. Angular가 HTML 코드를 살펴볼 때 먼저 페이지에서 지시문을 찾은 다음 그에 따라 HTML 페이지를 구문 분석합니다. 이전 장에서 본 AngularJS 지시문의 간단한 예는 "ng-model 지시문"입니다. 이 지시어는 데이터 모델을 뷰에 바인딩하는 데 사용됩니다.
참고 : 컨트롤러가 없어도 ng-init, ng-repeat 및 ng-model 지시문을 사용하여 HTML 페이지에 기본 각도 코드를 가질 수 있습니다. 이러한 지시문의 논리는 Google에서 제공하는 Angular.js 파일에 있습니다. 컨트롤러는 비즈니스 로직을 허용하는 차세대 각도 프로그래밍 구조이지만, 애플리케이션이 각도 애플리케이션이 되도록 언급한 것처럼 컨트롤러가 반드시 필요한 것은 아닙니다.
AngularJS에서 지시문을 만드는 방법
소개에서 정의했듯이 AngularJS 지시문은 JS의 기능을 확장하는 방법입니다. HTML.
4개의 지시문이 정의되어 있습니다. AngularJS와.
다음은 AngularJS 지시문 목록과 각 지시문을 설명하기 위해 제공된 예제입니다.
AngularJS의 ng-app
이는 Angular.JS 애플리케이션을 초기화하는 데 사용됩니다. HTML 페이지에 이 지시문이 있으면 기본적으로 이 HTML 페이지가angular.js 애플리케이션임을 Angular에 알립니다.
np-app의 예
아래 예는 ng-app 지시어를 사용하는 방법을 보여줍니다. 이 예에서는 일반 HTML 애플리케이션을 AngleJS 애플리케이션으로 만드는 방법을 간단히 보여 드리겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="">
Tutorial Name : {{ "Angular" + "JS"}}
</div>
</body>
</html>
코드 설명 :
- 이 애플리케이션이 angle.js 애플리케이션임을 나타내기 위해 "ng-app" 지시어가 div 태그에 추가되었습니다. ng-app 지시문은 모든 태그에 적용할 수 있으므로 body 태그에도 넣을 수 있습니다.
- 이 애플리케이션을angular.js 애플리케이션으로 정의했으므로 이제angular.js 기능을 사용할 수 있습니다. 우리의 경우 표현식을 사용하여 단순히 2개의 문자열을 연결합니다.
코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.
출력:
출력에는 애플리케이션을 Anglejs 애플리케이션으로 정의했기 때문에 가능했던 표현식의 출력이 명확하게 표시됩니다.
AngularJS의 ng-init
애플리케이션 데이터를 초기화하는 데 사용됩니다. 때로는 애플리케이션에 일부 로컬 데이터가 필요할 수 있습니다. 이는 ng-init 지시문을 사용하여 수행할 수 있습니다.
ng-init의 예
아래 예에서는 ng-init 지시문을 사용하는 방법을 보여줍니다.
이 예에서는 ng-init 지시문을 사용하여 "TutorialName"이라는 변수를 생성하고 해당 변수의 값을 페이지에 표시하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="TutorialName='Angular JS'">
Tutorial Name : {{ TutorialName}}
</div>
</body>
</html>
코드 설명 :
- ng-init 지시문은 "TutorialName"이라는 지역 변수를 정의하기 위해 div 태그에 추가되며 여기에 지정된 값은 "AngularJS"입니다.
- 우리는 ng-init 지시문에 정의된 변수 이름 "TutorialName"의 출력을 표시하기 위해 AngularJs의 표현식을 사용하고 있습니다.
코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.
출력:
출력에서,
- 결과는 "AngularJS"라는 문자열을 포함하는 표현식의 출력을 명확하게 보여줍니다. 이는 ng-init 섹션의 'TutorialName' 변수에 문자열 "AngularJS"가 할당된 결과입니다.
AngularJS의 ng 모델
마지막으로 HTML 컨트롤의 값을 애플리케이션 데이터에 바인딩하는 데 사용되는 ng-model 지시문이 있습니다. 아래 예에서는 ng-model 지시문을 사용하는 방법을 보여줍니다.
ng 모델의 예
이 예에서,
- "수량"과 "가격"이라는 2개의 변수를 생성하겠습니다. 이러한 변수는 2개의 텍스트 입력 컨트롤에 바인딩됩니다.
- 그런 다음 가격과 수량 값을 곱하여 총 금액을 표시하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="quantity=1;price=5">
People : <input type="number" ng-model="quantity">
Registration Price : <input type="number" ng-model="price">
Total : {{quantity * price}}
</div>
</body>
</html>
코드 설명 :
- ng-init 지시문이 div 태그에 추가되어 2개의 지역 변수를 정의합니다. 하나는 "수량"이고 다른 하나는 "가격"입니다.
- 이제 ng-model 지시문을 사용하여 "People"과 "Registration price" 텍스트 상자를 각각 로컬 변수 "quantity"와 "price"에 바인딩합니다.
- 마지막으로, 수량과 가격 변수를 곱한 표현식을 통해 총계를 보여줍니다.
코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.
출력:
- 출력에는 사람 및 등록 가격 값의 곱셈이 명확하게 표시됩니다.
이제 텍스트 상자로 가서 People and Registration 가격 값을 변경하면 총액이 자동으로 변경됩니다.
- 위의 출력은 AngleJs의 데이터 바인딩의 강력한 기능을 보여줍니다. 이는 다음을 사용하여 달성됩니다. ng 모델 지시어.
AngularJS에서 ng-반복
HTML 요소를 반복하는 데 사용됩니다. 아래 예에서는 사용 방법을 보여줍니다. ng-repeat 지시어.
ng-repeat의 예
이 예에서,
- 우리는 배열 변수에 장 이름의 배열을 갖게 될 것입니다.
- 그런 다음 ng-repeat 지시문을 사용하여 배열의 각 요소를 목록 항목으로 표시합니다.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="chapters=['Controllers','Models','Filters']">
<ul>
<li ng-repeat="names in chapters">
{{names}}
</li>
</ul>
</div>
</body>
</html>
코드 설명 :
- ng-init 지시문은 3개의 문자열을 포함하는 배열 변수인 "chapters"라는 변수를 정의하기 위해 div 태그에 추가됩니다.
- ng-repeat 요소는 "names"라는 인라인 변수를 선언하고 장 배열의 각 요소를 통과하여 사용됩니다.
- 마지막으로 로컬 인라인 변수 'names'의 값을 보여줍니다.
코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.
출력:
- 위 출력은 ng-repeat 지시문이 "chapters"라는 배열의 각 값을 가져와 배열의 각 항목에 대해 HTML 목록 항목을 생성했음을 보여줍니다.
요약
- 지시문은 HTML의 기능을 확장하는 데 사용됩니다. Angular는 다음과 같은 내장 지시문을 제공합니다.
- ng-app – 각도 애플리케이션을 초기화하는 데 사용됩니다.
- ng-init – 애플리케이션 변수를 생성하는 데 사용됩니다.
- ng-model - HTML 컨트롤을 애플리케이션 데이터에 바인딩하는 데 사용됩니다.
- ng-repeat – 각도를 사용하여 요소를 반복하는 데 사용됩니다.