Blog

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

October 24, 2013

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 초보님들이 없기를 바랍니다.