Angular에서 여러 컨트롤러를 사용하는 방법JS가 맞습니까?

Angular에서 여러 컨트롤러를 사용하는 방법JS가 맞습니까?

저는 AngularJS를 시작하고 있으며, 제가 알기로는 웹 페이지 섹션마다 다른 컨트롤러를 사용할 수 있습니다.나는 그것을 작동시키는 데 어려움을 겪고 있다.페이지에는 2개의 섹션이 있으며 각각에 대응하고 있습니다.ng-controller(JSFiddle).첫 번째 섹션만 작동합니다.예를 들어 현재app1동작은 양호하지만 아래쪽으로 이동하면app2app2만 정상적으로 동작합니다.뭐가 잘못됐나요?이 동작의 이유와 링크에 대해 설명해 주시면 감사하겠습니다.

여러 개의 컨트롤러를 가질 수 있지만 여러 개의 컨트롤러를 가질 수는 없습니다.ng-app지시사항을 같은 페이지에 표시합니다.즉, 1개만 있으면 됩니다.ng-apphtml의 명령어로 어플리케이션에서 사용되는 단일 모듈을 가리킵니다.

다음으로 이 모듈을 정의하고 이 모듈의 모든 컨트롤러를 정의합니다.

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

app.controller('TextController', function ($scope) {
    //Controller Code Here    
});

app.controller('ItemController', function ($scope) {
    //Controller Code Here
});

어떤 이유로 컨트롤러를 개별 모듈에 배치하는 경우에도 이러한 모듈을 메인모듈의 의존관계로 포함할 수 있습니다.

var items = angular.module('items', []);
var text = angular.module('text', []);
var app = angular.module('app', ['items', 'text']);


text.controller('TextController', function ($scope) {
    //Controller Code Here
});

items.controller('ItemController', function ($scope) {
    //Controller Code Here
});

일반적으로 각 컨트롤러에 모듈을 설치할 필요는 없습니다.모듈은 관련 기능을 그룹화하여 다른 응용 프로그램에서 쉽게 재사용할 수 있도록 하기 위해 사용됩니다.

다음은 몇 가지 예에 대한 링크입니다.

단일 모듈 : http://jsfiddle.net/36s7q/4/

다중 모듈: http://jsfiddle.net/36s7q/5/

두 예 모두 페이지에 ng-app이1개밖에 없는 것에 주의해 주세요.

이것 좀 봐, 나 많이 변했어.http://jsfiddle.net/36s7q/6/

페이지에 두 개의 앱 모듈이 없어도 동일한 모듈 내에 여러 개의 컨트롤러를 사용할 수 있습니다.구문도 단순화했습니다.한번 보세요.

var items = angular
.module('app1', [])
.controller('ItemController', function($scope) {
$scope.items = [ {
    title : 'Pencil',
    quantity : 8,
    price : 4.2
}, {
    title : 'Pen',
    quantity : 2,
    price : 5.2
}, {
    title : 'Watch',
    quantity : 3,
    price : 10.2
} ];
})
.controller('TextController', function($scope) {
$scope.text = {
    message : 'Welcome!!'
};
});

여러 컨트롤러를 사용하는 방법은 다음과 같습니다.

       var app = angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']);

 app.controller('DemoCtrla', DemoCa)
    .controller('DemoCtrlb', DemoCb)
    .controller('DemoCtrlc', DemoCc);


        function DemoCa($mdConstant) {
                        // function here
                    }

        function DemoCb($mdConstant) {
                        // function here
                    }

        function DemoCc($mdConstant) {
                        // function here
                    }

도움이 되었으면 좋겠다;)

당신의 실제 질문에 대답하는 대신, 저는 루팅을 사용하는 것을 제안합니다.

주의:이 기술은 문제를 해결하는 데 필요하지 않습니다.그러나 향후 프로젝트를 위해 이 정보를 알고 싶을 수도 있습니다.

내가 제대로 이해했다면, 당신이 원하는 것은 페이지의 특정 섹션에 다른 컨트롤러/뷰를 사용하는 것입니다.

이를 실현하려면 단일 응용 프로그램모듈을 만듭니다(각형 응용 프로그램은 SPA입니다.다음으로 몇 가지 루트를 정의하고 이들 중 하나가 요구되었을 때 사용할 것을 Angular에게 지시할 수 있습니다.

var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/', {templateUrl: './partials/views/root.html',   controller: 'rootCtrl'}}).

        when('/section', {templateUrl: './partials/views/section.html',   controller: 'sectionCtrl'}}).

        otherwise({redirectTo: '/'});
}]);

자세한 것은, http://docs.angularjs.org/api/ngRoute 를 참조해 주세요.

routeProvider를 사용하려면 안정적인 최신 버전의 Angular가 ngRoute 모듈이 필요합니다.

언급URL : https://stackoverflow.com/questions/20561116/how-to-have-more-than-one-controllers-in-angularjs-correctly