I want to use ngstorage in my project. so i install this package :
Install-Package gsklee.ngStorage
and it install successfully.then in my app i insert dependency:
var app = angular.module("app", ['ngRoute', 'ui.bootstrap', 'ngAnimate', 'ngStorage'])
.config(['$httpProvider', '$controllerProvider', '$routeProvider', function ($httpProvider, $controllerProvider, $routeProvider) {
app.cp = $controllerProvider;
$httpProvider.defaults.withCredentials = true;
}]);
and in the page i use it like this:
<script>
app.cp.register('userProfileController', function ($window, $localStorage) {
function reload() {
$localStorage.hasReloaded = true;
$window.location.reload();
}
debugger;
if (!$localStorage.hasReloaded) {
reload();
}
});
</script>
but it doesn't work. and it gives me this error:
Module 'ngstorage' 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.
what is the problem?
Related
I tried two of the solutions here to no avail.
This is my Error:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module flavorApplication due to:
Error: [$injector:unpr] Unknown provider: underscore
Here is my code for the module:
var underscore = angular.module('underscore', []);
underscore.factory('_', ['$window', function() {
return $window._;
}]);
Here is my App Config:
(function(){
angular.module("flavorApplication",
['ui.bootstrap',
'ui.router',
'angular-loading-bar',
'angular-confirm',
]);
angular.module("flavorApplication").config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
'underscore', function ($stateProvider, $urlRouterProvider, $locationProvider, underscore){
Here I'm trying to inject it into a Controller (probably where I'm going wrong)
(function () {
'use strict';
angular
.module('flavorApplication')
.controller('UsedSearchesController', UsedSearchesController);
UsedSearchesController.$inject = ['$stateParams', '$state', 'DataService', '_'];
function UsedSearchesController($stateParams, $state, DataService, _) {
var vm = this;
vm.currentSearches = $stateParams.search.split("|")
activate(vm);
////////////////
function activate(vm, _) {
vm.removeSearch = function (searchTerm) {
$stateParams.search = _.filter(vm.currentSearches,
function(search){return search !== searchterm}).join("|")
$state.go('home');
}
}
}
})();
You missed $window dependency to inject in your factory
underscore.factory('_', ['$window', function($window) {
Other thing you can't get factory/service singleton object to be avail at config phase of angular, you can't get that object there.
//remove 'underscore' dependency from config phase like below.
angular.module("flavorApplication").config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider){
Additionally, you don't need to add _ as a parameter in activate function,
function activate(vm) { //<-- remove _ from here
Don't forget to inject underscore module to flavorApplication
module so that would make available _ object throughout application
modules & components.
angular.module("flavorApplication",
['ui.bootstrap',
'ui.router',
'angular-loading-bar',
'angular-confirm',
'underscore' //<-- added underscore module here
]);
I'm using AngularAMD + RequirsJS for a single page app and I'm having some issues when injecting a service in the app.js file.
Here the code:
login_service.js
define(['app'], function(app) {
'use strict';
app.service('loginService', function($location, $state, Restangular) {
return {
login: function(data, scope) {},
logout: function() {},
isLogged: function() {}
}
});
});
app.js
define(['angularAMD', 'restangular', 'angular-ui-router'], function(angularAMD) {
'use strict';
var app = angular.module('MyApp', ['restangular', 'ui.router', 'loginService']);
app.run(function($rootScope, $state, $stateParams, $location, loginService) {
console.log(loginService)
/*
Error: [$injector:modulerr] Failed to instantiate module MyApp due to: [$injector:modulerr]
Failed to instantiate module loginService due to:
$injector:nomod] Module 'loginService' is not available! You either misspelled the module name or forgot to load it.
*/
});
app.config(function($stateProvider, $urlRouterProvider, $i18nextProvider, RestangularProvider) {
});
});
I would liked to access the loginService in the run function but can't as I keep getting the "Failed to instantiate module MyApp" error message.
I've tried to load the login service file as follow:
define(['angularAMD', 'restangular', 'angular-ui-router', 'services/login_service'], function(angularAMD) {
});
But then I have another error stating that app is undefined in the Login Service.
Thank you very much for your helps.
David
It is happeing because 'loginService' is not a module it's a service and you cannot add 'loginService' (service) to the module you can only add only module to another module.
you can do one thing :-
var app = angular.module('loginService',[]);
app.service('loginService', function($location, $state, Restangular) {
return {
login: function(data, scope) {},
logout: function() {},
isLogged: function() {}
}
});
Ps:- I am not sure about this :-P
The problem is caused by the fact that requireJS loads the files dynamically and this assures you that the files are already loaded before it runs the code.
You should do the following:
Remove the ng-app from your html
Use a manual bootstrapping:
angular.element().ready(function(){
angular.bootstrap(document,['MyApp']);
});
I'm using Jasmine for testing AngularJS controller and I'm struggling to find a way of injecting $routeProvider into the module.
Here's my controller:
var app = angular.module('testApp', []);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/smth', {
templateUrl: 'smth.html',
controller: 'testController'
});
}]);
app.controller('testController', ['$scope', function ($scope) {
$scope.data = 'GG';
}]);
Here's my test:
describe('Test Suite', function () {
var myScope, ctrl;
beforeEach(module('testApp'));
beforeEach(inject(function ($controller, $rootScope) {
myScope = $rootScope.$new();
ctrl = $controller('testController', {
$scope: myScope
});
}));
it('data is GG', function () {
expect(myScope.data).toEqual('GG');
});
});
When I try to run it, I receive a following error:
Error: [$injector:modulerr] Failed to instantiate module testApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
But if I try to run again - I get this:
TypeError: 'undefined' is not an object (evaluating 'myScope.data')
Errors keep alternating if tests are run again. I'm using Visual Studio 2013 and Resharper 8 to run the Jasmine tests.
Add the angular-route bower component to your project and then inject the ngRoute into your module like this
var app = angular.module('testApp', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/smth', {
templateUrl: 'smth.html',
controller: 'testController'
});
}]);
app.controller('testController', ['$scope', function ($scope) {
$scope.data = 'GG';
}]);
First make sure you have included angular-route.min.js.
This module has been separated from angularJs library, so you have will have to include it separately
then make sure you have added dependency for your module to ngRoute
e.g. angular.module('testApp', ['ngRoute']);
then in the test make sure you inject $route so its available in your tests as well
I can't figure out what I'm doing wrong here.
//app.js
'use strict';
var app = angular.module('maq', [
'ui.router',
'maq.home.controller'
]).run([
'$rootScope',
'$state',
'$stateParams', function($rootScope, $state, $stateParams){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}])
.config([
'$stateProvider',
'$urlRouterProvider', function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/home.html',
controller: 'maq.home.controller'
})
}]);
//controller
'use strict';
app
.controller('maq.home.controller', [function(){
}]);
//error
Uncaught Error: [$injector:modulerr] Failed to instantiate module maq due to:
Error: [$injector:modulerr] Failed to instantiate module maq.home.controller due to:
Error: [$injector:nomod] Module 'maq.home.controller' 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.
You actually do not have a module called maq.home.controller Instead your registration is in such a way that it is the controller name.
If you want to separate your controller to another module (as what you are trying to do)
try:-
angular.module('maq.controller', []); //<-- Module creation
//...
angular.module('maq.controller')
.controller('HomeController', [function() { //<-- Controller registration
}]);
and in your app:-
var app = angular.module('maq', [
'ui.router',
'maq.controller' //<-- Controller mmodule
]);
Or just remove the dependency on the module that does not exist:-
angular.module('maq', [
'ui.router',
//'maq.home.controller' <-- Remove this
])
You are trying to depend on another module named maq.home.controller when it is not a module, it is a controller. You do not need to list controllers as dependencies in your module declaration. So just take that dependency out like so:
var app = angular.module('maq', [
'ui.router'
])
i have the below in my module config block:
var appModule = angular.module('myApp',['ngRoute'])
.config(['$httpProvider', '$routeProvider', '$locationProvider', '$translateProvider', function ($httpProvider, $routeProvider, $locationProvider, $translateProvider) {
$locationProvider.html5Mode(true)
$routeProvider
.when('/services/main', {templateUrl: '/services/main/html/main.html', controller: 'MainCtrl', resolve: {
myVar: function (varService) {
return varService.invokeService();
}
}})
}])
Spec File:
describe("Unit Testing: config - ", function() {
var appModule;
var routes;
beforeEach(function() {
appModule = angular.module("myApp");
});
it('should test routeProvider', function() {
inject(function($route, $location, $rootScope) {
routes = $route;
});
});
});
however, while running the test i am getting the below error:
Unit Testing: config - should test routeProvider FAILED
Error: [$injector:unpr] http://errors.angularjs.org/1.2.15/$injector/unpr?p0=%24routeProvider%20%3C-%20%24route
at Error (native)
my karma config includes the angular-route.min.js file. Any suggestions will be helpful.
The issue was resolved with use of angular.mock.module instead of angular.module.
appModule = angular.mock.module("myApp");
What i found that we should use mock to inject the module and it includes the configuration as well where as module is used to register a newly module. So if one is refering to the module already registered, we should use angular.mock.module.
The documentaion says:
This function registers a module configuration code. It collects the configuration information which will be used when the injector is created by inject.