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

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..

Related

ng-dropdown-multiselect library not working for me

I found this cool library to do dropdown menus with angularjs + twitter-bootstrap-3, here:
http://dotansimha.github.io/angularjs-dropdown-multiselect/docs.
I am following the examples, I have this in my html:
<div ng-dropdown-multiselect="" options="stringData" selected-model="stringModel" extra-settings="stringSettings">
</div>
And this in my controller:
$scope.stringData = ['a', 'b', 'c'];
$scope.stringModel = [];
$scope.stringSettings = {
template: '{{option}}',
smartButtonTextConverter: function(skip, option) {
return option;
},
};
And yet, absolutely nothing is being rendered to the page. :(
Anybody have any idea what might be wrong?
I have twitter-bootstrap-3, angularjs and ng-dropdown-multiselect loaded in this order:
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/angular/angular.js"></script>
<script type="text/javascript" src="lib/angularjs-dropdown-multiselect/dist/src/angularjs-dropdown-multiselect.js"></script>
When I add the dependency here:
angular.module('app', ['ui.router', 'ngAnimate', 'ngSanitize', 'ngDropdownMultiselect']);
I get this error:
jquery.min.js:2 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module ngDropdownMultiselect due to:
Error: [$injector:nomod] Module 'ngDropdownMultiselect' 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.6.1/$injector/nomod?p0=ngDropdownMultiselect
So I checked the docs (again), and it says to use this instead
angular.module('app', ['ui.router', 'ngAnimate', 'ngSanitize', 'angularjs-dropdown-multiselect']);
now it "works"
ughh, gotta love front-end development lol
var app = angular.module('app', [
'ngAnimate',
'ui.select',
'ngSanitize',
'ui.router',
'ui.bootstrap',
'ui.jq',
'app.directive.voucherView',
'abp'
]).filter('angularjs-dropdown-multiselect', function () { });

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'

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

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>

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) {

Categories