AngularJS 소개
AngularJS는 자바스크립트 프레임워크 입니다. <script> 태그를 사용하여 HTML 페이지에 추가할 수 있습니다.
AngularJS는 Directives 를 사용하여 HTML 속성을 확장하고 Expressions 를 사용하여 데이터를 HTML에 바인딩합니다 .
AngularJS는 자바스크립트 프레임워크입니다.
AngularJS는 JavaScript로 작성된 JavaScript 프레임워크입니다.
AngularJS는 JavaScript 파일로 배포되며 스크립트 태그를 사용하여 웹 페이지에 추가할 수 있습니다.
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
AngularJS는 HTML을 확장합니다
AngularJS는 ng-directives로 HTML을 확장합니다 .
ng-app 지시문 은 AngularJS 애플리케이션을 정의합니다.
ng-model 지시문 은 HTML 컨트롤(입력, 선택, 텍스트 영역)의 값을 애플리케이션 데이터에 바인딩합니다.
ng-bind 지시문 은 애플리케이션 데이터를 HTML 보기에 바인딩합니다.
AngularJS 예제
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
설명된 예:
AngularJS는 웹 페이지가 로드되면 자동으로 시작됩니다.
ng-app 지시문 은 <div> 요소가 AngularJS 애플리케이션 의 "소유자"임을 AngularJS에 알려줍니다 .
ng-model 지시문 은 입력 필드의 값을 애플리케이션 변수 name 에 바인딩합니다 .
ng-bind 지시문 은 <p> 요소의 내용을 애플리케이션 변수 name 에 바인딩합니다 .
AngularJS 지시문
이미 보았듯이 AngularJS 지시문은 ng 접두사가 있는 HTML 속성입니다.
ng-init 지시문 은 AngularJS 애플리케이션 변수를 초기화합니다.
AngularJS 예제
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
또는 유효한 HTML을 사용하는 경우:
AngularJS 예제
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
페이지 HTML을 유효하게 만들려면 ng- 대신 data-ng- 를 사용할 수 있습니다 .
이 튜토리얼의 뒷부분에서 지시문에 대해 더 많이 배우게 될 것입니다.
AngularJS 표현식
AngularJS 표현식은 이중 중괄호 ({{ expression }}) 안에 작성됩니다 .
AngularJS는 표현식이 작성된 위치에 정확히 데이터를 "출력"합니다.
AngularJS 예제
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS 표현식은 ng-bind 지시문 과 동일한 방식으로 AngularJS 데이터를 HTML에 바인딩합니다.
AngularJS 예제
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name:
<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
이 튜토리얼의 뒷부분에서 표현식에 대해 자세히 알아볼 것입니다.
AngularJS 애플리케이션
AngularJS 모듈 은 AngularJS 애플리케이션을 정의합니다.
AngularJS 컨트롤러는 AngularJS 애플리케이션을 제어합니다.
ng-app 지시문은 애플리케이션을 정의하고 ng -controller 지시문은 컨트롤러를 정의합니다.
AngularJS 예제
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
AngularJS 모듈은 애플리케이션을 정의합니다.
AngularJS 모듈
var app = angular.module('myApp', []);
AngularJS 컨트롤러는 애플리케이션을 제어합니다.
AngularJS 컨트롤러
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
이 튜토리얼의 뒷부분에서 모듈과 컨트롤러에 대해 자세히 알아볼 것입니다.