Angular JS - Folder structure issue - controllers.js

Question

I have the folder structure as in the image.

And I have 2 controllers in 2 different folders. And it seems they 2 gets conflicted and the first controller pages are not working if I include the 2nd controller in index.html as below. Only if I remove the second controller the first one works.

index.html

<script src="1_reportingEntities/controller.js"></script>
<script src="2_dataCollections/controller.js"></script>

Folder structure

Updated:

Here are the 2 controllers and both have the same file name in different folders.

controller.js

'use strict';

var mdmApp  = angular.module('mdmApp', ['ngRoute', 'ngResource', 'ngMessages', 'ui.grid', 'ui.grid.pagination',
        'ui.grid.moveColumns', 'ui.grid.resizeColumns', 'ui.grid.selection', 'ui.grid.autoResize',
        'ui.grid.cellNav', 'ui.grid.exporter', '720kb.datepicker','angularjs-dropdown-multiselect']);


mdmApp.config(function($routeProvider) {

    $routeProvider.when('/', {
        templateUrl : '1_reportingEntities/listEntities.html',
        controller : "listController"
    })
    .when('/list', {
        templateUrl : '1_reportingEntities/listEntities.html',
        controller : "listController"
    })

controller.js

'use strict';

var mdmApp  = angular.module('mdmApp', ['ngRoute', 'ngResource', 'ngMessages', 'ui.grid', 'ui.grid.pagination',
        'ui.grid.moveColumns', 'ui.grid.resizeColumns', 'ui.grid.selection', 'ui.grid.autoResize',
        'ui.grid.cellNav', 'ui.grid.exporter', '720kb.datepicker','angularjs-dropdown-multiselect']);

mdmApp.config(function($routeProvider) {

    $routeProvider.when('/dataCollection', {
        templateUrl : '2_dataCollections/dataCollection.html',
        controller : "dataCollectionController"
    })
    .when('/reportTypeEntityList/:id', {
        templateUrl : '2_dataCollections/reportTypeEntityList.html',
        controller : 'reportListController',
        resolve : {
            formType : function() {
                return 'REPORTTYPEENTITYLIST';
            }
        }
    })

You've probably named each controller the same. However, we can't know unless you paste their code (or at least, the line where you declare the controllers). — Oliver
– Oliver, Commented Jan 15, 2016 at 15:54
so what errors are thrown? SHow us some controller code. Those folders are meaningless to us — charlietfl
– charlietfl, Commented Jan 15, 2016 at 15:56
@charlietfl Thanks no errors are thrown and the pages are not loaded for controller one if I have both controllers. If I remove one of the controller then it works. — Jay
– Jay, Commented Jan 15, 2016 at 16:04

charlietfl · Accepted Answer · 2016-01-15 16:13:28Z

3

Your problem is you are declaring the same module twice.

When you register a module you add the second argument for dependencies.

Then to reference the same module you leave out dependencies, and only use the name.

Create module (setter):

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

Reference module (getter):

angular.module('myApp').controller('...;

You are basically wiping out the first module (and controller) when you add the same module declaration again

edited Jan 15, 2016 at 16:13

answered Jan 15, 2016 at 16:06

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jkris Over a year ago

read it at angular's official documentation docs.angularjs.org/guide/module#creation-versus-retrieval

Collectives™ on Stack Overflow

Angular JS - Folder structure issue - controllers.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related