AngularJS using two controllers in the same view

Question

I am trying to use make a angularJS web app. I bought a template, which has all of its controllers, routes and directives in a single file app.js

This is my first angularJS app, or actually my first front-end work. Trying to be a Full Stack geek now.. :D

So here is now where I am stuck. The app works completely fine, but when I add a new controller AuthCtrl which in another file auth.js it gives me an error saying AppCtrl not found. Following HTML will make you understand it better. I have pointed out where and what is the exact problem in the code snippet.

<!doctype html>
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>PropheSee Dashboard</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic" rel="stylesheet" type="text/css">
    <!-- Needs images, font... therefore can not be part of main.css -->
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="bower_components/weather-icons/css/weather-icons.min.css">
    <!-- end Needs images -->

        <link rel="stylesheet" href="styles/main.css">

</head>
<body data-ng-app="app" id="app" class="app" data-custom-page="" data-off-canvas-nav="" data-ng-controller="AppCtrl" data-ng-class=" {'layout-boxed': admin.layout === 'boxed' } ">

    <div data-ng-controller="AuthCtrl" data-ng-app="app">
       <ul>
        <li ng-repeat="phone in phones">
          {{phone.name}}
          <p>{{phone.snippet}}</p>
        </li>
      </ul>
    </div>
    <%-body%>

    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="scripts/vendor.js"></script>

    <script src="scripts/ui.js"></script>

    <script src="scripts/app.js"></script>


    <!-- 
     This is where the problem is. As soon as I add the following line to use AuthCtrl,
     It says AppCtrl not found. Is it that I can't use more than one import for controllers? Or is there a problem in the way I am doing the imports?
    -->
    <script src="scripts/controllers/auth.js"></script>

</body>

Edit - AuthCtrl

var app = angular.module('app', []);

app.controller('AuthCtrl', function ($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

App.js snippet

(function() {
"use strict";
angular.module("app.chart.ctrls",[])
    .controller("chartCtrl",[
        "$scope",
        function($scope){ ....

Can you put all your files into plnkr? (that can help troubleshoot your issue) — Mars Robertson
– Mars Robertson, Commented Jun 17, 2014 at 21:04
Okay I will try, never used it before. Also the app.js file from template is about 2500 lines big. :( YOu think I can still pull it out? — Sambhav Sharma
– Sambhav Sharma, Commented Jun 17, 2014 at 21:06
Also when I remove the part that uses AppCtrl, the AuthCtrl part works fine too. Its just that both of them are not working together. If that gives any idea.. — Sambhav Sharma
– Sambhav Sharma, Commented Jun 17, 2014 at 21:07
Show us how the auth controller is defined. I'm pretty sure you are also redeclaring the angular app in there, overriding everything in the app.js file. — HaukurHaf
– HaukurHaf, Commented Jun 17, 2014 at 21:10
Hell yeah! I think you might be right. Will update the code. Do put it as an answer if it is the problem. — Sambhav Sharma
– Sambhav Sharma, Commented Jun 17, 2014 at 21:14

HaukurHaf · Accepted Answer · 2014-06-17 21:42:15Z

1

The problem is that you are doing this in the auth.js file:

var app = angular.module('app',.......

Thereby declaring a new app or overwriting the one declared in the app.js

Instead you should be using the same app variable that is defined in the app.js file.

You need to declare the app and store a reference to it in a variable:

var yourApp = angular.module("app.controllers",[.........]);

Then to add controllers, assign them to the variable which "holds" the app definition. This is how the chartCtrl controller should be defined on the yourApp application:

yourApp.controller("chartCtrl",[
        "$scope",
        function($scope){ ....

Then your controller in your auth.js file:

yourApp.controller('AuthCtrl', function ($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

edited Jun 17, 2014 at 21:42

answered Jun 17, 2014 at 21:21

HaukurHaf

13.9k6 gold badges47 silver badges62 bronze badges

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

4 Comments

Sambhav Sharma Over a year ago

They use angular.module("app.controllers",[]).controller() to define AppCtrl, but when I do the same for AuthCtrl it gives me the same error. So I can see that the module is again getting replaced. So how do I create a new module? If you want more code I can add it

HaukurHaf Over a year ago

Paste the first lines of the app.js in your question.

HaukurHaf Over a year ago

Just updated my answer. Hope you understand. I believe you might have to remove the (function() { ......... }); surrounding the definition in the app.js file for this to work.

Sambhav Sharma Over a year ago

thank you for your time, you diagnosed the problem promptly. Will make the changes you suggested. That's the right way to do it. But for now I found out that the app.js file also had a definition for the module, with the dependencies. I just added a dependency to the auth controller for now. I guess the developers of the template haven't written it in a very clean way.. :D

Collectives™ on Stack Overflow

AngularJS using two controllers in the same view

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related