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>

Try it Yourself »


예제 설명

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>

Try it Yourself »

HTML 대안으로 유효한:

AngularJS 예제

<div data-ng-app="" data-ng-init="firstName='John'">

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>

Try it Yourself »

* 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>

Try it Yourself »


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>

Try it Yourself »

더 많은 표현식을 이 튜토리얼을 진행하면서 배울 수 있습니다.


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>

Try it Yourself »


AngularJS 모듈은 어플리케이션을 정의합니다.

AngularJS 모듈
var app = angular.module('myApp', []);

AngularJS contollers 는 어플리케이션을 컨트롤합니다:

AngularJS Controller

app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});

여러분들은 modules와 controllers 의 더 자세하게 나중에 이 튜토리얼을 진행하며 배울 수 있습니다.