Unable to load ui.bootstrap module - javascript

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.

Related

Uncaught Reference Error , method not defined

I am trying to use a method from a javascript module and i dont understand why i get this error :
index.html:5
Uncaught ReferenceError: starts is not defined
at window.onload (index.html:5:11)
I have 2 js files and a html one and all are in the same folder.
connect.js
function start(){
console.log("ok");
}
main.js
import{start} from './connect.js';
export{starts};
function starts(){
start();
console.log("started script");
}
Index.html
<html>
<body>
<script type="text/javascript" >
window.onload=function(ev){
starts();
};
</script>
</body>
<script type="module" src="./connect.js"></script>
<script type="module" src="./main.js"></script>
</html>
If you are trying to use modules from the local filesystem (by directly opening index.html), this is not allowed due to CORS restrictions. See this for more details: javascript modules and CORS
If there are no other project requirements regarding the use of modules, you may use the scripts without type="module" and remove import/export statements from main.js. Otherwise, you would need a server.
You have made a spelling mistake in second line of your main.js
Use export{start} instead of export{starts}; And also change that in HTML file.

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>

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