www.w3schools.com 에서 AngularJS 를 공부하며 정리하는 글이다.
영어로 되어 있지만 쉬운 단어를 사용하고 있기에 크게 공부에 불편함은 없다.
영어가 불편하다면 페이지를 한글로 번역해서 사용해도 거의 95% 이상 이해할 수 있을 정도로 번역이 된다.
AngularJS 외부 교육이 예정되어 있어 그전에 예습차원에서 공부를 하고 있다.
AngularJS 표현식
- AngularJS 표현식은 두쌍의 중괄호를 사용한다 : {{ expression }}
- AngularJS 표현식이 쓰여진 곳의 데이터를 정확히 출력한다.
ex)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div data-ng-app=""> <p>My first expression: {{ (1 + 2) * 2 }}</p> </div> </body> </html> | cs |
AngularJS 애플리케이션
- AngularJS 모듈은 AngularJS 애플리케이션을 정의한다.
- AngularJS 컨트롤러는 AngularJS 애플리케이션을 제어한다.
이를 위해 각각 ng-app 과 ng-controller 를 사용한다.
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <p>combine info</p> <div data-ng-app="myApp" data-ng-controller="myCtrl"> name : <input type="text" data-ng-model="name"><br> mobile number: <input type="text" data-ng-model="mobile"><br> <br> name & mobile: {{name + " " + mobile}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name="twice"; $scope.mobile="01012341234"; }); </script> </body> </html> | cs |
다음 포스팅에서는 표현식에 대해 더 자세히 설명할 예정이다.
'문돌이의 IT > AngularJS' 카테고리의 다른 글
| Angular QuickStart - 환경설정하기 (0) | 2018.06.01 |
|---|---|
| AngularJS 지시어란 무엇인가 (0) | 2018.05.09 |
| AngularJS 란 무엇인가 (0) | 2018.05.08 |
| AngularJS w3schools 에서 쉽게 배우자 (0) | 2018.05.07 |