We Keep Coding

How to fix Angular JS Error: [$injector:modulerr]

I am having a problem with Angular JS receiving an error
jquery.js:7993 Uncaught Error: [$injector:modulerr] Failed to instantiate module application due to:
Error: [$injector:nomod] Module 'application' 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.
my controller is controller.js as follows
angular.module('application') .controller( 'controller', [ '$scope', 'service', '$uibModal', '$uibModalStack','$rootScope', function($scope, service, $uibModal, $uibModalStack,$rootScope) {}]);
and my service is service.js as follows
angular.module('application').service('service',
[ '$resource', function($resource) {
var requstService = $resource('test', {}, {
});
return requstService;
} ]);
when i load the view page it running perfectly but when i click again on site link it showing above error.Please help.

Your controller should be,
angular.module('siteApplication',[]) .controller( 'siteController', [ '$scope', 'siteService', '$uibModal', '$uibModalStack','$rootScope', function($scope, siteService, $uibModal, $uibModalStack,$rootScope) {

your module is missing []
your controller should be like:
angular.module('siteApplication',[])
also did you not paste the ending part of the controller i.e } ]);
on purpose ?

Use [] in your controller to create module like this.
angular.module('moduleName', [])
and use this in your html page like ng-app="moduleName"
and add dependency js file related to $uibModal.

'Unknown Provider' trying to Include angular-websocket in a MeanJS v0.4.1 app

I am having a bit of difficulty using angular-websocket in a controller in a MeanJS application I am working on.
My Application is based on MeanJS v0.4.1.
I first installed it with:
bower install angular-websocket --save
This created the directory /public/lib/angular-websocket
Next I added it to /config/assets/default.js
lib: {
css: [
...
],
js: [
...
'public/lib/angular-websocket/angular-websocket.js'
],
tests: ['public/lib/angular-mocks/angular-mocks.js']
},
In my /modules/core/client/app/config.js file I have added it as a dependency:
var applicationModuleVendorDependencies = [
...
'angular-websocket'
];
And finally in my angular module itself,
angular.module('somemodule').controller('ModulenameController', ['$scope', '$http', '$stateParams', '$location', 'Authentication', 'SomeModule', 'ngWebSocket',
function ($scope, $http, $stateParams, $location, Authentication, SomeModule, ngWebSocket) {
When I go to view my page I can see in the "Sources" tab of Chrome's Developer tools that it is included as a source,
I am trying to use this file with something like this in my controller:
var dataStream = ngWebSocket('wss://www.somesite.com/realtime');
dataStream.onMessage(function(message) {
console.log("dataStream Message: " + message);
$scope.orderBook = message;
});
dataStream.send('{"op":"subscribe", "args":"someargument"}');
However, my console shows the following error:
Error: [$injector:unpr] Unknown provider: ngWebSocketProvider <- ngWebSocket <- ModuleNameController
Some of the things I have tried:
Changing The Reference Name
As per the documentation (https://www.npmjs.com/package/angular-websocket)
angular.module('YOUR_APP', [
'ngWebSocket' // you may also use 'angular-websocket' if you prefer
])
I've tried using 'ngWebSocket', 'angular-websocket', but I still get the same issue.
I've tried looking through my code to see if maybe this was being redefined as the angularJS documentation here:
https://docs.angularjs.org/error/$injector/unpr
states that a cause of this error could be 'redefining a module using the angular.module API'.
Any help would be greatly appreciated.

The factory is actually named $websocket, so you should do as follows:
angular.module('somemodule').controller('ModulenameController', ['$scope', '$http', '$stateParams', '$location', 'Authentication', 'SomeModule', '$websocket',
function ($scope, $http, $stateParams, $location, Authentication, SomeModule, $websocket) {

Foundation for apps: Creating separate files for angularjs controllers, services etc

I just got started with Foundation for Apps, but I was having trouble adding my angular controllers in a separate folder and using them.
I have this current structure in my assets' js folder:
js/
app.js //this has all the controllers etc. by chaining
but I want it to be
js/
app.js
controllers/
home.controller.js
main.controller.js
I don't want to keep a single large js file developed by chaining my controllers, services etc. I want a more modular structure as specified.
When I changed it to the modular structure, I got following three errors:
1. 'HomeCtrl' not defined.
2. Uncaught SyntaxError: Unexpected token < at the 1st line of home.controller.js
3. Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:8079/assets/js/home.controller.js". at the point where I am including 'home.controller.js' in index.html
Here's my template:
---
name: home
url: /
controller: HomeCtrl
---
<div class="grid-container">
<h1>Welcome to Foundation for Apps!</h1>
<p class="lead">This is version <strong>1.1 Weisshorn</strong>.</p>
</div>
home.controller.js:
app.controller('HomeCtrl', ['$scope', function($scope) {
$scope.temp = 'hello';
}]);
app.js:
var app = angular.module('application', [
'ui.router',
'ngAnimate',
'foundation',
'foundation.dynamicRouting',
'foundation.dynamicRouting.animations'
])
.config(config)
.run(run)
;
config.$inject = ['$urlRouterProvider', '$locationProvider'];
function config($urlProvider, $locationProvider) {
$urlProvider.otherwise('/');
$locationProvider.html5Mode({
enabled:false,
requireBase: false
});
}
function run() {
FastClick.attach(document.body);
}
To solve this I tried adding my controller reference in gulpfile.js by referring this
I also referred this but I still cannot get it to work. Any idea what I am doing wrong?

Inside gulpfile.js check this line. You'll see that only client/assets/js/app.js is used when coupling your minimized file. You need to make it copy all your controller's .js files too :
// These files are for your app's JavaScript
appJS: [
'client/assets/js/app.js',
'./client/assets/js/controllers/*.js',
]
You can also use an angular module to hold all your controllers & services then injecting it to your app module. This is how I'm using it here and this is how it is also done in this great ready to use Fork : https://github.com/CreativityKills/foundation-apps-template
Note: remember to restart gulp after each modify of its config file and check if your code has been well included in the built JS file ( by default is /build/assets/js/app.js )

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.

AngularJS Jasmine Test Fails: Failed to instantiate module

My angular app worked great and so did my tests, using karma and jasmine, until I added a dependency in ui.bootstrap. Now the app still works as expected, but I can't get my tests to run. This is what I have:
app.js - added dependency in ui.bootstrap
angular.module('myApp', ['ngResource', 'ngRoute', 'ui.bootstrap']).config(function(...) {...});
service.js
angular.module('myApp').service('myService', function () {})
controller.js
angular.module('myApp').controller('MyController', function ($scope, $http, myService) {})
tests/main.js
describe('Controller: MyController', function () {
var MyController, scope;
// load the controller's module
beforeEach(function(){
module('myApp');
inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
MyController = $controller('MyController', {
$scope:scope
});
});
});
it('should do something', function () {
expect(scope.myOptions.length).toBe(5);
});
});
And my test, which I run using grunt and krama, fails due to:
Error: [$injector:modulerr] Failed to instantiate module myApp 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
What have I missed? The app runs with no problem, only the test fails.

In karma.conf.js there is a list of files that karma loads before test execution:
// list of files / patterns to load in the browser
files: [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
...
]
Add bootstrap-ui.js there.

Inject your dependencies
beforeEach(function(){
angular.module('ui.bootstrap',[]);
});

I had the same problem. Just solved it. Somehow putting the module(myApp); function call inside a the function you provide to beforeEach() doesn't work just try this:
Extract the module call into its own beforeEach():
beforeEach(module('myApp'));
And use another beforeEach() for the function you use.