Как правильно управлять несколькими контроллерами в AngularJS?

Ответ 1

У вас может быть несколько контроллеров, но вы не можете иметь несколько директив ng-app на одной странице. Это означает, что в вашем html должна быть только одна директива ng-app, которая указывает на один модуль, который будет использоваться в вашем приложении.

Затем вы определяете этот модуль и определяете все свои контроллеры в этом модуле:

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-приложение.

Ответ 2

Взгляните на это, я много изменил. 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!!'
};
});

Ответ 3

Вместо того, чтобы отвечать на ваш реальный вопрос, я предлагаю использовать маршрутизацию.

Знайте: этот метод не, необходимый для решения ваших проблем. Однако вы можете знать об этом для будущих проектов.

Если я прав, все, что вы хотите сделать, это использовать другой контроллер/представление для определенного раздела вашей страницы.

Для этого создайте единый модуль приложения (помните, Angular приложения 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

Имейте в виду, что для последней версии стабильной версии Angular необходим модуль ngRoute, чтобы использовать routeProvider.

Ответ 4

Вот как у вас несколько контроллеров:

       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
                    }

Я надеюсь, что это поможет;)