Multiple Apps Using the Same Controller - AngularJS

Question

I have a header that is used on every page on my website. This header containers menu items, searches, etc. I have a controller called 'HeaderController' that is used in the menu. I also have another controller that is used for the main content of the page. I have the following code that allows me to use two controllers:

 angular.module('customersApp')
   .controller('HeaderController', HeaderController)

I run into a problem when I am trying to use this same file on pages outside of the 'customersApp.' For example I have a 'deliveryApp' and when I try to run the top header on a page within the 'deliveryApp' I get an error saying that the 'customersApp' is not available, which I would expect.

I do not want to make a new header and file for each section of my website due to having to make changes to 5 different pages instead of 1. I am looking for a way to include all of my apps in the above code. Thanks.

Have you injected customersApp in your deliveryApp as a dependency? — simeg
– simeg, Commented Dec 15, 2014 at 19:15
You have created two modules, right? Like such angular.module('deliveryApp', []); For deliveryApp to have access to the header you need to inject customersApp into it like this: angular.module('deliveryApp', ['customersApp']); — simeg
– simeg, Commented Dec 15, 2014 at 19:26
Okay. I actually have 5 different modules. Would the same concept apply? — Miriam
– Miriam, Commented Dec 15, 2014 at 19:30
Yes, it would. Are you using a kickstarter such as Yeoman or ng-boilerplate? — simeg
– simeg, Commented Dec 15, 2014 at 19:31

New Dev · Accepted Answer · 2014-12-16 05:27:05Z

1

Create a common module for your header controller:

angular.module("common", [])
  .controller("HeaderController", HeaderController);

Then, add this module as a depdendency into other apps.

angular.module("deliveryApp", ["common"]);

and

angular.module("customersApp", ["common"]);

Make sure that the actual js file for common is also included in index.html of each of the apps.

answered Dec 16, 2014 at 5:27

New Dev

49.8k12 gold badges99 silver badges139 bronze badges

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

Collectives™ on Stack Overflow

Multiple Apps Using the Same Controller - AngularJS

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related