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.
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']);
app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova', 'ngCookies'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleLightContent();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('HomePage', {
url: '/HomePage/:id',
templateUrl: 'templates/HomePage.html',
controller: 'HomePageCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'templates/Login.html',
controller: 'LoginCtrl'
});
$urlRouterProvider.otherwise('/login');
});
controllers.js
angular.module('starter.controllers', [])
.controller('LoginCtrl', function ($scope, LoginService, $ionicPopup, $state, $location, $http, $cookieStore) {
$cookieStore.put('mycookie', 'cookie value');
var favoriteCookie = $cookieStore.get('mycookie');
alert(favoriteCookie);
})
Question:
I am new for Angular JS Ionic.I am trying to use cookie in angularjs.
When i use $cookieStore
I get below exception:
Exception:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module ngCookies due to:
Error: [$injector:nomod] Module 'ngCookies' 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 added ngCookies to angular.module however it did not work for me.
Where i miss exactly ? How can i use cookie in angular js.
Any help will be appreciated.
Thanks.
I find that $cookies is not working in an Cordova/Phonegap app since the pages are served as a file URL. In an normal desktop browser it is also not working if you serve the pages from the filesystem - it's working when served via a server or localhost.
So I get to the assumption that angular $cookies don't work for Cordova apps.
Maybe theres a workaround for that? I just don't know, maybe someone nows an answer.
probably you have missed to add angular-cookies.js file
If so add it.
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) {
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.