AngularJS는 JavaScript 프레임워크 입니다 . <script> 태그를 사용하여 HTML 페이지에 추가할 수 있습니다.
AngularJS는 Directives 로 HTML 속성을 확장 하고 Expressions 로 데이터를 HTML에 바인딩합니다 .
AngularJS는 JavaScript 프레임워크입니다.
AngularJS는 JavaScript로 작성된 JavaScript 프레임워크입니다.
AngularJS는 JavaScript 파일로 배포되며 스크립트 태그를 사용하여 웹 페이지에 추가할 수 있습니다.
AngularJS는 HTML을 확장합니다
AngularJS는 ng-directives 로 HTML을 확장합니다 .
ng -app 지시문은 AngularJS 애플리케이션을 정의합니다.
ng -model 지시문은 HTML 컨트롤(input, select, textarea)의 값을 애플리케이션 데이터에 바인딩합니다.
ng -bind 지시문은 애플리케이션 데이터를 HTML 보기에 바인딩합니다.
AngularJS 예제
<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 지시문은 AngularJS에게 <div> 요소가 AngularJS 애플리케이션 의 "소유자"임을 알려줍니다 .
ng -model 지시문은 입력 필드의 값을 애플리케이션 변수 name 에 바인딩합니다 .
ng -bind 지시문은 <p> 요소의 내용을 애플리케이션 변수 name 에 바인딩합니다 .
AngularJS 지시어
이미 본 것처럼 AngularJS 지시문은 ng 접두사 가 있는 HTML 속성입니다 .
ng -init 지시어는 AngularJS 애플리케이션 변수를 초기화합니다.
AngularJS 예제
<p>The name is <span ng-bind="firstName"></span></p>
</div>
또는 유효한 HTML:
AngularJS 예제
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
AngularJS 표현식
AngularJS 표현식은 {{ 표현식 }}과 같이 이중 중괄호 안에 작성됩니다 .
AngularJS는 표현식이 작성된 위치에서 정확하게 데이터를 "출력"합니다.
AngularJS 예제
<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 예제
<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 예제
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 모듈
AngularJS 컨트롤러는 애플리케이션을 제어합니다.
AngularJS 컨트롤러
$scope.firstName= "John";
$scope.lastName= "Doe";
});