AngularJS未知提供程序错误消息

Question

I have an angular app that will not load and is returning the error message:

Error: [$injector:unpr] Unknown provider: navigatorProvider <- navigator <- LayoutController

This is ever since I introduced a service I have this registered on the controller, but it still not working. The controller referenced is:

(function () {
    "use strict";
    angular.module("HtJobPortal").controller("LayoutController",LayoutController);

    LayoutController.$inject = ["$scope", "navigator"];

    function LayoutController($scope, navigator){      
        var layout = this;

        // Layout
        layout.loadTemplate = function() {
            return navigator.loadTemplate();
        }

        // Initialise pending and set roles
        layout.init = function () {
            // Global Start up
        };
        layout.init();
    }

})();

This is the service:

(function() {

    var navigator = angular.module('navigator', []);
    navigator.factory('loadTemplate', function () {
        var loadTemplate = this;

        // Page Directory
        navigator.login = "templates/login.html";
        navigator.dashboard = "templates/dashboard.html";
        navigator.job = "templates/job.html";

        // Template switcher
        navigator.loadTemplate = function () {
            return navigator.login;
        }

        return loadTemplate;
    });

}());

And the app page just in case I've missed something there:

(function () {
    'use strict';

    angular.module('HtJobPortal', []);
})();

Answer 1

You are add the dependencies when defining the HtJobPortal module

//define dependencies
angular.module('HtJobPortal', ['navigator']);

In the controller, you need to inject the factory in controller

(function () {
    "use strict";
    angular.module("HtJobPortal").controller("LayoutController",LayoutController);

    LayoutController.$inject = ["$scope", "loadTemplate"];

    function LayoutController($scope, loadTemplate){      
        var layout = this;
        // Layout
        layout.loadTemplate = function() {
            return loadTemplate.loadTemplate();
        }

        // Initialise pending and set roles
        layout.init = function () {
            // Global Start up
        };
        layout.init();
    }
})();

And define factory as

(function () {
    angular.module('navigator', []).factory('loadTemplate', function () {
        // Page Directory
        var login = "templates/login.html";
        var dashboard = "templates/dashboard.html";
        var job = "templates/job.html";

        return {
            // Template switcher
            loadTemplate: function () {
                return login;
            }
        };
    });
})();

Answer 2

To create a factory\\service\\controllers , you generally don't require a new module every time. It's preferred to declare one module and register your controller\\factory\\services to same.

In your case, you can do it like:

(function() {
    angular.module('HtJobPortal', [..define other module dependency here..]);
    angular.module('HtJobPortal')
   .factory('loadTemplate', function () {
        var loadTemplate = {};    
        // Page Directory
        loadTemplate.login = "templates/login.html";
        loadTemplate.dashboard = "templates/dashboard.html";
        loadTemplate.job = "templates/job.html";

        // Template switcher
        loadTemplate.loadTemplate = function () {
            return loadTemplate .login;
        }    
        return loadTemplate; // return object from factory
    })
    .controller("LayoutController",LayoutController);    
    LayoutController.$inject = ["$scope", "loadTemplate"]; //inject factory   
    function LayoutController($scope, loadTemplate){      
        var layout = this;    
        // Layout
        layout.loadTemplate = function() {
            return loadTemplate.loadTemplate(); // call factory method
        }

        // Initialise pending and set roles
        layout.init = function () {
            // Global Start up
        };
        layout.init();
    };
}());