AngularJS의 구성 요소를 깔끔하게/구조화하는 방법

Question

내 응용 프로그램에는 장바구니 구성 요소가 있습니다. 그것은 컨트롤러에 살고 있습니다. 컨트롤러는 요청시 페이지에로드되는 부분으로 인스턴스화됩니다 (메뉴 막대의 아이콘).

app.controller('CartCtrl', function($scope, $http, storage) { 
    $scope.options = { 
     freeShipmentFrom: 180, 
     shipmentCosts: 6 
     ... 
    }; 

    $scope.init = (function(){ ... }()); 

    $scope.addItem = function(){ ... }; 
    ... 
    // more methods 
    ... 
}); 

지금은이 페이지에로드되지 않은 경우에도,이 부분/컨트롤러 이외의 기능을 제공해야 . 지시문을 사용하므로 예를 들어 항목을 추가하고 장바구니에 항목 수를 표시하는 지시문이 있습니다.

<button add-to-cart="productId">Add to cart</button> 

어떻게/디자인 모범 사례에 관한이 구성 요소를 구성 것인가? "add-to-cart"로직을 지시문에 추가 하시겠습니까? 위에서 언급 한 부분 외의 서비스를 정의하고 부분 및 하위 부분의 지시문과 컨트롤러에서 액세스하십시오.

앞으로 귀하의 생각을 읽을 것입니다!

Answer 1

지시문과 컨트롤러 사이에 장바구니 논리를 추가하는 가장 좋은 방법은 서비스를 사용하여 컨트롤러 및 지시문에 삽입하는 것입니다. 여기

var module = angular.module('app', []) 
.controller('CartCtrl', function($scope, cartService){ 
    $scope.cartName = "My Cart"; 
    $scope.productId = 123; 
    $scope.addItem = function(productId){ 
    cartService.addProductId(productId); 
    }; 
})   
.factory('cartService', function(){ 
    var products = []; 
    return { 
    addProductId : function(productId){ 
     products.push(productId); 
    } 
    }; 
}) 
.directive('addToCart', function(cartService){ 
    function link($scope, element, attrs){ 
    $scope.$watch('productId', function(value){ 
     if(value){ 
     cartService.addProductId(value); 
     } 
    }); 

링크입니다 : 여기에서 모두 서비스에 액세스하는 방법에 대한 예입니다 http://jsbin.com/IKadoYAK/4/edit 내 질문은 더 같은 의미

Answer 2

나는 비슷한 질문에 답했다. 이 질문에는 2 부분이 있습니다. 두 번째 부분을 참고하면 답변을 얻을 수 있습니다!

Spring MVC or Rest Services with spring + AngularJS

는 각도와 재미를!

Answer 3

AngularJS 설명서를 참조하면 서비스를 통해 상태를 공유해야합니다. http://docs.angularjs.org/guide/controller#using-controllers-correctly

지시어 나 컨트롤러에서 상태를 조작 할 수 있습니다. 거기에 선택의 여지가 있지만 정말 DOM 상호 작용이 필요한 경우에만 지시문을 사용하는 것이 좋습니다. 그렇지 않은 경우 컨트롤러를 사용하십시오.

부분을로드 할 때 상태를 처리하는 서비스를 컨트롤러/지시문에 삽입해야합니다.