javascriptangularjsangularjs-serviceangularjs-controllerangularjs-module

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

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."

Solution

  • 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.