Rianshin

Angular 개념잡기 본문

Develop/Front-End

Angular 개념잡기

RianShin 2020. 11. 2. 10:51
728x90
반응형
SMALL

Hello AngularJS

AngularJS의 시작하기전에 Hello AngularJs를 출력하는 소스를 보자.

 

[Other HTML]

<!DOCTYPE html>
<html>
<body>
<p>hello	world</p>
</div>
</body>
</html>

[AngularJS]

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<body>
    <div ng-app="" ng-init="greeting='Hello	World'">
        <p>{{greeting}}</p>
    </div>
</body>

</html>

[AngularJS MVC]

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<body>
    <div ng-app="myApp" ng-controller="greeting">{{greeting}}</div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('greeting', function($scope) {
            $scope.greeting = "Hello	World";
        });
    </script>
</body>

</html>

AngularJS 기본 개념

AngularJS를 쉽게 이해하기 위해서 알아두어야 할 기본 개념으로 다음과 같이 5가지를 선정하였고 간단하게 설명하겠다.

1. Scope(AngularJS 2.0 update시 삭제 예정)

- Scope는 모델 변경을 감지하고 표현하기위한 책임을 갖는다.

- Scope는 DOM 구조와 가깝게 하이어라키 구조를 갖는다(하이어라키 구조는 아래의 그림을 참고^^;)

<!doctype html>
<html ng-app>

<head>
    <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
    <script src="script.js"></script>
</head>

<body>
    <div ng-controller="GreetCtrl">
        Hello {{name}}!
    </div>
    <div ng-controller="ListCtrl">
        <ol>
            <li ng-repeat="name	in	names">{{name}}</li>
        </ol>
    </div>
</body>

</html>

해당 소스에 대해서 이런 구조이다.

2. Model

- 모델은 화면 템플릿에 합쳐지는 데이터를 가지고 있는 일반 자바스크립트 객체이다. (데이터라고 생각하면 된다.)

- Scope는 항상 모델을 참조하고 있다.

3. View

- 템플릿 스트링과 모델을 합쳐서 HTML을 만들고 DOM으로 해석되어 Browser에 표현된다.

- Angular는 템플릿이 HTML이어서 바로 DOM으로 해석되고 DOM안에 directive가 템플릿 엔진인 $compile지시어를 통해 $watch를 설정하고 모 델의 변경을 계속 감시하게 된다.

- View는 템플릿으로 Scope의 투영체이고, Scope는 Model과 View의 연결하며 controller로 이벤트를 보내는 역할을 한다.

 

4. Controller

- Controller는 View뒤에서 반드시 수행하는 코드이다.

- Controller 역할은 모델을 생성하고 콜백 메소드를 가지고 View로 퍼블리싱을 담당한다.

- Controller 는 자바스크립트이고 업무적 행위를 정의한다. 또한 DOM rendering 정보가 일체 없다.

5. Directives (지시어)

- 지시어는 HTML 을 확장하여 주고 행위를 일으키는 주체이다.

- 예를들어 앞의 예제에서 보았듯이 데이터 바인딩을 위한 이중 중괄호 표기{{}}, 컨트롤러가 뷰의 어느 부분을 감독할지를 지정하는 ng-controller, 인 풋을 해당 모델의 구성물에 바인딩하는 ng-model 모두 Directive를 이용한 확장 문법이다.

 

 

AngularJS의 동작방식

 이제는 AngularJS가 다른 웹프레임워크와의 차이점을 쉽게 이해가 되었을 것이고, 어떠한 방식으로 AngularJS가 이런 기능을 제공하는지 살펴보겠 다. 아래 그림5는 AngularJS가 아닌 다른 JS의 데이터바인딩 구조를 그림으로 나타낸것이다.

그림5 분석 : 다른 JS들은 그림을 보다시피 최소 한번 템플릿과 모델이 결합되야하며 이 또한 자동적으로 이루어지지 않는다. 이말인즉슨 개발자가 일일이 모델과 뷰를 지속적으로 싱크를 맞추도록 코딩을 해야한다는 것으로 코딩이 불가피하다. 이로써 UI와 자바스크립트 속성에 데이터를 할당하기 위해 추가적으 로 해야할 작업이 상당히 많아진다.

 

 

다음 그림6는 AngularJS의 데이터바인딩 구조이다.

[양방향 데이터 바인딩]

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<body>
    <p>Try to change the names.</p>
    <div ng-app="myApp" ng-controller="myCtrl">
        First Name: <input type="text" ng-model="firstName"><br>
        Last Name: <input type="text" ng-model="lastName"><br>
        <br>
        Full Name: {{firstName +	"	"	+	lastName}}
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.firstName = "John";
            $scope.lastName = "Doe";
        });
    </script>
</body>

</html>

분석 그림6 : AngularJS는 다른 JS와 달리 양방향 데이터바인딩을 지원한다. 페이지가 로드되면 AngularJS는 동일한 이름의 input과 데이터 모델을 연결하고 이 둘의 싱크를 유지시킨다. 개발자는 단지 UI의 어느 부분에 어떤 자바스크립트 속성을 할당할지 선언만 하고(앞의 예제의 ng-model) 동기화는 자동으 로 이루어지게 된다.

 

 AngularJS는 $watch 명령어를 이용하여 모델과 뷰를 실시간으로 감시하며, 이때 사용자의 클릭이나 타이핑 등의 동작으로 애플리케이션을 조작(예 제에서 Input Box에 값을 입력하는 행위)이 있을 경우 모델은 변경이 발생했음을 뷰에 알려서, 뷰가 변경사항을 현재 표시 중인 내용에 적용한다. 이렇 듯 AngularJS는 뷰와 모델이 지속적이고 실시간으로 업데이트시킨다.

728x90
반응형
LIST
저작자표시 비영리

'Develop > Front-End' 카테고리의 다른 글

[Front-End]명령줄 인터페이스 - Apache Cordova  (0) 2020.11.10
[Front-End]Cordova Basic  (0) 2020.11.10
[카카오 간편 로그인] 부모창 overflow hidden  (0) 2020.11.02
[Front-End]window.open in Safari  (0) 2020.09.28
[FB]페이스북 로그인  (0) 2020.06.23
'Develop/Front-End' Related Articles more
Comments