/angular/hello.html
[SublimeText]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello_1101.html</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-app>
<p> Hello, {{'Angular'+'Js!'}} </p>
<p> 10 + 10 = <strong>{{10+10}}</strong></p>
<input type="text" ng-model='msg'/>
<p>{{msg}}</p>
</body>
</html>
*주의*팁*
(1) <script src="js/angular.min.js"></script>
- angular.js 를 불러오는 것은 <script src="js/angular.js"></script> 이나,
- 불러들이는 속도를 빠르게 하고 싶다면 압축형태인 <script src="js/angular.min.js"></script> 로 하면 된다.
(2) <body ng-app>
- ng-app 는 angular 가 해당 부분에 관여를 하겠다는 일종의 표시이다.
(ex. <html lang="en" ng-app> html 전체에 angular 관여)
(3) <p> Hello, {{'Angular'+'Js!'}} </p>
- 마우스 우클릭, Open in Browser 해보면 실제로 출력되는 것은 Hello, AngularJs 이다. 즉, angular 가 관여를 하면서 {{ }} 의 부분을 해석해서 결과를 출력함을 알 수 있다.
(4) <input type="text" ng-model='msg'/>
<p>{{msg}}</p>
- ng-model='msg' => input 요소에 지정(입력)한 값을 'msg' 라는 이름의 model 로 지정
- <p>{{msg}}</p> => msg 라는 이름의 model 의 내용을 출력
(5) 여기서는 몇 가지 용어와 그 개념을 알아 두어야 한다.
'model' => 해당 Interface 를 위한 data (어떤 정보, 값/string, number, array, object, ...)
'view' => UI (User Interface, 사용자 인터페이스)
'controller' => UI 지원하고 제어하는 코드
- model -> contorller -> view 순으로 반영되고,
- model <-> view 는 양방향으로 binding 되어 있다(model 에 변화생기면 view 에 바로 반영돼/반대로도ㅇㅇ)
=> angular 의 data-binding 으로 MVVM 프로세스가 용이해짐.
ex.
- 템플릿의 HTML 요소(View)를 클래스의 Model 속성으로 binding 하면, 데이터(model) 가 자동으로 view 에 표시된다.
- 사용자가 값을 변경할 수 있는 경우, 양방향 data-binding 을 지원한다. 즉, view 에서 사용자가 data 에 적용하는 변경 사항으로 -> 클래스의 model 속성이 업데이트 된다.
=>=> c.f. angular => 'MVVM 프레임워크' 라고 하기도 한다.
MVVM 패턴? Model-View-ViewModel
- Model => 구성 요소 클래스와 관련한 특성 데이터 요소
- View => 특정 구성 요소용 HTML 이 포함된 템플릿. 이 템플릿은 페이지나 페이지 일부를 배치, 재사용 할 수 있는 UI 요소를 정의할 수 있다
- ViewModel => 뷰에서 사용자 상호작용에 반응하여 서비스를 호출하여 사용자 항목을 저장하는 코드(ex. 서비스를 호출하여 데이터를 검색하고 요소 숨기기 또는 표시 등)
'angular' 카테고리의 다른 글
| 01_clickEvent.html (0) | 2017.11.03 |
|---|---|
| angularjs 설치/기본설정(snippet) (0) | 2017.11.02 |