JavaScript Data Binding with AngularJS Part I

http://weblogs.asp.net/dwahlin/archive/2012/07/29/javascript-data-binding-with-angularjs-getting-started.aspx

위에 글을 번역한 것입니다.

JavaScript Data Binding with AngularJS Part I – Getting Started

Getting Started with AngularJS

AngularJS가 무엇이과 왜 자세히 봐야하는가? 이질문에 대답하기 위해서 잠시 시간을 갖고 HTML이 제공하는 기능에 대해서 잠시 생각해 보자. 이것은 다이나믹 Applicaiton을 위해 디자인된게 아니라는 것은 누구나 알고 있다.– 이것은 정적인 마크업언어이다. HTML자신만으로 여러분들은 요소들을 생한다든지 어떠한 요소가 변했을때 UI요소를 필터링한다든지 또는 다이나믹 Application에 필요한 다양한 일들을 할 수 없다. 다른 Flex,Silverlight,WPF그리고 다른 UI프레임웍에비해 매우 제한적이다. 우리는 이러한 문제를 서버에서 HTML을 다이나믹하기 생성하면서 또는 Javascriopt Framework(Jquery)를 사용하면서 DOM을 수정할수 있다.

AngularJS는 HTML을 확장시켜 다이나믹 Application을 지원한다 즉 CRUL 중심의 Application에 잘 맞는다는 얘기다. 예를들면, AngularJS는 <option>태그를 <select>태그에 생성할때 자바스크립트의 코드의 작성없이 이를 수행한다. 트랙의 변경으로 UI의 요소를 만들고 데이터 필티링 소팅그리고 더욱 많은 기능을 제공한다. The AngularJS documentation (http://docs.angularjs.org/guide/overview)는 아래와 같이 말한다.

“Angular는 다른 접근을 하고있다. 문서중심 HTML과 새로은 HTML 구조들에 대한 미시매칭을 최소화 하려고 시도하고 있다. Angular는 우리가 어떠한 지시어를 호출함으로 브라우저에거 Syntax를 알려주고 있다. ”

AngularJS는 다음과 같은일을 하는데 당신을 도와줄 것이다.:

callback등록
프로그램적으로 DOM수정
데이터를 UI에 넣고 뺄수 있다.
많은 양의 초기화 코드를 쓸필요가 없다.

아래의 리스트는 이외의 기능들이다..

Data binding
Data filtering/sorting
Data templates
Ajax support
Form validation
Routing
History support
Deep linking
Modular and reusable components
Loosely coupled architecture (dependency injection)
MVC-style applications
Architected with unit testing in mind

AngularJS가 단순한 데이터바인딩 프레임웍이 아니라 보다 뛰어난 프레임웍임을 여러분들은 아실것입니다. 만약 여러분들이 어떤 기능이 마음에 안든다면 여러분들 스스로 구현하여 코드를 실행할수 있습니다. 이러한 기능은 프레임웤에서 제공됩니다. 커스터마이징은 여기서 다루진 않겠습니다. 그러나 여러분들은 보더 추가적인 디테일한것들을 알수 있을것입니다. AngularJS docs.

AngularJS를 시작하기 위해서 “Hello World” 타입의 튜토리얼처럼 진행을 할것입니다.

Step 1: Script다운받기

AngularJS를 시작하기 위해 먼저 http://www.angularjs.org (or from their github site) 사이트에서 JS를 받고 페이지에 포함시킵니다.

<!DOCTYPE html>
<html>
    <head>
        <script src="js/libs/angular-[version].js"></script>
    </head>
    <body>
        ...
    </body>
</html>

Step 2: ng-app지시어 추가

다음으로 여러분들은 ANgularJS지시어를(ng-app)를 여러분들은 root에 정의합니다. 여러분들은 ng-app를 <html>태그 또는 만약 어떤 특정한 부분에 AngularJS기능이 필요하다면 document에 아무곳의 <div>태그에 넣을수 있습니다. AngularJS는 DOMContentLoaded 이벤트가 발생할때 초기화 되고 ng-app 지시어를 찾습니다.

아래는 ng-app 지시어를 <html>요소에 포함시킨 예입니다. 이 예제는 지서어에 아무값도 할당하지 않았습니다. 이예제에서는 지시어에 아무값도 할당하지 않았지만 다음 포스트에 어떻게 ng-app가 custom application 모듈들을 사용하는지 보여줄 겁니다.

<!DOCTYPE html>
<html ng-app>
    <head>
        <script src="js/libs/angular-[version].js"></script>
    </head>
    <body>




       ...        
    </body>
</html>

만약 여러분들이 Jquery스타일의 접근방법을 좋아하신다면 여러분들은 아래와 같이 정의할수 있을 것입니다:

<!DOCTYPE html>
<html>
  <head>
    <script src="js/libs/angular-[version].js"></script> 
    <script>
        angular.element(document).ready(function () {
            angular.bootstrap(document);
        });
    </script>
  </head>
  <body> 

     ...  
  </body>
</html>

Jquery는 AngularJS와 같이 쓰일수 있지만 별로 필요없습니다.

Step 3: Add a Control with an ng-model Directive

ng-app 지시어를 추가하면 여러분은 바로 AngularJS의 데이터 바인딩 기능을 사용할 수 있습니다. 여러분들은 아래와같이 단순한 데이터바인딩 또는 객체바인등을 할수 있습니다. 바인딩을 하기 위해서 먼저 textbox같은 컨트롤을 추가한다음 AngularJS지시어인 ng-model를 추가합니다. ng-model 지시어는 여러분들이 바인딩할 model의 프로퍼티를 나타냅니다. 이예제에서는 modle object가 없지만 "name" 프로퍼티를 갖는 객체를 text프로퍼티에 바인딩할것입니다.

Name: <input type="text" ng-model="name" />

textbox에 부분적인 데이터 반인딩을 하려면 {{ 프로퍼티이름 }} 를 사용할수 있습니다.

Welcome to AngularJS {{name}}

저작자표시 비영리

Imitaion .NET

JavaScript Data Binding with AngularJS Part I – Getting Started

http://weblogs.asp.net/dwahlin/archive/2012/07/29/javascript-data-binding-with-angularjs-getting-started.aspx

위에 글을 번역한 것입니다.