Search code examples
angularjsngroute

One route works but not other two (using AngularJS and RouteProvider)

AngularJS v1.7.4

I am new to AngularJS and creating a simple app but not sure why one route works (shows the static html from a partial file as well as {{message}} correctly), but the other two routes only show static html and not {{message}} which is being set using $scope.message.

Additionally errors such as

The controller with the name 'ContactController' is not registered.

and

The controller with the name 'AboutController' is not registered.

Are seen in the console when trying to go to 'Contact' and 'About' pages respectively.

For the three routes I have three html files and three controller files. I have made sure to include <body ng-app="gmsApp">.

Files are being loaded as 

<script src="./js/bootstrap.bundle.min.js"></script>

<script src="./js/angular.js"></script>
<script src="./js/angular-route.js"></script>

<script src="./js/controllers/about.controller.js"></script>
<script src="./js/controllers/contact.controller.js"></script>
<script src="./js/controllers/home.controller.js"></script>

<link href="./css/bootstrap.min.css" rel="stylesheet" />`

Following advise from other posts I am using the 'regular' js files and not 'minified' versions of angular and angular-route.

The code in main html file is: 

    var app = angular.module("gmsApp", ['ngRoute', 'gmsApp.controllers']);

    app.config(['$routeProvider', function($routeProvider) {
        $routeProvider.
        when('/home', {
            templateUrl: 'partials/home.html',
            controller: 'HomeController'
        }).
        when('/about', {
            templateUrl: 'partials/about.html',
            controller: 'AboutController'
        }).
        when('/contact', {
            templateUrl: 'partials/contact.html',
            controller: 'ContactController'
        }).
        otherwise({
            redirectTo: '/home'
        });
    }]);

/js/controllers/home.controller.js

angular.module('gmsApp.controllers', [])
.controller('HomeController', function ($scope) {
    $scope.message = 'Main page of the app';
});

/js/controllers/about.controller.js

angular.module('gmsApp.controllers', [])
.controller('AboutController', function ($scope) {
    $scope.message = 'This is about us page';
});

/js/controllers/contact.controller.js

angular.module('gmsApp.controllers', [])
.controller('ContactController', function ($scope) {
    $scope.message = 'Contact Us page ...';
});

/partials/home.html

<div ng-controller="HomeController">
    <h3>Home page</h3>
    <p>{{message}}</p>
</div>

/partials/about.html

<div ng-controller="AboutController">
    <h3>About Us</h3>
    <p>{{message}}</p>
</div>

/partials/contact.html

<div ng-controller="ContactController">
    <h3>Contact Us</h3>
    <p>{{message}}</p>
</div>
Solution

  • The error come from the fact that you are recreating your module in each of your controller. This line should be present in only one of your files (could be your main file):

    angular.module('gmsApp.controllers', [])

    Then in "/js/controllers/home.controller.js,"/js/controllers/about.controller.js" and "/js/controllers/contact.controller.js", you should use it like this:

    angular.module('gmsApp.controllers')

    Note that this time you don't use the "[]". The difference between the two is that here you will access the already created module.

    From angularjs docs:

    Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.