Include multiple module in angularjs

Question

I have a module like this :

var master = angular.module('master', ['DataService'])

master.controller('MasterController', function ($scope, MasterOp) {
$scope.status;
$scope.reports;

$scope.data = {
        singleSelect: "all",
        flag : "true"
       };

       $scope.filter = function() {

           $scope.data.flag = "false";

       };

$scope.groupBy = {
        pubid : "false",
        sid : "false",
        device : "false"    
};

$scope.getMasterReports = function() {

  $scope.user = JSON.parse(sessionStorage.response);

    //alert($scope.groupBy.pubid+"ak");

    MasterOp.getMasterReport($scope.sdate,$scope.edate,$scope.user.pubProfile.pubid,$scope.groupBy.pubid,$scope.groupBy.sid,$scope.groupBy.device)
        .success(function (data) {

            $scope.reports = JSON.parse(data.report);
            $scope.metrics= $scope.user.pubProfile.metrics;
        })
        .error(function (error) {
            $scope.status = 'Unable to load customer data: ' + error.message;
        });
};

$scope.logout = function(){

    window.location.href="/AnalyticsMaster/index.html";
};

$scope.tab2 = function()
{
    $scope.groupBy.sid="true";
    $scope.groupBy.pubid="false";
    $scope.data.flag = "true";
    $scope.data.SingleSelect = "all";
    $scope.reports=null;
    $scope.getMasterReports();
};

$scope.tab3 = function()
{
    $scope.groupBy.pubid="true";
    $scope.groupBy.sid="false";
    $scope.data.SingleSelect = "all";
    $scope.data.flag = "true";
    $scope.reports=null;
    $scope.getMasterReports();
};

$scope.tab1 = function()
{
    $scope.groupBy.pubid="false";
    $scope.groupBy.sid="false";
    $scope.data.flag = "true";
    $scope.data.SingleSelect = "all";
    $scope.reports=null;
    $scope.getMasterReports();
};


 });

When i trying to add more module in this it stop working. I am not able to understand why its happening. For Example if i add like this its not working even adding any other module also its stop working.

var master = angular.module('master',['myApp','DataService'])

var master = angular.module('master',['ui.directives','ui.filters','DataService'])

Both cases it stop working. Please help me to understand what i am doing wrong.

Do you get an error message? If yes, please add it to your question. — muenchdo
– muenchdo, Commented Sep 24, 2015 at 11:12
are you including the <script></script> tags for these other modules; if you are, are there errors in the other modules that prevent the master from loading? — lukkea
– lukkea, Commented Sep 24, 2015 at 11:13

Joe Lloyd · Accepted Answer · 2015-09-24 11:28:36Z

1

Index.html

when adding multiple modules in your project make sure you have a ref to it in your index html. like this

<!-- Angular Modules -->
<script type="text/javascript" src="app/app.module.js"></script>
<script type="text/javascript" src="app/app.routes.js"></script>
<script type="text/javascript" src="app/components/home/homeCtrl.js"></script>

Or non custom modules

<!-- Angular links -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>

Its the same as adding any script.

Main Module

The second thing you do is add them to your main module like this

var app = angular.module("myApp",   [
 'ui.bootstrap',
 'ngAnimate',
 'myAppRouter',
 'myAppHomeCtrl',
 'myAppHomeService',
 'myAppNavbarDirective',
 'myAppNavbarService',
 'myAppLoginCtrl',
 'myAppLoginService'
 ]);

Live Example

The best practice in angular is to create a module for each of your features. I've been working on a project here is a link to the project, feel free to fork or clone it to get a good look at the structure.

edited Sep 24, 2015 at 11:28

answered Sep 24, 2015 at 11:15

Joe Lloyd

22.8k7 gold badges59 silver badges86 bronze badges

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

2 Comments

Anuj jain Over a year ago

but if i adding inbuilt module like ( 'ui.directives','ui.filters) not custom module i do not need to add in html. Why that also not working. I want unique filter in ng-option.

Joe Lloyd Over a year ago

look at the way I added ngAnimate, its not a custom module.

charlietfl · Accepted Answer · 2015-09-24 11:29:51Z

0

You are declaring the same module name repeatedly.

You only declare a module once. The module function requires the second argument for dependency array when you declare it.

After that when you want to add components to that module you use the module getter which doesn't have the dependency array argument

// declare a new module
angular.module('master', ['DataService']); // has another module dependency

// add components to existing module
angular.module('master').controller(....;

// add the dependency module shown in "master"
angular.module('DataService', []);// might also have different dependencies here

answered Sep 24, 2015 at 11:29

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

Include multiple module in angularjs

2 Answers 2

Index.html

Main Module

Live Example

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Index.html

Main Module

Live Example

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related