AngularJS 지시

AngularJS 지시자는 HTML을 확장합니다. ng-프리كس로 시작하는 특수 속성. 다음 지시자를 논의해 보겠습니다–

ng-app −이 지시자는 AngularJS 애플리케이션을 시작합니다.
ng-init −이 지시자는 애플리케이션 데이터를 초기화합니다.
ng-model −이 지시자는 AngularJS에서 사용하는 변수 모델을 정의합니다.
ng-repeat −이 가상 지시자는 집합의 각 항목에 대해 HTML 요소를 반복합니다.

ng-app 지시자

ng-app 지시자는 AngularJS 애플리케이션을 시작합니다. 루트 요소를 정의합니다. AngularJS 애플리케이션을 포함한 웹 페이지를 로드할 때, 그것은 자동으로 애플리케이션을 초기화하거나 구동합니다. 또한 AngularJS 애플리케이션에서 다양한 AngularJS 모듈을 로드하는 데 사용됩니다. 다음 예제에서는 <div> 요소의 ng-app 속성은 기본 AngularJS 애플리케이션을 정의합니다.

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

ng-init 지시자

ng-init 지시자는 AngularJS 애플리케이션 데이터를 초기화합니다. 변수에 값을 할당하는 데 사용됩니다. 다음 예제에서는 국가 그룹을 초기화했습니다. 우리는 JSON 문법으로 국가를 정의합니다/지역의 배열.

<div ng-app = "" ng-init　=　"countries　=　[{locale:'en-US',name:'United　States'},　
　　　{locale:'en-GB',name:'United　Kingdom'},　{locale:'en-FR',name:'France'}]">
　　　...</div>

ng-model 지시자

ng-model 지시자는 AngularJS 애플리케이션에서 사용하는 모델을 정의합니다/변수. 다음 예제에서는 이름이name의 모델.

<div ng-app = "">
　　　...
　　　<p>당신의 이름을 입력하세요: <input type = "text" ng-model　=　"name"></p></div>

ng-repeat 지시자

ng-repeat 지시자는 집합의 각 항목에 대해 HTML 요소를 반복합니다. 다음 예제에서는 국가를 순회합니다/지역 배열。

<div ng-app = "">
　　　...
　　　<p>로케일이 있는 국가 목록:</p>
　　　
　　　<ol>
　　　　　　<li　ng-repeat　=　"country　in　countries">
　　　　　　　　　{{　'Country:　'　+　country.name　+　',　Locale:　'　+　country.locale　}}
　　　　　　</li>
　　　</ol>
</div>

온라인 예제

이 예제에서는 모든 위 지시자의 사용을 보여줍니다。

testAngularJS.htm

예제

<html>
　　　<head>
　　　　　　<title>AngularJS 지시자</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h1>예제 애플리케이션</h1>
　　　　　　
　　　　　　<div ng-app = "" ng-init　=　"countries　=　[{locale:'en-US',name:'United　States'},　
　　　　　　　　　{locale:'en-GB',name:'United　Kingdom'},　{locale:'en-FR',name:'France'}]">　
　　　　　　　　　<p>귀하의 이름을 입력하세요:　<input　type　=　"text"　ng-model　=　"name"></p>
　　　　　　　　　<p>Hello　<span　ng-bind　=　"name"></span>!</p>
　　　　　　　　　<p>지역을 포함한 국가 목록:</p>
　　　　　　
　　　　　　　　　<ol>
　　　　　　　　　　　　<li　ng-repeat　=　"country　in　countries">
　　　　　　　　　　　　　　　{{　'Country:　'　+　country.name　+　',　Locale:　'　+　country.locale　}}
　　　　　　　　　　　　</li>
　　　　　　　　　</ol>
　　　　　　</div>
　　　　　　
　　　　　　<script　src　=　"https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　</body>
</html>

테스트 보기‹/›

AngularJS 표현식 AngularJS 첫 번째 애플리케이션