2016. 12. 21. 04:28
angular.js 시작! Javascript & HTML & CSS/angular.js2016. 12. 21. 04:28
2016/12/21 앵귤러 공부 다시 시작
http://www.w3schools.com/angular/ 에서 제공되는 튜토리얼을 따라가볼 생각.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
앵귤러는 HTML을 확장한 것이다.
ng-app
AngularJS 애플리케이션
ng-model
HTML의 요소가 가진 값을 애플리케이션의 데이터에 바인딩함
ng-bind
애플리케이션 데이터를 HTML뷰에 바인딩함
즉, ng-model ng-bind
HTML값 ---------> 애플리케이션 데이터 ---------> HTML뷰
대충 이런 식인 것 같다.
아래 코드를 보며 어떻게 바인딩이 되는지 이해해 보자.
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
ng-init ( = data-ng-app으로 대체해도 됨. 테스트해보니 혼용해도 됨)
앵귤러 앱의 변수를 선언함
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
{{expression}}
연산 결과나 처리결과를 화면에 출력함
<p>My first expression: {{ 5 + 5 }}</p>
w3shcools(AngularJS) : http://www.w3schools.com/angular/default.asp
'Javascript & HTML & CSS > angular.js' 카테고리의 다른 글
| Angular.js module controller (0) | 2016.12.21 |
|---|
