Multiple controllers working within ngRoute example

Question

I have a small ngRoute example I am trying that to use multiple applications and controllers with. The first app/controller is for the main page, while the second set of app/controller is for the html that ngRoute loads up after pressing a button. However, it doesn't seem to be working. Code below:

Main Module

var app = angular.module("MainModule", ["ngRoute"]);

Main Controller

app.controller("MainController", function ($scope) {

});

app.config(function ($routeProvider) {
    $routeProvider
        .when('/customers', {
            templateUrl: "customers.html",
            controller: "CustomerController"
    })
});

Customer Module

var CustomerModule = angular.module("CustomerModule", []);

Customer Controller

CustomerModule.controller("CustomerController", function ($scope) {

$scope.Test = "Hey";

$scope.CustomerArray = [
    { "firstName" : "John", "lastName" : "Williams", "Occupation" : "Fireman"     },
    { "firstName" : "Louis", "lastName" : "Abrams", "Occupation" : "Policeman" }
    ]   
});

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
    <script src="scripts/MainModule.js"></script>
    <script src="scripts/MainController.js"></script>
    <link rel="stylesheet" type="text/css" href="MyCSS.css">
</head>
<body>


    <div ng-app="MainModule">
        <div id="TopDiv">Main Module</div>
        <a href="#/customers"><input type="button" value="Load Customers" /> </a>

        <div ng-view></div>

    </div>

</body>
</html>

customers.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <script src="scripts/CustomerModule.js"></script>
    <script src="scripts/CustomerController.js"></script>
</head>
<body>
    <div ng-app="CustomerModule" ng-controller="CustomerController">
        {{Test}}

            <ul>
                <li ng-repeat="x in CustomerArray">{{x.firstName x.lastName x.Occupation}}</li>
            </ul>

    </div>
</body>
</html>

Long bits of code there, but hopefully simple code. The output when I press the "Load Customer" button is literally {{Test}} with no array data to follow.

I am just now learning angular, so any help with this issue I would appreciate. I am just doing this for fun, to try to learn. So I suppose the issue is not pressing. :) Thanks!

the problem here is that ng-route is expecting to load a *parial* into the `ng-view`, but your customers.html file isn't a partial, it contains it's own `ng-app`. also, the `controller` parameter in the `$routeProvider` instantiates a controller object from the same module that `$routeProvider` is configured with, but your `CustomerController` is in a completely different module. On top of that, you should never use `controller` in the JavaScript and `ng-controller` in the HTML at the same time, since they both load a unique instance of the controller. — Claies, Aug 25 '16 at 15:33
There are a lot of mistakes here, in other words. I can put together a working sample, but it will take a bit of time. — Claies, Aug 25 '16 at 15:35
Thank you very much for your time and your comment. I am learning a lot of my mistakes just from posting this example. If you are able to provide a working sample, that would be great! If not, that is okay too, as I understand that is a lot of effort. This is just for learning and experimenting on my behalf. Thank you again. — mherr, Aug 25 '16 at 16:25

score 1 · Accepted Answer · answered Aug 25 '16 at 16:45

I wrote out a working example using the code from the question as a base. There are quite a few adjustments that were made, so I will list each piece with a bit of explanation.

It is not necessary for each "page" to have it's own module. However, it is not a bad practice. To support the design you have here of one module for each view, I made the following changes:

Include the CustomerModule as a dependency in the MainModule (MainModule.js):

var app = angular.module("MainModule", ["ngRoute", "CustomerModule"]);

Load ALL scripts in the index.html:

<script src="scripts/MainModule.js"></script>
<script src="scripts/MainController.js"></script>

<script src="scripts/CustomerModule.js"></script>
<script src="scripts/CustomerController.js"></script>

With these changes, the $routeProvider is able to locate the CustomerController and instantiate it during a route change. The customers.html now does not have to create a controller, and can be stripped down to a complete partial. Also, the expression used in customers.html needed to be changed, and broken down into individual expressions for each property.

The final customers.html:

{{Test}}

<ul>
  <li ng-repeat="x in CustomerArray">{{x.firstName}} {{x.lastName}} {{x.Occupation}}</li>
</ul>

Complete working sample on plnkr.co: http://plnkr.co/edit/EjwW9Fsc2DPhBejUETwB?p=preview

This works perfectly. Thank you very much! Clear and concise, and everything split into separate files which seems to be the best idea for long run coding. And that example site is great! Bravo! — mherr, Aug 25 '16 at 20:45

vedmaque · Answer 2 · 2016-08-25T00:13:28.357

I'm not sure, but the problem is in your MainModule. It should be like this or so:

var app = angular.module("MainModule", ["ngRoute"]);

When you calling angular.module with only one parameter - it's only trying get module, not create.

And customers.html should only contains parts of you html, not full:

Full customers.html

{{Test}}

<ul>
    <li ng-repeat="x in CustomerArray">{{ x.firstName }} {{ x.lastName }} {{ x.Occupation }}</li>
</ul>

And add move customer js files to index.html:

<script src="scripts/MainModule.js"></script>
<script src="scripts/MainController.js"></script>
<script src="scripts/CustomerModule.js"></script>
<script src="scripts/CustomerController.js"></script>
<link rel="stylesheet" type="text/css" href="MyCSS.css">

Hope, it helps.

Thank you for your time and your comment. You are spot on about the MainModule line, my mistake on that! Sadly though, with your suggested changes, the result is still the same. It doesn't seem like it should be this difficult! Thanks again. — mherr, Aug 25 '16 at 01:57

Multiple controllers working within ngRoute example

2 Answers2