We Keep Coding

Multiple directives asking for template on

Error: [$compile:multidir] Multiple directives [statbox, statbox] asking for template on:
(On console)
Inside index.html
<script src="js/dashboard/dashboard.module.js"></script>
<script src="js/dashboard/dashboard.component.js"></script>
<script src="js/dashboard/statbox.component.js"></script>
Inside dashboard.module.js
var dashboardModule = angular.module('dashboard', ['ngRoute']);
Inside dashboard.component.js
angular.module('dashboard').component('dashboard', {
templateUrl: 'templates/dashboard/dashboard.template.html',
controller: ['$scope', '$routeParams', '$http', '$rootScope', '$log', function DashboardController($scope, $routeParams, $http, $rootScope, $log) {
...stuff NOT REFERENCING STATBOX by any means...
}]
});
Inside statbox.component.js
angular.module('dashboard').component('statbox', {
templateUrl: 'templates/dashboard/statbox.template.html',
controller: ['$http', '$rootScope', '$log', function StatboxController($http, $rootScope, $log) {
... some random get request ...
}]
});
And inside app.js
var app = angular.module('buttonMasher', ['ngRoute', 'dashboard', ...]);
Inside dashboard.template.html
... stuff ...
<div id="history">
... stuff ...
<p><b>Statbox</b></p>
<statbox></statbox>
</div>
Inside statbox.template.html
<div id="statbox">
<p>{{$ctrl.statboxText}}</p>
What am I doing wrong and why do I get this multiple directives error?
Whenever I comment out <script src="js/dashboard/statbox.component.js"></script>
from the index.html everything works but statbox controller is not getting loaded.
(Full project is here: Github: carloworks/masher - One can clone and run spring with profile "dev" enabled.)

Error: [$compile:multidir] Multiple directives [statbox, statbox]
asking for template on
Most likely it's because you included the .js twice in your index.html and the compiler at the time of binding the directive doesn't know which template to choose.
you should check:
the compiled html page to see if you included twice statbox.js
make sure you don't have multiple spots in your code where you
define the same .component('statbox',{})

Late to the party here but in my case it happened because I stupidly named the directive the same thing as the variable that was being passed into it so when the directive was being used it was trying to recursively include itself!

I had this issue with Typescript. I renamed some ts files and visual studio (2015) kept the old generated js files. Somehow, angular used both new and old js files, and I ended up with this error. I did a clean (which deletes all generated js files), build and it worked!

AngularJS minified js files not working

I minified and merged all js files in one and included in html nothing is working in site.
There are so many files in js and I dont want include all one by one, so modified and merged all in one.
Is there any other way to decrease number of http calls for js files.

When minifying your AngularJS documents it is important that you follow the docs for dependancy injection, otherwise your code can break. You should make sure you are using the preferred array method an example can be seen below:
someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
// ...
}]);
As seen in the official Angular JS docs: https://docs.angularjs.org/guide/di.

It seems, that's a reason of implicit dependency injection. According to the Angular JS documentation:
Careful: If you plan to minify your code, your service names will get renamed and break your app.
Use strict dependency injection instead. For example:
angular
.module("MyModule")
.controller("MyCtrl", ["$scope", "$timeout", function ($scope, $timeout) {
...
}]);
More over, consider using ng-annotate that's much easier:
angular
.module("MyModule")
.controller("MyCtrl", function ($scope, $timeout) {
"ngInject";
...
});

To follow up on #dayle-salmon 's answer, if you have your controllers like this
app.controller('DemoCtrl', function(dependency1, dependency2){
// controller code
});
Change it to
app.controller('DemoCtrl', ['dependency1', 'dependency2', function(dependency1, dependency2){
// controller code
}]);
Reason JS minificators usually change the name of the dependency that is injected. And Angular wont have a clue on what the dependency is. So, you manually declare them so it won't cause a problem after minification!

Why controllers is being created 2 times in my AngularJS + RequireJS application?

I am creating small application called puzometr. It is for educational needs only. I want to create this application using AngularJS. Also, I want to use RequireJS as module system.
I have strange problem. I created my test controller and I got problem: controller initialization fires two times.
Firstly, full code available here on GitHub (wait, don't click me, I will explain everything below).
So, problem is in myCtrl.js file. Here is code of this file:
define(['angular'], function (angular) {
var module = angular.module('main.myModule', []);
module.controller('main.myCtrl', function ($scope) {
console.log($scope.$id);
$scope.bob = function () {
}
})
});
It is included in main/controllers/controllers.js by this:
define(['app', 'main/controllers/myCtrl'], function (app) {
var module = angular.module('main.controllers', ['main.myModule']);
});
This file included in main.js by this code:
angular.module('main', ['ngRoute', 'main.services', 'main.controllers', 'main.directives']);
And main.js is included into app.js:
var app = angular.module('myApp', ['ngRoute', 'main', 'common']);
So, I incidentally noticed, that function definition in myCtrl controller fired two times. I put console.log there and saw this:
Can you please explain me why is this happens? Why controller is being initialised two times?
Also, I have this in ng-inspector:
So one scope is created as child for another scope. Notice, that scope with id 3 has correct controller name.

If you use ng-route to register controllers and bind them with views, then don't add them again using attributes in your html files.

Angular.js - can't inject external module

I'm trying to make the simplest possible website setting, where I have an Angular.js app with single module depending on one external module (for example Restangular).
I don't know why, but I can not get it working. I'm getting get this kind of error:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.17/$injector/unpr?p0=restangularProvider%20%3C-%20restangular
Actually, it doesn't matter that it's restangular - I've tried it with other modules and the result was analogical.
I have created a plunker that shows my problem:
http://plnkr.co/edit/3ZUoDYtd4sVTT7nLpURi?p=preview
But there is not that much code - I will paste it here too.
In my index.html file I include angular.js, lodash.js (required by restangular), restangular.js and my application's script.js files with tags.
This is the body of my html:
<body ng-app="example" ng-controller="AppCtrl">
<p>Take a look into console... Restangular can not get injected. What am I doing wrong?</p>
</body>
And this is the content of script.js:
var app = angular.module( 'example', ['restangular'])
app.controller('AppCtrl', ['$scope', 'restangular', function($scope, Restangular) {
console.log(Restangular);
}]);
As a note - in the console I can do this:
angular.module('restangular')
but, this does not work:
angular.injector(["ng"]).get('restangular')
It seems that I'm missing something basic about Angular.js. Help will be appreciated...

Could it be this?
app.controller('AppCtrl', ['$scope', 'Restangular', function($scope, Restangular) {
Restangular hast to be written with a capital R
You wrote
app.controller('AppCtrl', ['$scope', 'restangular', function($scope, Restangular) {
At least now I see in the console
URL visited /edit/3ZUoDYtd4sVTT7nLpURi
editor-0.7.30.js
Object { configuration={...}, requestParams={...}, defaultHeaders={...}, more...}

Unknown provider: $modalProvider <- $modal error with AngularJS

I keep receiving this error as I'm trying to implement bootstrap Modal window. What could be the cause of it? I've copy/pasted everything from http://angular-ui.github.io/bootstrap/#/modal here.

This kind of error occurs when you write in a dependency for a controller, service, etc, and you haven't created or included that dependency.
In this case, $modal isn't a known service. It sounds like you didn't pass in ui-bootstrap as a dependency when bootstrapping angular. angular.module('myModule', ['ui.bootstrap']); Also, be sure you are using the latest version of ui-bootstrap (0.6.0), just to be safe.
The error is thrown in version 0.5.0, but updating to 0.6.0 does make the $modal service available. So, update to version 0.6.0 and be sure to require ui.boostrap when registering your module.
Replying to your comment: This is how you inject a module dependency.
<!-- tell Angular what module we are bootstrapping -->
<html ng-app="myApp" ng-controller="myCtrl">
js:
// create the module, pass in modules it depends on
var app = angular.module('myApp', ['ui.bootstrap']);
// $modal service is now available via the ui.bootstrap module we passed in to our module
app.controller('myCtrl', function($scope, $uibModal) {
});
Update:
The $modal service has been renamed to $uibModal.
Example using $uibModal
// create the module, pass in modules it depends on
var app = angular.module('myApp', ['ui.bootstrap']);
// $modal service is now available via the ui.bootstrap module we passed in to our module
app.controller('myCtrl', function($scope, $uibModal) {
//code here
});

5 years later (this would not have been the problem at the time):
The namespacing has changed - you may stumble across this message after upgrading to a newer version of bootstrap-ui; you need to refer to $uibModal & $uibModalInstance.

Just an extra side note for an issue I also experienced today:
I had a similar error "Unknown provider: $aProvider" when I turned on minification/uglify of my source code.
As mentioned in the Angular docs tutorial (paragraph: "A Note on Minification") you have to use the array syntax to make sure references are kept correctly for dependency injection:
var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];
For the Angular UI Bootstrap example you mention you should this replace this:
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
/* ...example code.. */
}
with this array notation:
var ModalInstanceCtrl = ['$scope', '$modalInstance', 'items', function ($scope, $modalInstance, items) {
/* copy rest of example code here */
}];
With that change my minified Angular UI modal window code was functional again.

The obvious answer for the provider error is the missing dependency when declaring a module as in the case of adding ui-bootstrap. The one thing many of us do not account for is the breaking changes when upgrading to a new release. Yes, the following should work and not raise the provider error:
var app = angular.module('app', ['ui.router', 'ngRoute', 'ui.bootstrap']);
app.factory("$svcMessage", ['$modal', svcMessage]);
Except when we are using a new version of ui-boostrap. The modal provider now is defined as:
.provider('$uibModal', function() {
var $modalProvider = {
options: {
animation: true,
backdrop: true, //can also be false or 'static'
keyboard: true
},
The advise here is once we have make sure that the dependencies are included and we still get this error, we should check what version of the JS library we are using. We could also do a quick search and see if that provider exists in the file.
In this case, the modal provider should now be as follows:
app.factory("$svcMessage", ['$uibModal', svcMessage]);
One more note. Make sure that your ui-bootstrap version supports your current angularjs version. If not, you may get other errors like templateProvider.
For information check this link:
http://www.ozkary.com/2016/01/angularjs-unknown-provider-modalprovider.html
hope it helps.

after checking that I had all dependancies included, I fixed the issue by renaming $modal to $uibmodal and $modalInstance to $uibModalInstance

var ModalInstanceCtrl = ['$scope', '$modalInstance', function ($scope, $modalInstance, items) {
/* copy rest of example code here */
}];