AngularJS inject a module in a controller

Question

I am trying to write a reusable component that will handle errors in a consistent way across all my pages. Problem is that I can't inject it in my controller although the component works. Here's some of the code:

app.js

'use strict';


// Declare app level module which depends on filters, and services
angular.module('Popdown', ['Popdown.directives']);

angular.module('Page', ['Popdown']);

directives.js

'use strict';

/* Directives */


angular.module('Popdown.directives', []).
  directive('popdown', function() {
    return {
        scope: {},
        templateUrl: 'partials/popdown.html',
        replace: true,
        compile: function(cElement, attrs) {
            cElement.css('position','absolute');
            var h = cElement.height();
            cElement.css('background-color','black');
            cElement.css('height', '50px');
            cElement.css('margin', '0 auto');
            cElement.css('top', parseInt(-h) + 'px');
        },
        link: function(scope, lElement, attrs) {
            scope.$watch('message', function() {
                lElement.animate({
                    'top': '0px'
                }, {
                    duration: 400,
                    easing: 'swing'
                })
            });
        }
    }
  });

controllers.js

'use strict';

/* Controllers */


var PopdownCtl = function($scope) {
    $scope.notify = function(message) {
        $scope.icon = 'icon-notify';
        $scope.message = message;
    }
}


var IndexCtl = function($scope, Popdown) {
    $scope.error = 'No error yet';

    var msg = Math.random();
    Popdown.notify(msg);

    $scope.throwError = function() {

    }
}

IndexCtl.$inject = ['Popdown'];

index.html

<!doctype html>
<html lang="en" ng-app>
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>
</head>
<body>
  <ul class="menu">
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
  </ul>

  <div ng-view></div>


  <div ng-controller="IndexCtl"></div>

  <div popdown></div>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
  -->
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="lib/angular/angular.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>

I keep getting the following error:

Error: Unknown provider: PopdownProvider <- Popdown
    at Error (<anonymous>)
    at http://localhost:8000/app/lib/angular/angular.js:2652:15
    at Object.getService [as get] (http://localhost:8000/app/lib/angular/angular.js:2780:39)
    at http://localhost:8000/app/lib/angular/angular.js:2657:45
    at getService (http://localhost:8000/app/lib/angular/angular.js:2780:39)
    at invoke (http://localhost:8000/app/lib/angular/angular.js:2798:13)
    at Object.instantiate (http://localhost:8000/app/lib/angular/angular.js:2830:23)
    at http://localhost:8000/app/lib/angular/angular.js:4657:24
    at http://localhost:8000/app/lib/angular/angular.js:4236:17
    at forEach (http://localhost:8000/app/lib/angular/angular.js:117:20)

I am new with AngularJS and I find it pretty cool but seems I'm still a noob...could anybody help me understand what's happening here?

If your goal is just to provide a set of error handling functions across different controllers then you'll be better served by placing them in a service. — KayakDave
– KayakDave, Commented Oct 12, 2013 at 0:09

Community · Accepted Answer · 2017-05-23 10:27:32Z

3

You are missing module specification in the ng-app directive. It should specify a module name as its attribute value.

Since you are planning to have several reusable modules you would probably like to declare a top-level, application module with dependencies on other modules, something like:

angular.module('app', ['Popdown', 'Page']);

and then in your HTML:

<html lang="en" ng-app="app">

I would advice going through this documentation: http://docs.angularjs.org/guide/module and this SO question: https://stackoverflow.com/a/12339707/1418796

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Feb 12, 2013 at 14:10

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

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

2 Comments

user253530 Over a year ago

I tried that and it didn't seem to solve the problem. If possible could you explain in more detail ?

pkozlowski.opensource Over a year ago

@user253530 kind of hard to help more without seeing your code. Maybe you could send a plunker (plnkr.co) with live example of your code?

Collectives™ on Stack Overflow

AngularJS inject a module in a controller

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related