Adding module "angular-hotkeys" to my mean.js app

Question

Just getting started with angular - so hoping I am not missing something absolutely obvious. I am using mean.js (Mongo, Express, Angular, Node stack) and working on a simple to do app to get me started. I am trying to add the angular-hotkeys module to my app.

I installed the module using sudo npm install -g angular-hotkeys --save

I then added ApplicationConfiguration.registerModule('cfp.hotkeys'); to my core.client.module.js file.

And in my config.js file, I added cfp.hotkeys as a dependency:

var ApplicationConfiguration = (function() {

 // Init module configuration options

 var applicationModuleName = 'taskmanager';

 var applicationModuleVendorDependencies = ['ngResource', 'ngCookies',  'ngAnimate',  'ngTouch',  'ngSanitize',  'ui.router', 'ui.bootstrap', 'ui.utils', 'cfp.hotkeys'];

Finally - I bound hotkeys to my controller:

// Lists controller
angular.module('lists').controller('ListsController', ['$scope', '$stateParams', '$location', 'Authentication', 'Lists', 'SelectedList', 'hotkeys',
    function($scope, $stateParams, $location, Authentication, Lists, SelectedList, hotkeys ) {
        $scope.authentication = Authentication;

        console.log('hotkeys');

But every time I load the page I get the following error:

Error: [$injector:unpr] Unknown provider: hotkeysProvider <- hotkeys http://errors.angularjs.org/1.2.22/$injector/unpr?p0=hotkeysProvider%20%3C-%20hotkeys
    at http://localhost:3000/lib/angular/angular.js:78:12
    at http://localhost:3000/lib/angular/angular.js:3792:19
    at Object.getService [as get] (http://localhost:3000/lib/angular/angular.js:3920:39)
    at http://localhost:3000/lib/angular/angular.js:3797:45
    at getService (http://localhost:3000/lib/angular/angular.js:3920:39)
    at invoke (http://localhost:3000/lib/angular/angular.js:3947:13)
    at Object.instantiate (http://localhost:3000/lib/angular/angular.js:3967:23)
    at http://localhost:3000/lib/angular/angular.js:7260:28
    at http://localhost:3000/lib/angular/angular.js:6651:34
    at forEach (http://localhost:3000/lib/angular/angular.js:332:20) <section data-ui-view="" class="ng-scope">

I know I am probably doing something very simple wrong - but for the life of me I can't figure out what it is.

I_Debug_Everything · Accepted Answer · 2014-09-14T06:00:03.773

1

That might be because the module is called cfp.hotkeys not hotkeys, that mean's you're loading the wrong module name in your file.

See the name of module defined here

Update: Install the module using bower instead of using npm and also not globally.

bower install angular-hotkeys --save

edited Sep 14 '14 at 06:00

answered Sep 07 '14 at 05:58

I_Debug_Everything

3,776
4
36
48

Would I use cfp.hotkeys in my ApplicationConfiguration.registerModule or what I use to pass to the controller? (Or both?) Thanks! – Salman Sep 08 '14 at 02:03
Replaced the module name to cfp.hotkeys everywhere I had used hotkeys - no change in the error. – Salman Sep 08 '14 at 03:51
I would recommend clearing browser cache, also I would recommend you to install it via bower install rather than npm – I_Debug_Everything Sep 08 '14 at 06:40
and one more thing I just noticed, you are installing your module globally using -g, that wouldn't install the component in your local node_modules folder, you need to install it without the -g flag – I_Debug_Everything Sep 08 '14 at 06:50
You were right, I backtracked to a stable commit, and then installed it using Bower. If you update your answer I can mark it as correct. Thanks! – Salman Sep 14 '14 at 05:45
I did that, you can verify it. – I_Debug_Everything Sep 14 '14 at 17:34
1

Update: right now there are two angular-hotkeys in bower, and if you install with the above line, you'll get the wrong one. for the cfp.hotkeys lib, I needed to do bower install --save chieffancypants/angular-hotkeys – Simon Lang Jan 15 '15 at 22:47

Adding module "angular-hotkeys" to my mean.js app

1 Answers1