https://angularjs.org/

https://www.w3schools.com/

-AngularJS is a JavaScript Framework

1. ng-app  , ng-model , ng-bind (데이터 바인딩) {{ }}

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <!-- cdn angular connect -->

<div ng-app="">

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

<p ng-bind="name"></p>

</div>

출력 화면

2. 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>-->

3. angular mustache

{{ }} == ng-bind 표기법

<div ng-app="">

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

</div>

<div ng-app="">

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

<p>YOUR NAME: {{name}}</p>

</div>

<div ng-app="" ng-init="myCol='red'">

<input style="background:{{myCol}};" ng-model="myCol" value="{{myCol}}">

</div>

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>

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

<p>The name is {{ firstName + " " + lastName }}</p>

</div>

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

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

</div>

<div ng-app="" ng-init="quantity=1;price=5">

Quantity: <input type="number" ng-model="quantity">

Costs: <input type="number" ng-model="price">

Total in dollar: {{ quantity * price }}

</div>

각 코드 순서대로 출력

4.AngularJS Objects

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is {{ person.lastName }}</p>

</div>

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is <span ng-bind="person.lastName"></span></p>

</div>

5.AngularJS Arrays

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[2] }}</p> <!-- js의 array 호출문과 동일 -->

</div>