AngularJS_AngularJS에서 몇 가지 일반적인 지침을 구성합니다.-JS 튜토리얼-php.cn

AngularJS_AngularJS에서 몇 가지 일반적인 지침을 구성합니다.

WBOY

풀어 주다： 2016-05-16 15:54:42

원래의

1269명이 탐색했습니다.

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>Enter your Name: <input type="text" ng-model="name"></p>
</div>

로그인 후 복사

ng-반복 지시어

ng-repeat 지시어는 html 요소 모음의 각 항목을 반복합니다. 아래 예에서는 국가 배열을 반복했습니다.

<div ng-app="">
...
  <p>List of Countries with locale:</p>
  <ol>
   <li ng-repeat="country in countries">
     {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
   </li>
  </ol>
</div>

로그인 후 복사

예

다음 예에서는 위의 모든 명령을 보여줍니다.
testAngularJS.html

<html>
<title>AngularJS Directives</title>
<body>
<h1>Sample Application</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>Enter your Name: <input type="text" ng-model="name"></p>
  <p>Hello <span ng-bind="name"></span>!</p>
  <p>List of Countries with locale:</p>
  <ol>
   <li ng-repeat="country in countries">
     {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
   </li>
  </ol>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

로그인 후 복사

출력

웹 브라우저에서 textAngularJS.html을 엽니다. 이름을 입력하고 아래 결과를 확인하세요.

2015616115415280.png (613×372)