English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

AngularJS 기본 튜토리얼

AngularJS 첫 번째 애플리케이션

실제로 생성하기 전에Hello World이전에！AngularJS를 사용하는 애플리케이션의 각 부분을 보겠습니다. AngularJS 애플리케이션은 다음 세 가지 중요한 부분을 포함합니다-

  • ng-app − 이 지시자는 AngularJS 애플리케이션을 정의하고 HTML에 연결합니다.

  • ng-model − 이 가상 지시자는 AngularJS 애플리케이션 데이터의 값을 HTML 입력 컨트롤에 바인딩합니다.

  • ng-bind − 이 지시자는 AngularJS 애플리케이션 데이터를 HTML 태그에 바인딩합니다.

AngularJS 애플리케이션 생성

단계1：프레임워크 로드

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

<script　
　　　src = "https://cdn.staticfile.org/angular.js/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://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　</body>
</html>
테스트를 보세요‹/›

AngularJS가 HTML과 어떻게 통합되는지

  • ng-app 지시는 AngularJS 애플리케이션의 시작을 나타냅니다。

  • ng-model 지시는 name이라는 모델 변수를 생성하며, 이 변수는 HTML 페이지와 함께 사용되고 ng-app 지시의 div에서 사용됩니다。

  • 그런 다음, 사용자가 텍스트 박스에 입력 내용을 입력할 때마다 ng-bind는 이름 모델을 HTML <span> 태그에 표시합니다。

  • Closing </ div> 태그는 AngularJS 애플리케이션의 끝을 나타냅니다。

AngularJS 지시AngularJS MVC 아키텍처