CODEWITHSUNDEEP
javascriptangularjsangularjs-scopeangularjs-ng-route
mherr
mherr

Reputation: 378

Multiple controllers working within ngRoute example

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!

Upvotes: 1

Views: 82

Answers (2)

Claies
Claies

Reputation: 22323

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

Upvotes: 1

vedmaque
vedmaque

Reputation: 323

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.

Upvotes: 0

Related Questions