How to put a services on angularjs? - javascript

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

Related

Angular fails to load one of my modules

I have the following angular module in a file:
angular.module('swagger', [])
.factory('swaggerApi', function () {
return new Swagger({
url: 'http://localhost:8081/api-docs',
usePromise: true
});
});
Afterward in another file I try to use this module as follows, where 'swagger' is the module name:
angular.module('GlobalFactoryMethodes', ['swagger'])
in my html file I load the 'swagger' module first and my 'GlobalFactoryMethodes' second. However I get the following error message:
Error: [$injector:modulerr] Failed to instantiate module swagger due to:
Error: [$injector:nomod] Module 'swagger' 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.
I am new to angular and thought this is how modules suppose to work, am I doing something wrong?
try this:
angular.module('swagger', []);
angular.module('swagger')
.factory('swaggerApi', function () {
return new Swagger({
url: 'http://localhost:8081/api-docs',
usePromise: true
});
});
And now add your new module:
angular.module('GlobalFactoryMethodes', ['swagger'])
It's good practice to declare all module dependencies in one file, that loaded first:
index.js:
angular.module('swagger', []);
angular.module('GlobalFactoryMethodes', ['swagger']);
And then just extend each with providers:
swagger.js:
angular.module('swagger')
.factory('swaggerApi', swaggerApi);

Angular + Karma/Jasmine: Error: [$injector:nomod] Module 'md.data.table' is not available

I am using Karma and Jasmine to test my Angular application.
I have this spec below:
"use strict";
describe("SuperHeroService", function () {
var SuperHeroService, $httpBackend;
beforeEach(module('beAwesome'));
beforeEach(module("beASuperHero"));
beforeEach(function () {
inject(function (_SuperHeroService_, _$httpBackend_) {
SuperHeroService = _SuperHeroService_;
$httpBackend = _$httpBackend_;
});
});
it("should initialize correctly", function () {
expect(SuperHeroService).toBeDefined();
});
The md.data.table dependency is included in the beAwesome module, which I'm including in my beforeEach block. beAwesome module is called in beASuperHero as well.
I've also referenced the SuperHeroService, beAwesome and beASuperHero in my karma.conf file.
However, I cannot figure out why the md-data-table (Github project: https://github.com/iamisti/md-data-table) won't be instantiated and keeps breaking, no matter what I do:
Error: [$injector:modulerr] Failed to instantiate module beASuperHero due to:
Error: [$injector:modulerr] Failed to instantiate module md.data.table due to:
Error: [$injector:nomod] Module 'md.data.table' 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.
I'm sure I'm just missing some configuration or a line of code but after hours of searching, I haven't found anything that's been helpful! Any hints to get unstuck is much appreciated.
Thanks

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.

Failed to instantiate module firebase

Not sure what I'm doing wrong here. I'm requiring my modules via npm. Everything seems to be loading in correctly (angular etc.) except for Firebase. I'm getting this error:
Error: [$injector:modulerr] Failed to instantiate module firebase due to:
Error: [$injector:nomod] Module 'firebase' 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.
I'm requiring Firebase just like my other modules. This is what my code looks like:
(function() {
'use strict';
var angular = require('angular');
var angularRoute = require('angular-route');
var angularTouch = require('angular-touch');
var Firebase = require('firebase');
angular.module('outcomesApp', ['ngTouch', 'ngRoute', 'firebase'])
.controller('UnitController', ['$scope', '$http', 'FBURL', function($scope, $http, FBURL){
}])
.constant('FBURL', 'https://new-outcomes.firebaseio.com/')
})();
Any idea what I'm doing wrong? Any help is appreciated. Thanks in advance!
You need to include a reference to the AngularFire library. That is where the angular module is defined.

cannot load module in angular js

I have simple problem with angularjs
Services.js
'use strict'
var restData = angular.module('ccapp.services', ['ngResource']);
restData.factory('Testcust', function ($resorce) {
return $resorce('http://localhost:8080/CallCenterRest/webresources/testcust',{},{
query:{method:'GET', isArray:true}
});
});
app.js
var app = angular.module('ccapp', [
'ngRoute',
'ccapp.services']);
app.config(function ($routeProvider) {
$routeProvider
.when('/viat',
{
controller: 'viatctrl',
templateUrl: 'pages/viat.html'
})
.otherwise({ redirectTo: 'index.html' });
});
problem is
Uncaught Error: [$injector:modulerr] Failed to instantiate module
ccapp due to: Error: [$injector:modulerr] Failed to instantiate module
ccapp.services due to: Error: [$injector:nomod] Module
'ccapp.services' 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.
somebody can help :)
Check the index.html file to ensure that Services.jsis included by a script tag like so <script src="whatever-your-path-is/Services.js"></script>.
If your project was set up such that a grunt or gulp task compiles all javascript files into one file (e.g., my-app.js) to be included in index.html by a script tag, then you need to make sure that this Service.js file is on the path to be processed by the grunt or gulp task.

Categories