Angularjs 기초 학습 1

출처 : http://soomong.net/blog/2014/01/20/translation-ultimate-guide-to-learning-angularjs-in-one-day/

다음은 ng-* 선언을 추가한 HTML이다:

<div ng-app="myApp">
    <div ng-controller="MainCtrl">
        <!-- controller logic -->
    </div>
</div>

그리고 Angular 모듈과 컨트롤러다:

var myApp = angular.module('myApp', []);

myApp.controller('MainCtrl', ['$scope', function ($scope) {
  // Controller magic
}]);

더 진행하기 전에 모든 로직을 담을 Angular 모듈 을 하나 만들어보자. 모듈을 정의하는 방법은 다양하며 그 중 하나가 다음과 같이 로직을 묶는 방법이다.

var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {...}]);
myApp.controller('NavCtrl', ['$scope', function ($scope) {...}]);
myApp.controller('UserCtrl', ['$scope', function ($scope) {...}]);

컨트롤러

컨트롤러를 통해서 데이터를 DOM에 주입하는 아주 쉬운 단계부터 살펴보자. Angular는 HTML과 통신하기 위해 {{ handlebars }} 와 같은 템플릿 형식의 문법을 사용한다.

<div ng-app="myApp">
    <div ng-controller="MainCtrl">
         {{ text }}
    </div>
</div>

var myApp = angular.module('myApp', []);

myApp.controller('MainCtrl', ['$scope', function ($scope) {

    $scope.text = 'Hello, Angular fanatic.';

}]);

여기서 가장 중요한 개념은 특정 컨트롤러안에 모든 기능을 담는 $scope 라는 개념이다. 

$scope 는 DOM의 현재 요소/영역을 참조하며(this 와는 다르다), 요소안의 데이터와 로직을 주시하는 아주 멋진 관찰 기능을 가지고 있다. 이 기능으로 DOM에 자바스크립트 public/private 스코프를 멋지게 만들 수 있다.

먼저 자바스크립트를 설정한다:

var myApp = angular.module('myApp', []);

myApp.controller('UserCtrl', ['$scope', function ($scope) {

    // user details라는 네임스페이스를 사용하자. DOM에서 알아보기도 좋을 것이다.
    $scope.user = {};
    $scope.user.details = {
      "username": "Todd Motto",
      "id": "89101112"
    };

}]);

그 다음 화면에 보여주기 위해 DOM에 데이터를 지정한다:

<div ng-app="myApp">
    <div ng-controller="UserCtrl">
        <p class="username">Welcome, {{ user.details.username }}</p>
        <p class="id">User ID: {{ user.details.id }}</p>
    </div>
</div>

컨트롤러는 JSON 데이터로 서버와 통신하는 함수와 데이터만을 다룬다는 걸 기억하는게 중요하다.

디렉티브(Directives from existing scripts/plugins)는 애플리케이션에 필요한 곳에 사용할수있는 HTML의 가장 간단한 형태의 HTML 이다.

디렉티브를 사용하면, 별다른 노력없이 쉽게 DOM을 주입 적용할수가 있다.

ng-show 와 ng-hide가 디렉티브 이다.

한가지 예를 들어 설명 하겠다.

DOM에 디렉티브를 정의하는 다양한 방법이 있다.

<!-- 1: 속성으로 정의 -->
<a custom-button>Click me</a>

<!-- 2: 요소로 정의 -->
<custom-button>Click me</custom-button>

<!-- 3: 클래스로 정의(IE 구버전 호환을 위해) -->
<a class="custom-button">Click me</a>

<!-- 4: 주석으로 정의 (데모로는 별로 안좋긴 하다) -->
<!-- directive: custom-button -->

myApp.directive('customButton', function () {
  return {
    link: function (scope, element, attrs) {
      // DOM 조작과 이벤트 설정은 여기서!
    }
  };
});

.directive()메소드로 디렉티브를 선언하고, 디렉티브 이름으로 'customButton'을 사용했다.디렉티브 이름에 대문자를 사용하면 DOM에서는 하이픈으로 이를 구분해서 사용하게 된다(예제 참고)

디렉티브는 여러개의 속성을 가지는 객체를 반환한다. 처음 배우는 입장에서 필자가 가장 중요하게 생각하는 것은 restrict, replace, transclude, template, templateUrl, link 속성 이다.

myApp.directive('customButton', function () {
  return {
    restrict: 'A',
    replace: true,
    transclude: true,
    template: '<a href="" class="myawesomebutton" ng-transclude>' +
                '<i class="icon-ok-sign"></i>' +
              '</a>',
    link: function (scope, element, attrs) {
      // DOM 조작과 이벤트 설정은 여기서!
    }
  };
});

요소별 검사

restrict: 어떻게 요소의 사용을 제한할 수 있을지 표현 한다. 오래된 IE를 지원해야하는 프로젝트를 진행중이라면 분명 속성/클래스 정의가 필요할 것이다. ‘A’라고 지정하면 속성 으로만 사용할 수 있다는 의미이고 ‘E’는 요소, ‘C’는 클래스, ‘M’은 주석 으로만 사용할 수 있다는 것을 의미한다. 기본 값은 ‘EA’이고 이 처럼 여러 개의 제한을 동시에 걸수도 있다.

replace: 디렉티브에 정의한 DOM의 마크업을 변경할 수 있음을 의미한다. 예제를 보면 처음의 DOM이 디렉티브의 템플릿으로 어떻게 변경됐는지 알 수 있을 것이다.

transclude: 간단하게 말해서 집어넣는 것이다. transclude를 이용하면 기존의 DOM 내용을 디렉티브안에 복사할 수 있다. ‘Click me’라는 문자열이 렌더링될 때 디렉티브로 옮겨진 것을 봤을 것이다.

template: 템플릿은 주입할 마크업을 의미한다. HTML의 아주 작은 일부분을 정의할 때 특히 좋다. 주입된 템플릿은 Angular로 컴파일되며 이로 인해 handlebar 템플릿 태그도 사용할 수 있다.

templateUrl: template 속성과 비슷하지만 <script> 태그 혹은 파일을 지정할 때 사용한다. HTML의 일부분을 다른 파일로 관리할 필요가 있을 때 템플릿 파일의 URL로 파일 이름과 경로(보통 templates 디렉토리)를 표시해주면 된다.

myApp.directive('customButton', function () {
  return {
    templateUrl: 'templates/customButton.html'
    // 나머지 디렉티브 내용...
  };
});

그리고 다음은 템플릿 파일 내용이다(이름은 중요하지 않음):

<!-- customButton.html 내용 -->
<a href="" class="myawesomebutton" ng-transclude>
  <i class="icon-ok-sign"></i>
</a>

이렇게 했을 때 정말 좋은 점은 브라우저가 HTML 파일을 캐싱 한다는 점이다. 

캐싱되는걸 원하지 않는다면 <script> 태그안에 템플릿을 선언하면 된다:

<script type="text/ng-template" id="customButton.html">
<a href="" class="myawesomebutton" ng-transclude>
  <i class="icon-ok-sign"></i>
</a>
</script>

이렇게 하면 Angular에게 이 ID로 ng-template를 선언했다고 알려주게 된다.

그러면 Angular는 ng-tempalte 혹은 *html 파일을 찾기 시작한다.

서비스는 기능적인 큰 차이점을 제공하지 않으며, 싱글톤으로 사용해야하는 객체 리터릴이나 좀 더 복잡합 케이스는 팩토리를 사용해야 한다.

 예제는 2개의 숫자를 곱하는 서비스이다:

myApp.service('Math', function () {
  this.multiply = function (x, y) {
    return x * y;
  };
});

컨트롤러안에서 서비스를 다음처럼 사용할 수 있겠다:

myApp.controller('MainCtrl', ['$scope', function ($scope) {
    var a = 12;
    var b = 24;

    // 결과는 288
    var result = Math.multiply(a, b);
}]);

서비스(혹 팩토리)를 생성할 때는 의존성 주입을 사용해서 Angular에게 새로 만든 서비스의 존재를 알려줘야 한다. 알려주지 않으면 컴파일 에러가 발생하거나 컨트롤러가 동작하지 않을 것이다.

// Math를 주입한다
myApp.controller('MainCtrl', ['$scope', 'Math', function ($scope, Math) {
    var a = 12;
    var b = 24;

    // 결과는 288
    var result = Math.multiply(a, b);
}]);