AngularJS 이해하기
Hello, world 출력
- 먼저 AngularJS로 Hello, world 출력해보자
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Angular JS Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script>
var helloApp = angular.module("app", []);
helloApp.controller("MainCtrl", function($scope) {
$scope.message = "world";
});
</script>
</head>
<body ng-app="app" ng-controller="MainCtrl">
<label>Name :</label><input type="text" ng-model="message" placeholder="Enter your name"/>
<h1>Hello, {{message}}!</h1>
</body>
</html>
위의 코드는 angularJS를 사용하여 Hello, world를 출력한 결과이다.
위의 소스를 브라우저에 실행시킨다면 다음과 같은 화면이 나타날 것이다.
angularJS의 특징중의 하나인 양방향 데이터 바인딩의 특징을 확인하기 위해서
"world"라는 메시지를 실시간으로 변경이 가능하도록 상단에 Input박스를 두었다.
양방향 데이터 바인딩에 대해서는 다음에 대해 알아보도록하고,
우선 소스코드를 다시 보면 낯선 단어가 많이 보인다.
angular.module ?
$scope ?
ng-app ? ng-controller ? ng-model ?
이런 낯선 단어들은 angular에서 사용하는 용어들인데, 이전 포스팅에 주요개념에 포함되었던 내용이다.
이러한 주요개념들이 어떻게 사용되고 있는지 Hello world 예제를 통해 살펴보자.
아래 그림과 같이 HTML에서 지시어와 표현식을 사용하고,
스크립트에서는 module, controller를 생성하고, $scope에 값을 넣는 등의 작업을 하고 있다.
이를 통해 $scope에 있는 message값이 HTML에 보여지는 것이다.
AngularJS 동작 구조
AngularJS의 기본구조를 나타낸 그림으로 AngularJS가 어떻게 로딩되고 시작되는지를 나타내주는 그림으로 순서는 다음과 같다.
1. 브라우저가 html을 로드 (DOM을 파싱한다.)
2. Angular.js를 로드한다
3. DOM Content Loaded Event를 기다린다.
4. DOM이 모두 로드되면 ng-app 지시자를 찾는다.
5 . ng-app에서는 dependency injection 을 위해 사용되는 $injector를 생성한다.
6. injector 지시어는 어플리케이션의 모델을 위한 컨텍스트가 되는 루트 스코프를 생성한다.
7. 최종적으로 ng-app을 기준으로 하위DOM을 컴파일하고 rootScope와 링크시킨다
* 참고
'Dev > Dev:: JavaScript' 카테고리의 다른 글
| [AngularJS 1.x] AngularJS - 04. $scope (0) | 2017.02.22 |
|---|---|
| [AngularJS 1.x] AngularJS - 03. Module (모듈) (0) | 2017.02.21 |
| [AngularJS 1.x] AngularJS - 01. 소개 (0) | 2017.02.21 |
| [TypeScript 타입스크립트] - 유용한 Link (0) | 2016.06.21 |
| [TypeScript 타입스크립트] - 소개 (0) | 2016.06.21 |
