AngularJS 소개
AngularJS는 자바스크립트 프레임워크 입니다. HTML 페이지에 <script> 태그를 사용하여 삽입할 수 있습니다.
AngularJS는 HTML의 속성과 directives, 그리고 Expressions 인 HTML 데이터 바인딩에서 확장된 것 입니다.
AngularJS는 자바스크립트 프레임워크입니다.
AngularJS는 자바스크립트프레임워크입니다. AngularJS의 라이브러리는 자바스크립트로 작성되었습니다.
AngularJS는 자바스크립트 파일로 분산되어있습니다. 그리고 스크립트 태그를 사용하여 웹 페이지에 추가될 수 있습니다.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
HTML에서 확장된 AngularJS
AngularJS 는 HTML 에서 ng-directives 를 확장되었습니다.
ng-app 지시자는 AngularJS 어플리케이션을 정의합니다.
ng-model 지시자는 값을 HTML 컨트롤러(input, select, textarea)에 어플리케이션 데이터를 바인딩합니다.
ng-bind 지시자는 HTML View 단에 어플리케이션 데이터를 바인딩합니다.
AngularJS 예제
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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 지시자는 input 필드에게 어플리케이션의 name 값을 바인딩하는데 사용됩니다.
ng-bind 지시자는 <p> 엘리먼트에 어플리케이션의 name 값을 inerHTML로 바인딩(삽입)하는데 사용됩니다.
AngularJS 지시자
이미 앞에서 보았듯이, AngularJS 지시자는 HTML 속성에 ng 접두사가 붙습니다.
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>* AngularJS Tip
만약 여러분들의 페이지를 HTML에 적절하게끔 만들려면 여러분들은 data-ng- 를 ng-대신 사용할 수 있습니다.
여러분은 더 많은 지시자를 이 튜토리얼을 진행하면서 배울 수 있습니다.
AngularJS 표현식
AngularJS 표현식은 두개의 중괄호 안에 쓰여집니다. : {{ expression }}
AngularJS의 "output" 데이터는 표현식이 쓰여지는곳에 정확히 출력됩니다.
AngularJS 예제
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS 표현식은 AngularJS데이터를 HTML 에 바인딩하는 ng-bind 지시자와 똑같이 사용합니다.
AngularJS 예제
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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 modules는 AngularJS 어플리케이션을 정의합니다.
AngularJS controlls는 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 contollers 는 어플리케이션을 컨트롤합니다:
AngularJS Controller
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
여러분들은 modules와 controllers 의 더 자세하게 나중에 이 튜토리얼을 진행하며 배울 수 있습니다.
'AngularJS > w3schools 번역' 카테고리의 다른 글
| [튜토리얼/번역] AngularJS Modules (AngularJS 모듈) (4) | 2016.03.18 |
|---|---|
| [튜토리얼/번역] AngularJS Expressions (AngularJS 표현식) (4) | 2015.12.10 |
| [튜토리얼/번역] w3schools AngularJS 저작권/About Copyright (3) | 2015.12.10 |
| [튜토리얼/번역] AnularsJS Home (4) | 2015.12.09 |
댓글