AngularJS 초보의 삽질 1(‘PhoneListCtrl’ is not a function…)

KnockoutJS를 통해 웹 개발에 MVVM 패턴을 적용하며 재미를 느낀 것이 그리 오래되지 않은 것 같은데 어느새 AngularJS가 웹 MVW 프레임워크 점유율 1위로 조사되었습니다. 한동안 기웃기웃 만 하다가 마침 Angular를 사용할 프로젝트에 참여하게 되어 공식 튜토리얼을 따라 하며 학습을 시작했습니다.

하지만 초보자에게 모든 것이 술술 풀려주지는 않네요.

위의 2단계 테스트 코드가 문제를 일으켰습니다. 테스트 코드가 실행될 때 프레임워크가 컨트롤러를 찾지 못합니다.

Error: [ng:areq] Argument ‘PhoneListCtrl’ is not a function, got undefined http://errors.angularjs.org/1.2.0-rc.2/ng/areq?p0=PhoneListCtrl&p1=not%20a%20function%2C%20got%20undefined

결국 Github에서 소스를 받아서 Karma로 돌려보다가 단서를 찾았습니다. 다운받은 코드와는 달리 제가 직접 타이핑한 코드는 모듈을 로드 하지 못하고 있었습니다.

Angular의 IoC와 mocking 메커니즘을 아직 학습하지 못한 초보자에겐 혹독하게도 튜토리얼의 테스트 코드에 모듈을 등록하는 부분이 빠져있는 것이 오류의 원인이었습니다. 아래 코드를 it 함수를 호출하기 전에 추가해야 합니다.

beforeEach(module('phonecatApp'));

더 이상 동일한 문제로 고민하는 Angular 초보님들이 없기를 바랍니다.

Advertisements

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중