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.
Related
I added the 'selectionModel' to my TestRateCtrl controller but I get an error:
angular.module('RDash', ['selectionModel'])
.controller('TestRateCtrl', function() {
I get this error:
Error: [$controller:ctrlreg] http://errors.angularjs.org/1.5.11/$controller/ctrlreg?p0=MasterCtrl
MasterCtrl is my master.js file. If I add 'selectionModel' to my master.js I get a different error.
angular.module('RDash', ['selectionModel'])
.controller('MasterCtrl', ['$rootScope', '$scope', 'configService', '$cookieStore', MasterCtrl]);
Now I get this error:
Error: [$injector:unpr] http://errors.angularjs.org/1.5.11/$injector/unpr?p0=%24cookieStoreProvider%20%3C-%20%24cookieStore%20%3C-%20MasterCtrl
I have the following in my index.html file:
src="components/angular-selection-model/dist/selection-model.js" charset="utf-8">
src="components/angular-selection-model/dist/selection-model.min.js" charset="utf-8">
By doing this would make two different scopes for your application becuase using same name of module if you reinitiallized that module that would be different that the other one which is already declared
say: file A
angular.module("RDash", ['selectionModel']);
This is defined and in file B
var app = angular.module("RDash", ['selectionModel']);
so this would cause to have two different app with same name in one application and that two app with same name in different files so its something like to have two different angular module inside on application.
so,
Replace this
angular.module('RDash', ['selectionModel']) .controller('TestRateCtrl', function() {
by
angular.module('RDash') .controller('TestRateCtrl', function() {
Same thing is happening here again
And here you are creating a MasterCtrl and adding MasterCtrl as dependencies
Replace this
angular.module('RDash', ['selectionModel']) .controller('MasterCtrl', ['$rootScope', '$scope', 'configService', '$cookieStore', MasterCtrl]);
by
angular.module('RDash') .controller('MasterCtrl', ['$rootScope', '$scope', 'configService', '$cookieStore']);
If anyone else is using the RDash framework (from startangular.com), and wants to use the angular-selection-model library, the way I was able to add the 'selectionModel' to the RDash framework is in the modules.js file as follows:
angular.module('RDash', ['ui.bootstrap', 'ui.router', 'ngCookies', 'selectionModel']);
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.
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
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.
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.