AngularJS-첫 번째 응용 프로그램

실제 Hello World를 만들기 전에 ! AngularJS를 사용하는 응용 프로그램에서 AngularJS 응용 프로그램의 일부를 살펴 보겠습니다. AngularJS 애플리케이션은 다음 세 가지 중요한 부분으로 구성됩니다.

ng-app −이 지시문은 AngularJS 애플리케이션을 정의하고 HTML에 연결합니다.
ng-model −이 지시문은 AngularJS 애플리케이션 데이터의 값을 HTML 입력 컨트롤에 바인딩합니다.
ng-bind −이 지시문은 AngularJS 애플리케이션 데이터를 HTML 태그에 바인딩합니다.

AngularJS 애플리케이션 생성

1 단계 : 프레임 워크로드

순수한 JavaScript 프레임 워크이므로 <Script> 태그를 사용하여 추가 할 수 있습니다.

<script 
   src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

2 단계 : ng-app 지시문을 사용하여 AngularJS 애플리케이션 정의

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

3 단계 : ng-model 지시문을 사용하여 모델 이름 정의

<p>Enter your Name: <input type = "text" ng-model = "name"></p>

4 단계 : ng-bind 지시문을 사용하여 정의 된 위 모델의 값 바인딩

<p>Hello <span ng-bind = "name"></span>!</p>

AngularJS 애플리케이션 실행

HTML 페이지에서 위에서 언급 한 세 단계를 사용하십시오.

testAngularJS.htm

<html>
   <head>
      <title>AngularJS First Application</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

산출

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

AngularJS가 HTML과 통합되는 방법

ng-app 지시문은 AngularJS 애플리케이션의 시작을 나타냅니다.
ng-model 지시문은 ng-app 지시문이있는 div 내에서 HTML 페이지와 함께 사용할 수있는 name이라는 모델 변수를 생성합니다.
그런 다음 ng-bind는 사용자가 텍스트 상자에 입력을 입력 할 때마다 HTML <span> 태그에 표시되는 이름 모델을 사용합니다.
닫기 </ div> 태그는 AngularJS 애플리케이션의 끝을 나타냅니다.