Angularjs : 여러 파일에서 컨트롤러를 만드는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com//questions/12655890

  •  11-12-2019
  •  | 
  •  

문제

컨트롤러를 여러 파일로 분할하려고하지만 내 모듈에 등록하려고 할 때 오류가 발생합니다 :

GroupController.Coffee 

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

userController.Coffee 

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

오류

오류 : 인수 'GroupController'가 함수가 아니며 undefined

문서에서 나는 어쨌든 모듈 메소드가 수행하는 것을 실제로 얻지 못합니다.내 컨트롤러를 'Webchat'키로 저장합니까?

편집 : 또한 []가 새 모듈을 생성하고 이전 하나의 을 덮어 씁니다. 

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

이를 방지하려면 [] 같은 와 같은 []을 남겨 두어야합니다. 

app = angular.module('WebChat');
.

도움이 되었습니까?

해결책

'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'는 경로에서 따옴표가 필요합니다.

다른 팁

여기에 내가 한 일은 다음과 같습니다.

index.html 

<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'})
.

myctrla.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에 많은 스크립트 요소도 많이 일 것입니다.
나는 아직 그것을 다루는 방법을 모른다.

fyi : http://briantford.com/blog/huuuuuuge-apps.html


그러나이 기사는 HTML 파일도 언급하지 않았습니다.

내 app.js 파일에서 확실한 내 App VAR을 가지고 있습니다. FirstCtrl.js 예 : FirstCl.js와 같은 컨트롤러 파일을 처음 참조합니다.

App.js Ex 

var app = angular.module(...
.

firstctrl.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));
.

예 :

Chat.Coffee 

myChat = angular.module 'myChat', []
.

msg.Coffee 

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));
.

즐기십시오!

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top