programing

여러 파일에서 컨트롤러를 정의하는 방법 - AngularJs

mailnote 2023. 10. 3. 11:15
반응형

여러 파일에서 컨트롤러를 정의하는 방법 - AngularJs

컨트롤러를 별도의 파일로 정의하려고 하는데 오류가 발생합니다.

transactionsController not a function got undefined

파일구조

저는 이 시퀀스 1-common.js 2-transactions.js에 파일을 추가했습니다.

Common.js 정의한 일반 파일에서

var app = angular.module("spModule", ["ngMessages", "ui.bootstrap"]);

transactions.js

angular.module('spModule').controller('transactionsController',
    ['$scope', '$http', function ($scope, $http) {} ]
);

HTML 파일

<body ng-app="spModule" ng-controller="transactionsController">

첫째, 당신은 세계를 없애야만 합니다.app변수.이것은 필요 없습니다.둘째, 당신은 그 원리를 이해해야 합니다.angular.module()방법.

사용.angular.module()두 개의 파라미터(예:angular.module('my-module', []))는 해당 종속성을 가진 새 모듈을 설정하게 됩니다.이와 대조적으로, 사용할 때angular.module('my-module')해당 모듈이 내부적으로 조회되어 호출자에게 반환됩니다(수신).

응용프로그램을 처음 정의할 때 다음과 같은 파일과 구조를 만들 수 있음을 의미합니다.

app.js

angular.module('myApp', []);

FirstController.js

angular.module('myApp').controller('FirstController', function () {});

Second Controller.js

angular.module('myApp').controller('SecondController', function () {});

만약 당신이 이 특정한 순서로 HTML 문서에 이러한 파일들을 포함한다면(적어도 app.js가 먼저 와야 함), 당신의 응용 프로그램은 두 개의 개별적인 파일에 있는 두 개의 컨트롤러와 함께 잘 작동합니다.

추가 판독치

앵귤러를 추천해 드릴 수 있습니다.이 주제에 대한 더 많은 아이디어를 얻기 위한 모듈에 대한 JS Style 가이드입니다.

이 컨트롤러를 내 controller1.js처럼 별도의 파일에 넣을 수 있습니다.

    

    app.controller('myController', ['$scope',function($scope)    
        {
        $scope.myValue='hello World'
        }])


이와 같이 새로운 js 파일 'myNewcontroller.js' 를 생성하고 새로운 컨트롤러를 넣을 수 있습니다.



app.controller('myController2', ['$scope', 함수($scope){$scope.myValue='hello World'}])

이것이 당신에게 도움이 되기를 바랍니다 :) 건배!!

모듈을 만들어서 이런 작업을 할 수 있습니다.모듈 및 각 컨트롤러를 만듭니다.그리고 그 모듈을 메인 앱 모듈에 주입합니다.

Transactions.js

(function() {
   'use strict';
   angular.module('tmodule', []);
})();

(function() {
   'use strict';
    angular.module('tmodule').controller('transactionsController', ['$scope', '$http', 
            function ($scope, $http){
    }]);

})();

이제 Common.js 파일에 "tmodule"을 주입합니다.

  var app = angular.module("spModule", ["ngMessages", "ui.bootstrap","tmodule"]);

common.js를 먼저 로드합니다.앱 지시사항을 다음으로 이동<html>tag. transaction.js를 다음으로 변경합니다.

app.controller('transactionsController', TransactionsController)

TransactionsController.$inject = ['$scope','$http']

function TransactionsController($scope, $http) {


};

그냥 재미로.무슨 일 있으면 연락 주세요.

언급URL : https://stackoverflow.com/questions/28231367/how-to-define-controllers-in-multiple-files-angularjs

반응형