[$injector:unpr] Unknown provider 에러코드

참고한 사이트

http://stackoverflow.com/questions/18733680/unknown-provider-modalprovider-modal-error-with-angularjs

AngularJS 버전 : 1.4.2

[ERROR : angular.js:12332 Error: [$injector:unpr] Unknown provider: TypeProvider <- Type <-PopupCtrl]

1. Unknown provider Errors는 injector가 함수의 파라미터에 대한 등록된 값을 찾지 못할때 생겨난다고 한다.

이러한 경우에 PopupCtrl에 주입할 Type과 함께할 typeProvider이 없는 것이다.

2. $injector가 필요한 의존성을 해결할수 없을때 생겨난다. 이것을 고치기 위해서는 정의한 의존성을 명확히 하고 올바르게 써야 한다.

3. 이 에러는 컨트롤러, 서비스에 대해서 dependency를 썼고 그 dependency를 포함하거나 만들지 않았을때 발생한다. 

(즉 컨트롤러 같은데 의존성 부여 해놓고 그 막상 그 전해줄 의존성을 만들지 않은 것이다. 즉 공을 받을 곳만 만들고 공은 안 만들었다는 이야기)

막상 해결해 놓고 보니 되게 간단한 건데 진짜 많이 해맨거 같다 ㅠㅠ.. 간단히 기록

AngularJS Modal 창을 띄우기 위해서는 몇가지 방법이 있겠지만 내가 아는 방법은 이거 하나 밖에 없다.

Modal을 이용하는 것이다.

[첫번째]

       $scope.openPopup = function(Type){
            Modal.open(
                'views/modal/Popup.html',
                PopupCtrl',
                'lg',
                {
                    Type : function(){
                        return Type;
                    }
                }
            );
        };

두번째 (popup.js)

'use strict';
angular.module('App')
    .controller('PopupCtrl', function($scope, $modalInstance, Type){
        $scope.Type = Type;
 
        $scope.ok = function(){
            $modalInstance.close('ok');
        };
    });
 

세번째 (popup.html)

<div class="">
    <div class="">
        <span class="">
            Modal
        </span>
    </div>
    <div class="">
        가입이 진행됩니다.
    </div>
    <!-- -->
    <div class="">
        <a href="">
            OK
        </a>
        <a href="">
            Cancel
        </a>
    </div>
    <!-- // -->
</div>
<!-- //-->

[첫번째] : 특정 위치에서 openPopup 기능을 실행시키는 function이다. 여기서 Modal은 Modal.js로 넘어가서 'views/modal/Popup.html','PopupCtrl','lg'를 각각 실행시킨다. 

각각은 Modal.js에 넘어가는 것을 개발자 모드로 breakpoint찍어서 따라가면 자연스레 알수 있다.

[두번째] : 나를 힘들게 만들었던 그 오류가 생긴 컨트롤러 이다. 

[세번째] : 모달 창 HTML코드이다.

여기서 왜 문제가 생겼냐면....

첫번째의 아래 부분 "Type" 과

 {

                    Type : function(){

                        return Type;

                    }

두번째의 아래 부분 "Type" 의

angular.module('App')

    .controller('PopupCtrl', function($scope, $modalInstance, Type){

불일치했기 때문이다.

차라리 저 Type이 없었다면 더 쉽게 했을텐데... 참 고생 많이 했다.

아직도 공부하는 중이라서 뭔가 상세하게 설명하기는 어렵다. 추후 계속 채워넣을 예정이다.