반응형
[Angular] Angular 1.0 시작하기
1.
HelloAngular 프로젝트 생성하기
2.
https://angularjs.org/ 접속해서 DOWNLOAD ANGULARS 하기
- 1.2.x (legacy) , zip
3.
WEB-Content 에 js 폴더 만든 후 javascript 파일만 넣는다.
4.
- {{ }} 는 해석되어서 표현된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>hello.html</title> <!-- angular js 로딩하기 --> <script src="js/angular.js"></script> </head> <body ng-app> <h3>Hello Angular js</h3> <p>10 + 10 = <strong>{{10+10}}</strong></p> </body> </html> | cs |
5.
- input 창에 ng-model="msg" , 값을 입력
- {{msg}}가 값을 읽어서 출력한다.
1 2 3 4 5 | <input type="text" ng-model="msg"/> <p>{{msg}}</p> <input type="checkbox" ng-model="isChecked"/> <p>{{isChecked}}</p> <div class="box" ng-show="isChecked"></div> | cs |
6.
-11 : 내부 수식 계산도 가능하다 : count=count+1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8"> <title>Step01_click.html</title> <script src="js/angular.js"></script> </head> <body ng-init="count=0"> <!-- 값을 초기화 할 때 --> <button ng-click="msg='clicked'">눌러보셈</button> <p>{{msg}}</p> <button ng-click="count=count+1">여러번 눌러보셈</button> <p><strong>{{count}}</strong>번 클릭했네?</p> </body> </html> | cs |
반응형
'WEB기초 > Angular' 카테고리의 다른 글
| [Angular] Controller (0) | 2017.08.25 |
|---|
댓글