AngularJS 컨트롤러 분리, 인수가 함수가 아니며 정의되지 않았습니다.

수 백 번 요청되었지만 실제로 오류를 찾을 수는 없습니다. 나는 비슷한 질문을 한 번 보았습니다. 처음에는 모든 것을 한 페이지에서 처리했습니다.하지만 분명히 컨트롤러를 다른 파일로 분리하는 법을 배워야했습니다.AngularJS 컨트롤러 분리, 인수가 함수가 아니며 정의되지 않았습니다.

파셜/hosts.html :

Hosts Page 
<div ng-controller="HostsCtrl"> 
    {{ title }} 
</div>

index.html을

<html> 
<head> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-route/angular-route.js"></script> 
    <script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script> 
    <script src="js/myApp.js"></script> 
    <script src="js/HostsCtrl.js"></script> 
</head> 

<body ng-app="MyApp"> 
...

JS/MyApp.js

이 MyApp을 만들어 다음과 같은 짓습니다 모듈 및 하위 모듈,

var app = angular.module('MyApp', ['ngRoute', 'ui.bootstrap']); 
console.log("index.js file loaded"); 

angular.module('MyApp.controllers', []);

JS/HostsCtrl.js

안녕하세요 세계와 시간을 표시 MyApp.controllers 모듈에서 그냥 간단한 컨트롤러.

console.log("HostsCtrl.js file loaded"); 
angular.module('MyApp.controllers').controller("HostsCtrl", function($scope) { 
    $scope.title = "Hello world" + new Date().getTime(); 
});

콘솔 출력 :

index.js file loaded MyApp.js:2 
HostsCtrl.js file loaded HostsCtrl.js:1 
Error: [ng:areq] Argument 'HostsCtrl' is not a function, got undefined

나는 그것이 오류를 제공하고 HostsCtrl를 해결할 수없는 이유 그러나 이해가 안 로딩 순서가 올바른지 가정합니다. 내가 도대체 뭘 잘못하고있는 겁니까?

출처

2014-11-01 Mustafa

종속성을 선언하지 않은 것처럼 보입니다 (컨트롤러가 별도 모듈에 있기 때문에). 사용해보기 :

var app = angular.module('MyApp', [ 
    'ngRoute', 
    'ui.bootstrap', 
    'MyApp.controllers' 
]);

출처

2014-11-01 23:28:39 dfsq

맞아요, 해결했습니다. 그러나 여기에 의존성으로 선언했는데 'MyApp.controllers' 선언이이 줄 뒤에 오는 것은 어떻게 오류가 발생하지 않는지, 아마도 "당신은 아직 MyApp.controllers를 가지고 있지 않습니다. 의존 할 방법이 없습니다. 그들" – Mustafa

AngularJS 컨트롤러 분리, 인수가 함수가 아니며 정의되지 않았습니다.

답변

관련 문제