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

ng-repeat 지시어

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.htm

<html>
   <head>
      <title>AngularJS Directives</title>
   </head>
   
   <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 = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

산출

웹 브라우저에서 testAngularJS.htm 파일을 엽니 다 . 이름을 입력하고 결과를 확인하십시오.