AngularJS 개요
- 이전 페이지 AngularJS 강의
- 다음 페이지 AngularJS 표현식
AngularJS는 JavaScript 프레임워크그것은 <script> 태그를 사용하여 HTML 페이지에 추가할 수 있습니다.
AngularJS는지시HTML 속성을 확장하고 사용합니다표현식데이터를 HTML에 바인딩합니다.
AngularJS는 JavaScript 프레임워크입니다
AngularJS는 JavaScript로 작성된 JavaScript 프레임워크입니다.
AngularJS는 JavaScript 파일로 배포되며 script 태그를 사용하여 웹 페이지에 추가할 수 있습니다:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
AngularJS는 HTML을 확장했습니다.
AngularJS는 ng-지시HTML을 확장했습니다.
ng-app 지시는 AngularJS 애플리케이션을 정의합니다.
ng-model 지시는 HTML 컨트롤(input, select, textarea)의 값을 애플리케이션 데이터에 바인딩합니다.
ng-bind 지시는 애플리케이션 데이터를 HTML 뷰에 바인딩합니다.
AngularJS 예제
<!DOCTYPE html> <html> <script src="https://cdn.staticfile.net/angular.js/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가 AngularJS로 <div> 요소를 설명합니다. 애플리케이션의 "소유자"입니다.
ng-model 지시는 입력 필드의 값을 애플리케이션 변수에 바인딩합니다. name。
ng-bind 지시어는 <p> 요소의 내용을 애플리케이션 변수에 바인딩합니다}} name。
AngularJS 지시
와 같이 AngularJS 지시어는 ng 접두사를 가진 HTML 속성입니다。
ng-init 지시어로 AngularJS 애플리케이션 변수를 초기화합니다。
AngularJS 예제
<div ng-app="" ng-init="firstName='Bill'"> <p>이름은 <span ng-bind="firstName"></span></p> </div>
또는 유효한 HTML을 사용하면 됩니다：
AngularJS 예제
<div data-ng-app="" data-ng-init="firstName='Bill'"> <p>이름은 <span data-ng-bind="firstName"></span></p> </div>
HTML 페이지가 유효하려면 사용할 수 있습니다 data-ng- 쓰지 않고 ng-。
지시어에 대한更多信息는 이 튜토리얼의 후반부에서 알 수 있습니다。
AngularJS 표현식
AngularJS 표현식은 양대括호 내에 쓰입니다：{{ expression }}。
AngularJS는 표현식이 있는 위치에서 데이터를 "출력"합니다：
AngularJS 예제
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>제첫 표현식: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS 표현식은 AngularJS 데이터를 HTML에 바인딩하고, ng-bind 지시어 방식은 동일합니다。
AngularJS 예제
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/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">
이름：<input type="text" ng-model="firstName"><br>
성：<input type="text" ng-model="lastName"><br>
<br>
전체 이름：{{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
</script>
AngularJS 모듈은 애플리케이션을 정의합니다：
AngularJS 모듈
var app = angular.module('myApp', []);
AngularJS 컨트롤러는 애플리케이션을 제어합니다：
AngularJS 컨트롤러
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
이 강의의 후반부에서 모듈과 컨트롤러에 대한 더 많은 정보를 알게 될 것입니다.
- 이전 페이지 AngularJS 강의
- 다음 페이지 AngularJS 표현식
