AngularJS Tutorial #1 Expressions

이 Tutorial은 w3schools의 AngularJS 강좌를 직접 실습해보는 글이다.

Tutorial : www.w3schools.com/angular/default.asp

AngularJS Tutorial

HOME과 Intro는 스킵하고 바로 Expression부터 시작해보려한다.

<div ng-app=""> 
	<p>My first expression: {{5+5}}</p>
</div>

<div> 태그에 np-app 속성을 통해 {{ }} 내부의 코드를 HTML에 출력할 수 있다.

np-app의 속성은 다른 div에 중복될 수 없다.

 

<div ng-app="" ng-init="quantity=1;cost=5">
	<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>

이렇게 <div> 태그에 ng-init으로 변수를 설정하여 출력할 수 있다.

{{}}를 활용하여 출력하거나 ng-bind를 활용하여 출력이 가능하다.

 

ng-init="firstName='John';lastName='Doe'" //String 데이터
ng-init="person={firstName:'John',lastName:'Doe'}" //JSON 데이터
ng-init="points=[1,15,19,2,40]" //Array 데이터

ng-init에는 이렇게 다양한 형태의 데이터가 들어갈 수 있다. 이 모든 데이터는 {{}} 혹은 ng-bind로 출력이 가능하다.