AngularJS: включение модуля между разделенными контроллерами

Question

Предположим, что мы имеем два AngularJS контроллеры в отдельных файлах, которые включены в HTML файл, например:

//controller1.js 
"use strict"; 
var someApp = angular.module('MYAPP'); 
//var someApp = angular.module('MYAPP',['ngCookies']); <-- Does not work 

someApp.controller('Controller1', function($scope) { 

    $scope.CookieFunction = function(){ 
     //foo 
    }; 
}); 


//controller2.js 
"use strict"; 
var someApp = angular.module('MYAPP',['ngCookies','ui.bootstrap']); 

someApp.controller('Controller2', function($scope,$cookies) { 

    $scope.SomeOtherfunction = function(){ 
     //foo 
    }; 
}); 

//HTML file 
<script src="controller1.js"></script> 
<script src="controller2.js"></script> 

Внутри controller1, я хотел бы выполнить некоторые операции Cookie, поэтому необходимо включить ngCookies. Если я делаю это внутри controller1.js, тогда контроллер2 не будет определен. Я предпочитаю включать модули именно там, где они мне нужны, а не где-то еще. Как я могу достичь этого без «удаления» последующих контроллеров?

EDIT: Если я перехожу ngCookies включение из controller2 в controller1, я получаю сообщение об ошибке (Аргумент «controller2» не является функцией, получил неопределенный)

Answer 1

Вы можете сделать это, создав различные модули, как показано ниже. Также это предпочтительный способ, когда мы хотим модулизировать наше приложение.

//app.js 
"use strict"; 
var mainApp = angular.module('MYAPP', ['SomeApp', 'OtherApp']); 


//controller1.js 
var someApp = angular.module('SomeApp',['ngCookies']); 
someApp.controller('Controller1', function($scope,$cookies) { 

    $scope.CookieFunction = function(){ 
     //foo 
    }; 
}); 


//controller2.js 
"use strict"; 
var otherApp = angular.module('OtherApp ',[]); 

otherApp.controller('Controller2', function($scope) { 

    $scope.SomeOtherfunction = function(){ 
     //foo 
    }; 
}); 

//HTML file 
<script src="app.js"></script> 
<script src="controller1.js"></script> 
<script src="controller2.js"></script> 

Answer 2

Проблема в примере кода является следующее (изменение [ngCookies] к ['ngCookies'])

//controller1.js 
"use strict"; 
var someApp = angular.module('MYAPP',['ngCookies']); 

Другой подход, упрощая до 1 app.js

// app.js 
"use strict"; 
var someApp = angular.module('MYAPP',['ngCookies']); 

someApp.controller('Controller1', function($scope) { 

    $scope.CookieFunction = function(){ 
     //foo 
    }; 
}); 

someApp.controller('Controller2', function($scope,$cookies) { 

    $scope.SomeOtherfunction = function(){ 
     //foo 
    }; 
}); 

//HTML file 
<script src="app.js"></script> 

упрощать 1 Основные app.js с различными файлами контроллера

Если вы хотите сохранить контроллеры в отдельном файле, то

app.js

var app = angular.module("testApp",['ngCookies','ui.bootstrap']); 

test1.js

app.controller("controller1",function(){ 
// some code 
}) 

test2.js

app.controller("controller2",function(){ 
// some code 
}) 

Наконец включают JS файлы в HTML

<script src="app.js"></script> 
<script src="controller1.js"></script> 
<script src="controller2.js"></script> 

Answer 3

Когда вы даете второй аргумент angular.module, такие как angular.module('MYAPP',['ngCookies']), вы определяете новый модуль, и это связано зависимостями. Если вы не включаете второй аргумент (зависимости), то функция действует как «getter» и просто возвращает ссылку на этот модуль, с помощью которого вы можете зарегистрировать больше контроллеров/служб/и т. Д. Если указать angular.module('MYAPP', ['ngCookies']) более чем один раз, вы перезаписать предыдущий модуль «MYAPP», поэтому Controller1 кажется, чтобы получить «стерты»

Поскольку вы включили ngCookies через `angular.module («MYAPP», [«ngCookies» ]) уже в файле, в котором находится Controller2, вам не нужно делать это снова в файле, в котором находится Controller1. Вы должны использовать $ cookies только штраф Controller1 - просто убедитесь, что вы его вставляете. то есть

someApp.controller('Controller1', function($scope, $cookies) { 

    $scope.CookieFunction = function(){ 
     //foo 
    }; 
}); 

Answer 4

Возможно, что-то в этом роде?

//app.js 
"use strict"; 
angular.module('MYAPP', ['myCtrl1', 'myCtrl2']); 

//controller1.js 
angular.module('myCtrl1', ['ngCookies']) 
    .controller('Controller1', function($scope) { 

    $scope.CookieFunction = function(){ 
     //foo 
    }; 
}); 


//controller2.js 
"use strict"; 

angular.module('myCtrl2',['ngCookies','ui.bootstrap']); 
    .controller('Controller2', function($scope,$cookies) { 

    $scope.SomeOtherfunction = function(){ 
     //foo 
    }; 
}); 

//HTML file 
<script src="app.js"></script> 
<script src="controller1.js"></script> 
<script src="controller2.js"></script>`