AngularJS - 디렉티브와 컨트롤러

AngularJS - 디렉티브와 컨트롤러

저는 AngularJS를 사용하여 첫 번째 앱을 만들려고 합니다.다만, 특정의 경우에 디렉티브를 사용할 필요가 있는지는 조금 혼란스럽습니다.

선택한 지역의 위도/론 값을 표시해야 하는 간단한 Map 페이지가 있습니다.지금은 지시어를 전혀 사용하지 않고 있습니다.컨트롤러에서 모든 작업을 수행하고 결과를 표시하기 위해 파셜을 사용합니다.지도 보기를 다른 곳에서 재사용할 계획이 없습니다.그래서 내가 지시가 필요없다고 느낀거야.

한편, 컨트롤러에서 DOM을 조작하려고 할 때마다(Google maps API를 사용하여 하고 있습니다), 그 부분을 디렉티브로 옮겨야 한다는 것을 읽은 적이 있습니다.

심플한 컨트롤러는 다음과 같습니다.

function MapViewController($scope) {
  $scope.zoom = 6;
  $scope.lat = 37;
  $scope.lon = -122;
  var mapOptions = {
    center: new google.maps.LatLng($scope.lat, $scope.lon),
    zoom: $scope.zoom,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  $scope.map = new google.maps.Map(
      document.getElementById('map-canvas'), mapOptions);

  /*
   * Update zoom and other map attributes.
   */
  google.maps.event.addListener($scope.map, 'center_changed', function() {
    $scope.$apply(function () {
      $scope.zoom = $scope.map.getZoom();
      var center = $scope.map.getCenter();
      $scope.lat = center.lat();
      $scope.lon = center.lng();
      var bounds = $scope.map.getBounds();
      var northEast = bounds.getNorthEast();
      $scope.northEastLat = northEast.lat();
      $scope.northEastLon = northEast.lng();
      var southWest = bounds.getSouthWest();
      $scope.southWestLat = southWest.lat();
      $scope.southWestLon = southWest.lng();
    });
  });

  /*
   * Set zoom and other map attributes.
   */
  google.maps.event.addListener($scope.map, 'some event', function() {
    $scope.$apply(function () {
      ...
    });
  });

  /*
   * Add markers to map.
   */
  google.maps.event.addListener($scope.map, 'another event', function() {
    $scope.$apply(function () {
      ...
    });
  });

}

그리고 여기 제 파셜이 있습니다.

  <div id="map-controllers" class="span4">
    <form class="form-horizontal">
      <div class="control-group">
        <label class="control-label" for="inputNumber">Zoom:</label>
        <div class="controls">
          <input type="text" class="input-mini" placeholder="zoom" value="{{ zoom }}">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="inputNumber">Latitude:</label>
        <div class="controls">
          <input type="text" class="input-large" placeholder="Latitude" value="{{ lat }}">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="inputNumber">Longitude:</label>
        <div class="controls">
          <input type="text" class="input-large" placeholder="Longitude" value="{{ lon }}">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="inputNumber">North East Latitude:</label>
        <div class="controls">
          <input type="text" class="input-large" placeholder="Latitude" value="{{ northEastLat }}">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="inputNumber">North East Longitude:</label>
        <div class="controls">
          <input type="text" class="input-large" placeholder="Longitude" value="{{ northEastLon }}">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="inputNumber">South West Latitude:</label>
        <div class="controls">
          <input type="text" class="input-large" placeholder="Latitude" value="{{ southWestLat }}">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="inputNumber">South West Longitude:</label>
        <div class="controls">
          <input type="text" class="input-large" placeholder="Longitude" value="{{ southWestLon }}">
        </div>
      </div>
    </form>
  </div>

다음은 간단한 독립형 답변입니다. 자세한 내용은 공식 문서에 대한 링크를 참조하십시오(적절한 측정을 위해 "서비스"의 정의가 추가됨).

http://docs.angularjs.org/guide/controller

AngularJS에서 컨트롤러는 Angular를 증강하는 데 사용되는 JavaScript 생성자 함수입니다.JS 스코프

컨트롤러가 DOM에 접속되어 있는 경우ng-controller지시어, 각도JS는 지정된 컨트롤러의 생성자 함수를 사용하여 새 컨트롤러 개체를 인스턴스화합니다.새로운 하위 스코프는 컨트롤러의 생성자 함수에 대한 주입 가능한 매개 변수로 사용할 수 있습니다.$scope.

http://docs.angularjs.org/guide/directive

대략적인 수준에서 디렉티브는 DOM 요소(아트리뷰트, 요소명, CSS 클래스 등)의 마커로 Angular를 나타냅니다.JS의 HTML 컴파일러($compile지정된 동작을 그 DOM 요소에 부가하거나 DOM 요소와 그 자식의 변환에도 사용합니다.

http://docs.angularjs.org/guide/services

AngularJS 서비스는 Dependency Injection(DI; 의존성 주입)을 사용하여 함께 배선되는 대체 가능한 객체입니다.서비스를 사용하여 앱 전체에서 코드를 구성하고 공유할 수 있습니다.

컨트롤러는 서비스, 의존관계 및 비즈니스 로직 처리에만 사용해야 한다고 생각합니다.

지시문은 DOM 조작에 사용해야 하므로 위젯 추가/편집과 같은 사용자 상호 작용을 처리하는 데 적합합니다.컨트롤러가 관여하지 않고 다른 기능으로 인해 커지기 때문에 컨트롤러에 추가하는 것은 반패턴이 됩니다.필요에 따라 컨트롤러에서 명령어로 값(스코프)을 쉽게 전달할 수 있습니다.

그런 다음 필요에 따라 위젯 추가 지시문을 앱의 다른 위치에 배치할 수 있는 이점을 얻을 수 있으며, 일반적으로 코드 베이스를 다음과 같은 디메터의 법칙으로 쉽게 따를 수 있습니다.

Angular에 대해 언제 어디서 기능을 분할해야 하는지 아는 것은 나에게 가장 어려운 일 중 하나이지만, 당신은 실수를 할 수 있지만 연습하면 쉬워집니다.

질문에 답하려면 지시문으로 나누어야 하지만, 복잡한 문제이기도 합니다. 만약 당신이 말한 것처럼 당신의 앱이 단순하다면 당신은 당신이 가지고 있는 것을 찾을 수 있을 것입니다.요건이 변경되면 리팩터링이 되는 경우가 있습니다.

동료들과 나는 AngularJs를 배우다가 비슷한 상황에 처했다.Angular에서 구현하려는 기능의 종류에 따라 모든 사용자에게 좋은 출발점을 제공할 수 있는 이 간단한 표를 정리했습니다.http://demisx.github.io/angularjs/2014/09/14/angular-what-goes-where.html

언급URL : https://stackoverflow.com/questions/18757679/angularjs-directives-vs-controllers