각도 응용 프로그램, 서비스 및 공장

Question

나는 다음과 같은 각도 코드를 가지고 :

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

    application.controller('ImageController', function ImageController($scope, $http) { 

    $http.get('api/images'). 
     success(function (data, status, headers, config) { 
     $scope.images = data; 
     }). 
     error(function (data, status, headers, config) { }); 

    $scope.vote = function (image) { 

     $http.post('api/images/{key}/vote', { key: image.Key }). 
     success(function (data, status, headers, config) { 
     }). 
     error(function (data, status, headers, config) { 
     }); 

    }; 

    }); 

1. 어떻게 그들이 동일한 응용 프로그램을 공유하는 다른 파일에서 컨트롤러를 가질 수있다? ? 바로 내가 각도에 대해 읽고 있었다 , 내가 컨트롤러에서 $의 HTTP 부분을 제거해야한다고 생각

2. ... application.controller ('ImageController': 은 내가 다르게 그 컨트롤러를 정의 사용해야한다고 가정 공장 및 서비스하지만 내가 사용하는 모르겠습니다.

   공장의 나의 해석은 적어도 요청에 서비스를 제공 뭔가. 입니다 일반적으로 예를 들면, 사용되는 방법이다, C#.

   그러나 예를 들어 서비스/공장에 $ http 부분을 어떻게 제거해야합니까?

   컨트롤러에 삽입하는 방법은 무엇입니까? application 글로벌 인 경우, 단지 첫 번째 라인을 생략

   var application = angular.module('Application'); // no second parameter! 
   
   application.controller('newController', ... 
   

   을 또는 :

Answer 1

1) 당신은 새 파일의 모듈을 호출하지 않지만 그것을 다시 정의합니다. 기술적으로, 파일 하나당 하나의 컨트롤러 만 있으면 문제가 없습니다.

참고 : module() 방법의 두 번째 매개 변수를 생략해야하며, 여기 Creation versus Retrieval를 참조하십시오 https://docs.angularjs.org/guide/module이

2) 예, 그 일이 보통 서비스/공장에 보관됩니다

공장

application.service('myService', function($http) { 
    return { 
     getStuff: function() { 
      return $http.get('api/images'); 
     }, 
     postStuff: function(image) { 
      return $http.post('api/images/{key}/vote', { key: image.Key }); 
     } 
    } 
}); 

컨트롤러 :

application.controller('ImageController', function ($scope, myService) { 

    myService.getStuff() 
     .success(function (data, status, headers, config) { 
     $scope.images = data; 
     }) 
     .error(function (data, status, headers, config) { }); 

    $scope.vote = function (image) { 

    myService.postStuff(image) 
     .success(function (data, status, headers, config) { 
     }) 
     .error(function (data, status, headers, config) { 
     }); 

    }; 

    }); 

컨트롤러에 종속성으로 서비스를 주입해야한다는 것에 유의하십시오.

---

(우리는 물론, API에 액세스 할 수 없기 때문에 내가 가짜 JSON 파일을 추가) 여기에 완전히 작업 버전을 참조하십시오. http://plnkr.co/edit/rOG0XSxf2qE70Wyw1a8N?p=preview

Answer 2

컨트롤러 함수는 함수의 두 번째 인수를 취하며이 함수 ImageController는 다른 파일을 포함하여 어디에서나 정의 할 수 있습니다.

염두에 두어야 할 몇 가지 사항은 축소 안전을 보장하기 위해 주입하는 서비스의 배열로 $ inject 속성을 정의하려는 것입니다.다음 다른 곳

var application = angular.module('Application', []); 
application.controller('ImageController', ImageController); 

:

대안

function ImageController($scope, $http) { 
    $http.get('api/images'). 
    success(function (data, status, headers, config) { 
    $scope.images = data; 
    }). 
    error(function (data, status, headers, config) { }); 

    $scope.vote = function (image) { 

    $http.post('api/images/{key}/vote', { key: image.Key }). 
    success(function (data, status, headers, config) { 
    }). 
    error(function (data, status, headers, config) { 
    }); 

    }; 
} 
ImageController.$inject(['$scope','$http']) 

당신이 그러나 나는 내 응용 프로그램의 컨트롤러를 번들로 선호하는, 당신이 어떤 특정 페이지에 필요한 전용 컨트롤러를 포함 할 수 있도록 컨트롤러 파일에 컨트롤러를 등록 할 수 있습니다 전체적으로 캐시합니다. 다른 언어 생태계의 DI 구성과 유사한 한 파일 내에서 응용 프로그램을 연결하는 위치 만들기

Answer 3

1) 코드를 별도의 파일로 분할하려면 각 파일에 별도의 모듈을 만들고 싶을 것입니다. 그런 다음 모듈을 만들 때 대괄호 안에 이름을 나열하여 해당 모듈을 기본 Application 모듈의 종속 항목으로 추가 할 수 있습니다. 아래 예를 참조하십시오.

2) This answer은 공장과 서비스의 차이점을 잘 설명합니다. 기본적으로 두 가지로 모두 똑같은 일을 할 수 있습니다. 당신은 다른 방식으로 그것들을 씁니다. 다른 것을 주입하는 것과 같은 방법으로 공장/서비스를 주입합니다 (예 : $http 또는 $scope).

MyFactory.js 응용 프로그램이 충분히 큰 경우

(function() { 
    var application = angular.module('MyFactoryModule', []); 

    application.factory('MyFactory', function ($http) { 
    var myFactory = { 
     images: null 
    }; 

    $http.get('api/images'). 
     success(function (data, status, headers, config) { 
     myFactory.images = data; 
     }). 
     error(function (data, status, headers, config) { }); 

    myFactory.vote = function (image) { 
    $http.post('api/images/{key}/vote', { key: image.Key }). 
     success(function (data, status, headers, config) { 
     }). 
     error(function (data, status, headers, config) { 
     }); 
    }; 

    return myFactory; 
    }); 
})(); 

Application.js

(function() { 
    // Notice how Application depends on MyFactoryModule 
    var application = angular.module('Application', ['MyFactoryModule']); 

    application.controller('ImageController', function ($scope, MyFactory) { 

    // Example of how you might use MyFactory: 
    MyFactory.vote(MyFactory.images[0]); 

    }); 
})();