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.

• muenchdo: Do you get an error message? If yes, please add it to your question.
• lukkea: 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?

Answer 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.

• Anuj jain: 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: look at the way I added ngAnimate, its not a custom module.

Answer 2

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