AngularJS inject a module in a controller
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
user253530
Updated on June 13, 2022Comments
-
user253530 almost 2 years
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?