AngularJS 기본 튜토리얼에 대한 간략한 소개_AngularJS
- WBOY원래의
- 2016-05-16 15:37:521226검색
AngularJS는 JavaScript 프레임워크입니다. 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 통해 HTML 페이지에 추가할 수 있습니다.
AngularJS는 지시문을 통해 HTML 속성을 확장한 다음 표현식을 통해 데이터를 HTML 요소에 바인딩합니다.
AngularJS는 JavaScript 프레임워크입니다.
AngularJS는 JavaScript 언어로 작성된 클래스 라이브러리인 JavaScript 프레임워크입니다.
AngularJS는 JavaScript 파일로 게시되며 스크립트 태그를 통해 웹페이지에 추가할 수 있습니다.
de85def78bf4e5e73c3b76e0cbf117a2e41766e13484456de30e3c90d0e39b57df15d2bd3a0797a114d79c25e114807b
AngularJS는 HTML을 확장합니다
AngularJS는 일련의 ng-지시문을 통해 HTML을 확장합니다.
ng-app 지시문은 AngularJS 애플리케이션을 정의합니다.
ng-model 지시어는 HTML 컨트롤의 값을 데이터 모델에 바인딩합니다.
ng-bind 지시문은 모델 데이터를 HTML 보기에 바인딩합니다.
<script src="http://cdn.bootcss.com/angular.js/1.3.14/angular.js"></script> <body> <div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> </body>
설명 예:
AngularJS는 페이지가 로드되면 자동으로 실행을 시작합니다.
ng-app 지시어는 AngularJS에 자신이 위치한 dc6dce4a544fdca2df29d5ac0ea9906b 요소가 AngularJS 애플리케이션의 루트 요소임을 알려줍니다.
ng-model 지시문은 입력 태그의 값을 변수 이름에 바인딩합니다.
ng-bind 지시어는 변수 이름의 값을 e388a4556c0f65e1904146cc1a846bee 요소의 innerHTML 속성에 바인딩합니다.
AngularJS 명령
보시다시피 AngularJS 지시문은 ng로 시작하는 HTML 속성 집합입니다.
AngularJS 애플리케이션 변수는 ng-init 지시어를 통해 초기화할 수 있습니다.
<div ng-app="" ng-init="firstName='John'"> <p>The name is <span ng-bind="firstName"></span></p> </div>
동등한 코드:
<div data-ng-app="" data-ng-init="firstName='John'"> <p>The name is <span data-ng-bind="firstName"></span></p> </div>
참고 ng- 대신 접두사 data-ng-를 사용하여 페이지의 HTML이 유효한지 확인할 수 있습니다.
이후 장에서 더 많은 AngularJS 지시문을 배우게 됩니다.
AngularJS 표현식
AngularJS 표현식은 이중 중괄호({{ 표현식 문 }})로 작성됩니다.
AngularJS는 표현식을 계산된 결과로 정확하게 "출력"합니다. 예:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS 표현식은 ng-bind 지시문과 동일한 방식으로 데이터를 HTML에 바인딩합니다.
<!DOCTYPE html>
<html>
<script src="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 컨트롤러는 AngularJS 애플리케이션의 동작을 제어합니다.
ng-app 지시어는 애플리케이션을 지정하는 데 사용되고, ng-controller 지시어는 컨트롤러를 지정하는 데 사용됩니다.
<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 모듈 정의 애플리케이션:
var app = angular.module('myApp', []);
AngularJS控制器控制AngularJS Applications的行为：
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
다음 장에서 모듈과 컨트롤러에 대해 자세히 알아봅니다.