Same controller for multiple ng-app

Question

I have a single webpage, that have different documents.php, each document with its ng-app and some controllers. (My webpage is similat to spotify).

player.php: (Where the user can play some music with an audio player)

<div class="navbar-fixed" ng-controller="menuController as menu2">
<?php include('includes/menu.php'); ?>
</div>
<div ng-controller="InteractiveController as interactCtrl">
//some code
</div>

panel_admin.php: (where the user can modify its data and some data of the webpage)

<div class="navbar-fixed" ng-controller="menuController as menu2">
<?php include('includes/menu.php'); ?>
</div>
<div ng-controller="AdminController as AdminCtrl">
//some code
</div>

player.php and panel_admin.php have its respective player.js and panel_admin.js with its .controllers.

player.js:

var decibelsInteractive = angular.module("decibels-interactive", []);
decibelsInteractive.controller('InteractiveController', function ($scope, $log) {

panel_admin.js:

var adminControl = angular.module("decibels-admin", []);
adminControl.controller("AdminController", function($scope){

Now, I have the menu bar in menu.php, where I use in player.php, and in panel_admin.php document. I import it because I don't want to repeat code in every page where I need to use the menu (menu.php have options like manage user options, logout, and many others...). I also have created a menu.js to only have the specific methods in one document and not in 25 documents.

menu.php: (menu is a menu bar where the user have some options, and it also have its username and logout option)

//this document only contains some html code

Now, I've tried to implement a simple code (in menu.js) that allows me to share one controller when I have many ng-app.

Question with the code I've taken

menu.js:

angular.module('decibels-interactive', ['shared']); //player2.php
angular.module('decibels-admin', ['shared']); //panel_admin.php
var sharedModule=angular.module('shared',[]);

sharedModule.controller('menuController',['$scope',function($scope) {
alert("menuController");
}]);   
});

And this worked!!! But then, angular shows an error... (loading player.php)

Error: [ng:areq] http://errors.angularjs.org/1.2.25/ng/areq?p0=InteractiveController&p1=not%20a%20function%2C%20got%20undefined

And when I load panel_admin the same error appears again, but with the AdminController...

It seems like that angular only detects the first controller in each .php, and can't find the second one.

What am I doing wrong?

Thank you!

FYI, mixing PHP and AngularJS is probably not the best. It may be too late now, but check out this answer: http://stackoverflow.com/a/15625754/2506594 — Devin H., Jun 08 '15 at 14:56
@DevinH. Yes, I know that If I had done only-angularJS, It would have been easier, but I don't have much time to change all my webpage! Anyway, thank you! — Jordi 45454, Jun 08 '15 at 17:25

score 0 · Answer 1 · edited Jan 26 '20 at 10:16

0

You can create a file for your shared code and have the controller code inside it.

// @file mySharedCode.js
var MySharedCode = MySharedCode || {};

MySharedCode.menuController = function($scope) {
    // controller logic
};

Then, in your app.js file call menuController function

// @file app.js
sharedModule.controller('menuController', MySharedCode.menuController);

edited Jan 26 '20 at 10:16

halfer

19,824
17
99
186

answered Jun 08 '15 at 14:53

Muhammad Reda

26,379
14
93
105

Thanks for your answer. I don't understand exactly what I have to do. I have to create a new file **@file mySharedCode.js,** and then call it for example, from **player.js**? Or maybe in **menu.js**? – Jordi 45454 Jun 08 '15 at 15:15
Create a new js file **mySharedCode.js** with the controller code as explained in the answer, and include it in your html file (before calling angular). Then inside **player.js** and **app.js** call the controller like so: `sharedModule.controller('menuController', MySharedCode.menuController);` – Muhammad Reda Jun 08 '15 at 15:20
I've tryed your code, without much success. I've linked the **mySharedCode.js** before calling angular, and I've put the sharedModule.controller in diferent parts of **player.js** and the same problem persists: `InteractiveController is not a function`. Ah, the shared controller **always** worked, because I have an alert() here, and it shows the message on the screen. – Jordi 45454 Jun 08 '15 at 15:52
Create a plunker / fiddle / jsBin and share the link. – Muhammad Reda Jun 08 '15 at 15:54
Here you have all afected documents: [link](http://plnkr.co/edit/scdNvRY1ynVKhezQ4FXy?p=catalogue) – Jordi 45454 Jun 08 '15 at 16:14
inside **menu2.js** remove this block of code `sharedModule.controller('menuController', ...` and add this line `sharedModule.controller('menuController', MySharedCode.menuController);` – Muhammad Reda Jun 08 '15 at 16:21
ok, Now document **mySharedCode.js** prints the alert, but the beautiful `InteractiveController is not a function` error message still persists. – Jordi 45454 Jun 08 '15 at 16:28

Same controller for multiple ng-app

1 Answers1