AngularJS [$injector:modulerr] no mod 'testApp' is not available - javascript

Here is my html file:
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.js"></script>
</head>
<body>
<div ng-controller="TileController" class="finder-info-square">
// code....
</div>
</body>
</html>
And here is my Javascript file:
(function(){
var app = angular.module("testApp", []);
var TileController = function($scope){
// do stuff....
};
app.controller("TileController", ["$scope", TileController]);
})();
And this is the error I keep getting...
Uncaught Error: [$injector:modulerr] Failed to instantiate module testApp due to:
Error: [$injector:nomod] Module 'testApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Does anybody know why this error is occurring? I'm trying to create my own testApp module, but for some reason it keeps throwing this error when creating the module.

You need to include your javascript file as well as the angular library
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.js"></script>
<script src="path/to/myscript.js"></script>

Related

Working with multiple modules in different files in Angular js

Hello and excuse my english.
My problem is this: I'm a beginner to Angular js (currently learning with version 1.4) and I want to separate my application in two modules like this:
app.js
(function(){
var app = angular.module('store', ['store-products', 'ngAnimate', 'ui.bootstrap']);
app.controller('StoreController', function(){
...
});
app.controller('ReviewController', function(){
...
};
this.rateOnClick = function(){
...
};
this.addReview = function(product){
...
};
});
.
.
.
})();
products.js
(function(){
var app = angular.module('store-products', []);
app.directive('productTitle', function(){
...
});
app.directive('productPanels', function(){
...
});
})();
index.html
<html>
<head>
<title>My Angular App!</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
<link href="styles.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
<script src"products.js"></script>
...
</html>
All of my files are in the same folder. app.js is the primary module, so as far I understand the includes are fine, but I still get the error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module store due to:
Error: [$injector:modulerr] Failed to instantiate module store-products due to:
Error: [$injector:nomod] Module 'store-products' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Can't someon figure out why this is happening ?
LOL, just figured out, the problem was the line:
<script src"products.js"></script>
Fixed like this:
<script src="products.js"></script>
You need to include your products script before your app script.
Do not include store-products in your app.js code because in this [ ] we add directives and there is no directive name 'store-products'

Error: $injector:modulerr Module Error on ui.boostrap dependency injection

I have been banging my head against the wall for a while now on this. I am trying to include UI-Bootstrap with my angular application. Unfortunately I keep getting this error when I try to include the ui.bootstrap dependency.
Error: $injector:modulerr
Module Error
Failed to instantiate module filtraApp due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=u...)
at Error (native)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:6:416
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:38:391
at n (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:7:333)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:37:488)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:38:134
at n (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:7:333)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:37:488)
at eb (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:41:249)
at c (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:19:463
Here is the top of my index.html file:
<html>
<head>
<meta charset="UTF-8">
<title>Filtra</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"/>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-0.14.3.js" type="text/javascript"></script>
And here is the top of my app.js file:
var app = angular.module("filtraApp", ['ui.bootstrap']);
Does anyone know what I am doing wrong here? I am happy to include more code if it helps? I should note that the whole application works as soon as I switch to this in my app.js file:
var app = angular.module("filtraApp", []);
Thanks in advance!

Unable to load ui.bootstrap module

I have a problem loading ui.bootstrap module in angular - I get the following error message and angular won't start:
Uncaught Error: [$injector:modulerr] Failed to instantiate module mailingexchangeApp due to:
Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap due to:
Error: [$injector:nomod] Module 'ui.bootstrap' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
This is how I load the module:
var exampleApp = angular.module('exampleApp', ['ui.bootstrap']).config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[').endSymbol(']]');
});
And this is what libraries I include, all in head section:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="/js/controllers.js"></script>
<script src="/js/ui-bootstrap-tpls-0.13.2.min"></script>
<script src="/js/modernizr-2.6.2.min.js"></script>
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/tablesorter/jquery.tablesorter.js"></script>
<script src="/js/tablesorter/tables.js"></script>
<script src="/js/jquery-ui.min.js"></script>
What's wrong? How can I solve this?
You are loading the actual js file, in your html, after you are attempting to access it:
<script src="/js/controllers.js"></script>
<script src="/js/ui-bootstrap-tpls-0.13.2.min"></script>
Any code you want to reference in controller.js, needs to be loaded before controllers.js.
So the easiest fix is to swap their position in your HTML. But it's likely that the other files will also need to be loaded first.

How to put a services on angularjs?

I'm trying to write a module on angular js for put my service (file: utils/productos.js) then load it as a dependency for my module ventas (ventas/ventas.js) but
I get the next error:
Error: [$injector:nomod] Module 'utils.producto' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.10/$injector/nomod?p0=utils.producto angular.js:63:11
Error: [$injector:modulerr] Failed to instantiate module webui due to:
[$injector:modulerr] Failed to instantiate module utils.producto due to:
[$injector:nomod] Module 'utils.producto' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.10/$injector/nomod?p0=utils.producto
minErr/<#http://localhost/cat-dog/web/app/js/angular.js:63:12
module/<#http://localhost/cat-dog/web/app/js/angular.js:1764:1
ensure#http://localhost/cat-dog/web/app/js/angular.js:1688:38
module#http://localhost/cat-dog/web/app/js/angular.js:1762:1
loadModules/<#http://localhost/cat-dog/web/app/js/angular.js:4094:22
forEach#http://localhost/cat-dog/web/app/js/angular.js:323:11
loadModules#http://localhost/cat-dog/web/app/js/angular.js:4078:5
loadModules/<#http://localhost/cat-dog/web/app/js/angular.js:4095:40
forEach#http://localhost/cat-dog/web/app/js/angular.js:323:11
lo
app.js
var app = angular.module('webui', ['ngRoute', 'utils.producto', 'ventas']);
main.html
<script type="text/javascript" src="ventas/ventas.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="utils/productos.js"></script>
ventas/ventas.js
angular.module('ventas', ['ngRoute', 'utils.producto'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/ventas', {
templateUrl: 'ventas/ventas.html',
controller: 'VentasCtrl'
});
}])
utils/producto.js
angular.module('utils.producto').factory("buscadorProductos", buscadorProductos).factory("autocompProductos", autocompProductos);
function buscadorProductos($http) {
..
Define service as module first like angular.module('utils.producto',[])
Code
angular.module('utils.producto',[]).factory("buscadorProductos", buscadorProductos).factory("autocompProductos", autocompProductos);
function buscadorProductos($http) {

angular.js:Error: $injector:modulerr when ngsanitize used

Here is the code for my app.js
I have include all the required files for angular. It is showing an error, but only when I include the ngSanitize module.
<script src="resources/scripts/ext/angular-1.2.16/angular.min.js"></script>
<script src="resources/scripts/ext/angular-1.2.16/angular-resource.min.js"></script>
<script src="resources/scripts/ext/angular-1.2.16/angular-route.min.js"></script>
<script src="resources/scripts/ext/angular-1.2.16/angular-sanitize.min.js"></script>
App.js
'use strict';
angular.module('zinapp-db-app', [ 'ngRoute','ngResource','ngSanitize'])
Here is error
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.16/$injector/modulerr?p0=zinapp-db-app&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.16%2F%24injector%2Fmodulerr%3Fp0%3DngSanitize%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.16%252F%2524injector%252Fnomod%253Fp0%253DngSanitize%250At%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252FZinappViewBeta%252Fresources%252Fscripts%252Fext%252Fangular-1.2.16%252Fangular.min.js%253A6%253A443%250AYc%252Fb.module%253C%252F%253C%252Fb%255Be%255D%253C%2540http%253A%252F%252Flocalhost%253A8080%252FZinappViewBeta%252Fresources%252Fscripts%252Fext%252Fangular-1.2.16%252Fangular.min.js%253A20%253A254%250AYc%252Fb.module%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252FZinappViewBeta%252Fresources%252Fscripts%252Fext%252Fangular-1.2.16%252Fangular.min.js%253A20%253A142%250Ae%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252FZinappViewBeta%252Fresources%252Fscripts%252Fext%252Fangular-1.2.16%252Fangular.min.js%253A33%253A1%250Aq%2540http%253A%252F%252Flocalhost%253A8080%252FZinappViewBeta%252Fresources%252Fscripts%252Fext%252Fangular-1.2.16%252Fangular.min.js%253A7%253A278%250Ae%2540http%253A%252F%252Flocalhost%253A8080%252FZinappViewBeta%252Fresources%252Fscripts%252Fext%252Fangular-1.2.16%252Fangular.min.js%253A32%253A445%250Ae%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252FZinappViewBeta%252Fresources%252Fscripts%252Fext%252Fangular-1.2.16%252Fangular.min.js%253A33%253A1%250Aq%2540http%253A%252F%252Flocalhost%253A8080%252FZinappViewBeta%252Fresources%252Fscripts%252Fext%252Fangular-1.2.16%252Fangular.min.js%253A7%253A278%250Ae%2540http%253A%252F%252Flocalhost%253A8080%252FZinappViewBeta%252Fresources%252Fscripts%252Fext%252Fangular-1.2.16%252Fangular.min.js%253A32%253A445%250Aac%2540http%253A%252F%252Flocalhost%253A8080%252FZinappViewBeta%252Fresources%252Fscripts%252Fext%252Fangular-1.2.16%252Fangular.min.js%253A36%253A32%250A%2524b%252Fc%2540http%253A%252F%252Flocalhost%253A8080%252FZinappViewBeta%252Fresources%252Fscripts%252Fext%252Fangular-1.2.16%252Fangular.min.js%253A17%253A429%250A%2524b%2540http%253A%252F%252Flocalhost%253A8080%252FZinappViewBeta%252Fresources%252Fscripts%252Fext%252Fangular-1.2.16%252Fangular.min.js%253A18%253A133%250AWc%2540http%253A%252F%252Flocalhost%253A8080%252FZinappViewBeta%252Fresources%252Fscripts%252Fext%252Fangular-1.2.16%252Fangular.min.js%253A17%253A212%250A%2540http%253A%252F%252Flocalhost%253A8080%252FZinappViewBeta%252Fresources%252Fscripts%252Fext%252Fangular-1.2.16%252Fangular.min.js%253A209%253A360%250AjQuery.Callbacks%252Ffire%2540http%253A%252F%252Flocalhost%253A8080%252FZinappViewBeta%252Fresources%252Fscripts%252Fext%252Fjquery-ui-1.10.3.custom%252Fjs%252Fjquery-1.9.1.js%253A1037%253A1%250AjQuery.Callbacks%252Fself.fireWith%2540http%253A%252F%252Flocalhost%253A8080%252FZinappViewBeta%252Fresources%252Fscripts%252Fext%252Fjquery-ui-1.10.3.custom%252Fjs%252Fjquery-1.9.1.js%253A1148%253A7%250A.ready%2540http%253A%252F%252Flocalhost%253A8080%252FZinappViewBeta%252Fresources%252Fscripts%252Fext%252Fjquery-ui-1.10.3.custom%252Fjs%252Fjquery-1.9.1.js%253A433%253A3%250Acompleted%2540http%253A%252F%252Flocalhost%253A8080%252FZinappViewBeta%252Fresources%252Fscripts%252Fext%252Fjquery-ui-1.10.3.custom%252Fjs%252Fjquery-1.9.1.js%253A103%253A4%250A%0At%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2FZinappViewBeta%2Fresources%2Fscripts%2Fext%2Fangular-1.2.16%2Fangular.min.js%3A6%3A443%0Ae%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2FZinappViewBeta%2Fresources%2Fscripts%2Fext%2Fangular-1.2.16%2Fangular.min.js%3A33%3A221%0Aq%40http%3A%2F%2Flocalhost%3A8080%2FZinappViewBeta%2Fresources%2Fscripts%2Fext%2Fangular-1.2.16%2Fangular.min.js%3A7%3A278%0Ae%40http%3A%2F%2Flocalhost%3A8080%2FZinappViewBeta%2Fresources%2Fscripts%2Fext%2Fangular-1.2.16%2Fangular.min.js%3A32%3A445%0Ae%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2FZinappViewBeta%2Fresources%2Fscripts%2Fext%2Fangular-1.2.16%2Fangular.min.js%3A33%3A1%0Aq%40http%3A%2F%2Flocalhost%3A8080%2FZinappViewBeta%2Fresources%2Fscripts%2Fext%2Fangular-1.2.16%2Fangular.min.js%3A7%3A278%0Ae%40http%3A%2F%2Flocalhost%3A8080%2FZinappViewBeta%2Fresources%2Fscripts%2Fext%2Fangular-1.2.16%2Fangular.min.js%3A32%3A445%0Aac%40http%3A%2F%2Flocalhost%3A8080%2FZinappViewBeta%2Fresources%2Fscripts%2Fext%2Fangular-1.2.16%2Fangular.min.js%3A36%3A32%0A%24b%2Fc%40http%3A%2F%2Flocalhost%3A8080%2FZinappViewBeta%2Fresources%2Fscripts%2Fext%2Fangular-1.2.16%2Fangular.min.js%3A17%3A429%0A%24b%40http%3A%2F%2Flocalhost%3A8080%2FZinappViewBeta%2Fresources%2Fscripts%2Fext%2Fangular-1.2.16%2Fangular.min.js%3A18%3A133%0AWc%40http%3A%2F%2Flocalhost%3A8080%2FZinappViewBeta%2Fresources%2Fscripts%2Fext%2Fangular-1.2.16%2Fangular.min.js%3A17%3A212%0A%40http%3A%2F%2Flocalhost%3A8080%2FZinappViewBeta%2Fresources%2Fscripts%2Fext%2Fangular-1.2.16%2Fangular.min.js%3A209%3A360%0AjQuery.Callbacks%2Ffire%40http%3A%2F%2Flocalhost%3A8080%2FZinappViewBeta%2Fresources%2Fscripts%2Fext%2Fjquery-ui-1.10.3.custom%2Fjs%2Fjquery-1.9.1.js%3A1037%3A1%0AjQuery.Callbacks%2Fself.fireWith%40http%3A%2F%2Flocalhost%3A8080%2FZinappViewBeta%2Fresources%2Fscripts%2Fext%2Fjquery-ui-1.10.3.custom%2Fjs%2Fjquery-1.9.1.js%3A1148%3A7%0A.ready%40http%3A%2F%2Flocalhost%3A8080%2FZinappViewBeta%2Fresources%2Fscripts%2Fext%2Fjquery-ui-1.10.3.custom%2Fjs%2Fjquery-1.9.1.js%3A433%3A3%0Acompleted%40http%3A%2F%2Flocalhost%3A8080%2FZinappViewBeta%2Fresources%2Fscripts%2Fext%2Fjquery-ui-1.10.3.custom%2Fjs%2Fjquery-1.9.1.js%3A103%3A4%0A
...p"+(c-1)+"="+encodeURIComponent("function"==typeof arguments[c]?arguments[c].toS..

Categories