AngularJS: 여러 파일에서 컨트롤러를 만드는 방법

AngularJS: 여러 파일에서 컨트롤러를 만드는 방법

컨트롤러를 여러 파일로 분할하려고 하는데 모듈에 등록하려고 하면 오류가 발생합니다.

그룹 컨트롤러.

app = angular.module('WebChat', []);
app.controller 'GroupController', ($scope) -> 

사용자 컨트롤러.

app = angular.module('WebChat', []);
app.controller 'UserController', ($scope) -> 

오류

오류: 'GroupController' 인수가 함수가 아닙니다. 정의되지 않았습니다.

설명서를 보면 어쨌든 모듈 방식이 무엇을 하는지 잘 모르겠습니다.내 컨트롤러에 'Webchat' 키가 저장되어 있습니까?

편집: []을(를) 통과하면 새 모듈이 생성되고 이전 모듈을 덮어쓰는 것 같습니다.

app = angular.module('WebChat', []);

이를 방지하기 위해서는 []와 같은 것을 빼야 합니다.

app = angular.module('WebChat');

제가 한 일은 이렇습니다.

색인을 보다

<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
<script src="js/myApp.js" type="text/javascript" charset="utf-8"></script>
<script src="js/myCtrlA.js" type="text/javascript" charset="utf-8"></script>
<script src="js/myCtrlB.js" type="text/javascript" charset="utf-8"></script>

app.js

myApp = angular.module('myApp', [])
myApp.config ($routeProvider) ->
    $routeProvider.when('/a', {controller: 'myCtrlA', templateUrl: 'a.html'})
    $routeProvider.when('/b', {controller: 'myCtrlB', templateUrl: 'b.html'})

나의 CtrlA.js

angular.module('myApp').controller 'myCtrlA', ($scope) ->
    console.log 'this is myCtrlA'

myCtrlB.js

angular.module('myApp').controller 'myCtrlB', ($scope) ->
    console.log 'this is myCtrlB'

보시다시피 제가 컨트롤러 js 파일을 많이 가지고 있다면 index.html에도 스크립트 요소가 많을 것입니다.
저는 아직 그것에 어떻게 대처해야 할지 모르겠습니다.

참고: http://briantford.com/blog/huuuuuge-angular-apps.html
하지만 이 기사는 html 파일에 대해서도 언급하지 않았습니다.

코드에서 'GroupController'(그룹 컨트롤러)를 참조하는 다른 위치(아마도 경로에 있을 것)를 확인합니다.변수로 사용할 수도 있지만 모듈 내부에서 컨트롤러를 선언할 때 인용문을 래핑해야 합니다. 예:

MyCtrl1() = -> ()
...
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: MyCtrl1})

MyCtrl1이 변수이기 때문에 잘 작동합니다.그러나 모듈에서 컨트롤러를 선언할 때는 다음과 같습니다.

app = angular.module('WebChat', []);
app.controller 'GroupController', ($scope) ->
   # ...

$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'GroupController'})

'GroupController'는 경로에 따옴표가 필요합니다.

나는 내 app.js 파일 witch에 내 app var가 먼저 참조되고 그 후 컨트롤러 파일 예를 들어 FirstCtrl.js.

그래서 app.jex에서

var app = angular.module(...

첫번째 Ctrl.js에서

app.controller('FirstCtrl',

이 문제에 대한 간단한 해결책이 있습니다.컴파일하기 전에 *.coffee 파일을 연결합니다.'gulp'를 사용하면 다음과 같은 작업을 만들 수 있습니다.

 gulp.src(['./assets/js/ng/**/*.coffee'])
    .pipe(concat('main.coffee'))
    .pipe(coffee())
    .pipe(ngmin())
    .pipe(gulp.dest('./public/static/js/app'))
    .pipe(livereload(server));

예를 들어,

잡담을 나누다

myChat = angular.module 'myChat', []

msg

myChat
.directive 'message', () ->
    return {
        restrict: 'E'
        replace : true
        transclude: true
        scope: true
        template: '<div></div>' 
    }

연결하고 컴파일하면 다음과 같은 결과를 얻을 수 있습니다.

(function () {
  var myChat;
  myChat = angular.module('myChat', []);
  myChat.directive('message', function () {
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      scope: true,
      template: '<div></div>'
    };
  });

}.call(this));

맛있게 드세요.

언급URL : https://stackoverflow.com/questions/12655890/angularjs-how-do-i-create-controllers-in-multiple-files