Uncaught Error: [$injector:nomod] while Angularjs separating code into Controller and Service files

Question

I'm trying to split the code into Controller and Service files as below.

Module.js

    /// <reference path="../angular.js" />
    /// <reference path="../angular-resource.js" />
    var IM_Mod_app;
    (function () {
  //   IM_Mod_app = angular.module('IM_ng_app', []);
    IM_Mod_app = angular.module('IM_ng_app', ['IM_Mod_app.controllers']);
})();

Controller.js

    /// <reference path="../angular.js" />
    /// <reference path="../angular-resource.js" />
    /// <reference path="module.js" />
    /// <reference path="service.js" />

   // angular.module('IM_Mod_app.controllers', []);
    angular.module('IM_Mod_app.controllers').controller('IM_Ctrl', ['$scope', '$http', 'MaintenanceService', function ($scope, $http, MaintenanceService) {

        IM_Ctrl.$inject = ['$scope', '$http']; var PlantId = "DFC";

        loadRecords();

            function loadRecords() {

                var promiseGet = MaintenanceService.GetAllFlavors();

                promiseGet.then(function successCallback(response) {
                    alert(response.data);
                    $scope.flavours = response.data;
                }, function errorCallback(response) {      
                });
            }

            function onFlavorChange() {
                var promiseonchange = MaintenanceService.onchangeflr();

                promiseonchange.then(function successCallback(response) {
                   // alert(response.data);
                    $scope.items = response.data;
                }, function errorCallback(response) {  });
            }
        }]);

Service.js:

/// <reference path="../angular.js" />
/// <reference path="../angular-resource.js" />
/// <reference path="module.js" />
/// <reference path="controller.js" />

IM_Mod_app.service("MaintenanceService", function ($http) {

    this.GetAllFlavors = function () {
        //alert("service");
        return $http({
            method: 'GET',
            url: 'http://localhost:55762/api/ItemMaintenance/GetAllFlavors',
            params: { Plant_Id: "DFC" }
        })
    }

    this.onchangeflr = function () {
        $http({
            method: 'GET',
            url: 'http://localhost:55762/api/ItemMaintenance/GetAllFilteredItems',
            params: { Plant_Id: PlantId, Flavor_Id: flv, Variant_Id: '', Brand_Id: '' }
        })
    }
});

<body ng-app="IM_ng_app">
    <table ng-controller="IM_Ctrl">
        <tr>
            <td>
                <select ng-model="flv" ng-options="flv.FLAVOR_ID for flv in flavours" ng-change="onFlavorChange(flv.FLAVOR_ID)">
                    <option value="">Select Flavor</option>
                </select>
</td>
</tr>
</table>
</body>

Service.js:6 Uncaught ReferenceError: IM_Mod_app is not defined at Service.js:6

Getting error message as:

"angular.js:138 Uncaught Error: [$injector:nomod] Module 'IM_Mod_app.controllers' is not available! You either misspelled the module name or forgot to load it."

user2522503 · Accepted Answer · 2019-03-17 10:20:43Z

0

Try like this.

Module.js

/// <reference path="../angular.js" />
/// <reference path="../angular-resource.js" />//
var IM_Mod_App = angular.module("IM_ng_App", []);

Controller.js

/// <reference path="../angular.js" />
/// <reference path="../angular-resource.js" />
/// <reference path="module.js" />
/// <reference path="service.js" />
IM_Mod_App.controller("IM_ng_Ctrl", function ($scope, $http, IM_Service) { alert("Hi controller");... });

Service.js

/// <reference path="../angular.js" />
/// <reference path="../angular-resource.js" />
/// <reference path="module.js" />
/// <reference path="controller.js" />
var IM_Mod_App = angular.module("IM_ng_App");
IM_Mod_App.factory('IM_Service', function ($http) {
        alert("Hi service");
});

Try to cross verify the names of the controller and module.

answered Mar 17, 2019 at 10:20

user2522503

1783 silver badges13 bronze badges

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

Comments

Guy Yogev · Accepted Answer · 2019-03-13 14:30:00Z

0

I think you are missing some injections.

At the app module.

IM_Mod_app = angular.module('IM_ng_app', ['IM_Mod_app.controllers']); }

At the controller (after $http)

angular.module('IM_Mod_app.controllers', []).controller('IM_Ctrl', ['$scope', '$http', 'MaintenanceService', function ($scope, $http, MaintenanceService) {

edited Mar 13, 2019 at 14:30

answered Mar 13, 2019 at 10:45

Guy Yogev

8695 silver badges14 bronze badges

6 Comments

user11130182 Over a year ago

Thxs looking into it.. still having issue with error msg: Uncaught Error: [$injector:nomod] Module 'IM_Mod_app.controllers' is not available!.

Guy Yogev Over a year ago

Can you please add the code that defines IM_Mod_app module?

Guy Yogev Over a year ago

'IM_ng_app' should inject 'IM_Mod_app.controllers'. I updated the answer.

user11130182 Over a year ago

Thxs. Still same issue exits.

Guy Yogev Over a year ago

mmm... sorry to hear that. It's most likely an issue at this area. It may be the order in which you define the modules, a missing injection, or some error within a module.

|

Collectives™ on Stack Overflow

Uncaught Error: [$injector:nomod] while Angularjs separating code into Controller and Service files

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related