www.w3schools.com 에서 AngularJS 를 공부하며 정리하는 글이다.
영어로 되어 있지만 쉬운 단어를 사용하고 있기에 크게 공부에 불편함은 없다.
영어가 불편하다면 페이지를 한글로 번역해서 사용해도 거의 95% 이상 이해할 수 있을 정도로 번역이 된다.
AngularJS 외부 교육이 예정되어 있어 그전에 예습차원에서 공부를 하고 있다.
https://www.w3schools.com/angular/angular_intro.asp
AngularJS 는 JavaScript 프레임워크이다.
<script> 태그를 HTML 페이지에 연동할 수 있다.
AngularJS 는 지시어로 HTML 속성들을 확장하고 Expressions 으로 데이터를 HTMl로 바인드 한다.
AngularJS 라이브러리는 JavaScript로 쓰여있다.
AngularJS 는 JavaScript 파일로 분배되고 script 태그로 웹페이지에 추가할 수 있다.
예시
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
AngularJS 는 HTML을 확장한다.
- AngularJS 는 ng-directives 으로 HTML을 확장한다.
- ng-app 지시어는 AngularJS 애플리케이션을 정의한다.
- ng-model 지시어는 HTML controls(input, select, textare)의 값을 애플리케이션 데이터로 바인드한다.
- ng-bind 지시어는 애플리케이션 데이터를 HTML 뷰로 바인드한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <!-- ng-app 정의 --> <div ng-app=""> <p>Input name in the input box:</p> <!-- ng-model 바인드 --> <p>Name: <input type="text" ng-model="name"></p> <!-- ng-bind HTML 뷰 --> <p ng-bind="name"></p> </div> </body> </html> | cs |
예시 설명
AngularJS 는 웹페이지가 로드 될 때 자동으로 시작한다.
- ng-app 지시어는 AngularJS 에게 <div> 요소가 AngularJS 애플리케이션의 소유자임을 알린다.
- ng-model 지시어는 입력 필드의 값을 애플리케이션 변수 이름에 바인드한다.
- ng-bind 지시어는 <p> 요소의 innerHTML을 애플리케이션 변수 이름에 바인딩한다.
'문돌이의 IT > AngularJS' 카테고리의 다른 글
| Angular QuickStart - 환경설정하기 (0) | 2018.06.01 |
|---|---|
| AngularJS 표현식과 애플리케이션에 대해 알아보자 (4) | 2018.05.10 |
| AngularJS 지시어란 무엇인가 (0) | 2018.05.09 |
| AngularJS w3schools 에서 쉽게 배우자 (0) | 2018.05.07 |