angularJS Tutorial

<div ng-app="">
   <p>Name: <input type="text" ng-model="name"></p>
   <p ng-bind="name"></p>
</div>

튜토리얼에서 보면 제일 처음에 나오는 것이다.

angularjs는 ng-app=""라는 지시자가 정의된 엘리먼트의 하위 엘리먼트에만 AngularJS application으로써 적용된다.

ng-model이라는 것은 튜토리얼에서 따르자면 AngularJS application의 변수로 name이라는 것을 생성하는 것이다.

ng-bind는 그렇게 생성된 변수를 실시간으로 복사해서 ng-bind 지시자가 적용된 곳에 바인딩 시켜준다.

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

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

</div> 

ng-init은 AngularJS의 변수를 초기화 생성 해주는 지시자이다.

페이지가 로드될 때 ng-bind="firstName"에 john이 바인딩 된다

<div ng-app="" ng-init="name1='my name';name2=' is choon'">

<p>My first expression: {{ 5 + 5 }}</p>
<p>{{ name1 + name2 }}</p>
</div>

jsp의 표현식인 ${}처럼

angularJS에도 표현식이 있다.

물론 ng-app=""지시자가 정의된 엘리먼트 안에서만 동작한다.

대괄호 두번을 {{ }} 사용하면된다. 

예제의 값은 5+5이므로 10이 된다.

angularJS변수도 표현식에서 사용가능하다.

name1과 name2처럼..

<div ng-app="" ng-controller="personController">

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>
 function personController($scope) {
     $scope.firstName = "John";
     $scope.lastName = "Doe";
 }
</script> 

AngularJs는 Controller들에 의해 제어된다

Controller라는 것은 왜그런지는 모르겠으나 JS의 함수와 같다.

ng-controller지시자로 Controller를 정의한다

Controller코드는 페이지가 로드될 때 실행된다.

예제를 보면 ng-gontroller를 통해서 function인 personController함수를 호출해서

ng-model지시자 (AngularJS의 변수를 지칭)에 각각 john과 Doe를 바인딩 시키고 있다.