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
]);
Related
i'm trying to use the $state service to load a particular state i defined. The problem is that i'm getting all kind of errors when trying to do it. I've read about the circular dependencies and also tried the methods provided in other threads of stackoverflow like using:
$injector.get($state)
But it also fails, i'm getting unknown provider $state error. Hope someone can help me...
this is my code:
'use strict';
angular.module("home", ['ui.router', 'home.controllers', 'urlLanguageStorage', 'pascalprecht.translate'])
.config(['$stateProvider', '$translateProvider', '$state',
function($stateProvider, $translateProvider, $state){
$translateProvider.useUrlLoader("home/mensajes");
$translateProvider.useStorage("UrlLanguageStorage");
$translateProvider.preferredLanguage("euk");
$translateProvider.fallbackLanguage("en");
$stateProvider
.state("introduccion", {
url : "/prueba",
templateUrl : "resources/js/home/views/introduccion.html",
controller : "HomeController"
});
$state.go('introduccion');
}]);
'use strict';
angular.module("home.controllers", ['home.services'])
.controller('HomeController', ['$scope', 'HomeService', function($scope, HomeService) {
probar();
function probar(){
$scope.texto = HomeService.prueba().get();
}
}]);
'use strict';
angular.module('home.services',['ngResource'])
.factory('HomeService',function($resource){
return {
prueba: function() {
return $resource('http://192.168.11.6:8080/web/home/prueba');
}
};
});
'use strict';
angular.module('urlLanguageStorage',['ngResource'])
.factory('UrlLanguageStorage', ['$location',function($location){
return {
put : function (name, value) {},
get : function (name) {
return $location.search()['lang']
}
};
}]);
The error i'm getting is the following one:
Failed to instantiate module home due to: Error: [$injector:unpr]
http://errors.angularjs.org/1.5.5/$injector/unpr?p0=%24state
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:6:412
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:43:84
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:40:344)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:41:78)
at Object.invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:41:163)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:321)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:445
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:222
You confused with $stateProvider and $state.
$stateProvider is a Provider, and $state is a Service. They are not the same. Short answer: you use $stateProvider at config phase, and use $stateProvider in your controller.
Your error happens because you injected $state service in your .config, which is wrong:
.config(['$stateProvider', '$translateProvider', '$state'
Remove the $state and you are okay:
angular.module("home", ['ui.router', 'home.controllers', 'urlLanguageStorage', 'pascalprecht.translate'])
//take out $state from config phase
.config(['$stateProvider', '$translateProvider', '$state',
function($stateProvider, $translateProvider, $state) {
$translateProvider.useUrlLoader("home/mensajes");
$translateProvider.useStorage("UrlLanguageStorage");
$translateProvider.preferredLanguage("euk");
$translateProvider.fallbackLanguage("en");
$stateProvider
.state("introduccion", {
url: "/prueba",
templateUrl: "resources/js/home/views/introduccion.html",
controller: "HomeController"
});
//remove this line, set this in controller
//$state.go('introduccion');
}
]);
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?
i am using angle theme with Angular for my project and i am doing unit testing on this using jasmine framework. But when i run the test cases, it gives error of "Argument 'controller' is not a function, got undefined". here is my test.js file....
describe('registrationController',function(){
beforeEach(module('appTesting'));
var $controller;
beforeEach(inject(function(_$controller_){
$controller = _$controller_;
}));
it('Check Working Or Not', function() {
var $scope = {};
var controller = $controller('registrationController', { $scope: $scope });
$scope.password = 'passwordlength';
$scope.grade();
expect($scope.strength).toEqual('strong');
});
});
Error -
Error: [ng:areq] Argument 'registrationController' is not a function, got undefined http://errors.angularjs.org/1.3.10/ng/areq?p0=registrationController&p1=not%20a%20function%2C%20got%20undefined
No i am using karma to run jasmine.
I am defining my module here
var App = angular.module('appTesting', ['ngRoute', 'ngAnimate', 'ngStorage', 'ngCookies', 'pascalprecht.translate', 'ui.bootstrap', 'ui.router', 'oc.lazyLoad', 'cfp.loadingBar', 'ngSanitize', 'ngResource'])
.run(["$rootScope", "$state", "$stateParams", '$window', '$templateCache', function ($rootScope, $state, $stateParams, $window, $templateCache, $location) {
// Set reference to access them from any scope
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$storage = $window.localStorage;
}
]);
App.config(['$stateProvider','$urlRouterProvider', '$controllerProvider', '$compileProvider', '$filterProvider', '$provide', '$ocLazyLoadProvider', 'APP_REQUIRES', 'RouteHelpersProvider',
function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $ocLazyLoadProvider, appRequires, helper) {
'use strict';
App.controller = $controllerProvider.register;
App.directive = $compileProvider.directive;
App.filter = $filterProvider.register;
App.factory = $provide.factory;
App.service = $provide.service;
App.constant = $provide.constant;
App.value = $provide.value;
$stateProvider
.state('app.registrationState', {
url: '/registration',
title: 'Ragistration Page',
templateUrl: helper.basepath('registrationPage.html'),
resolve: helper.resolveFor('registrationController','angularFileUpload')
})
}])
.controller('NullController', function() {});
App.constant('APP_REQUIRES', {
scripts:
{
'registrationController' :['app/js/registrationcontroller.js'],
}
});
Angular
Can the controller be found?
Do you have a controller named registrationController?
Is it in a module named appTesting?
You should have the following code somewhere in your app:
angular.module("appTesting").controller("registrationController", ...);
Karma
If you are using Karma-jasmine:
Did you include the file where you define the controller (registration-controller.js) in your karma.conf.js?
karma.conf.js
module.exports = function(config) {config.set({
files : [
'src/registration-controller.js',
...
],
...
});};
Jasmine
If you're not using Karma to run Jasmine, I'm assuming you're using the Jasmine test runner (HTML file). In that case:
Did you include the controller in the HTML file?
You need to include the controller's script:
<head>
...
<script type="text/javascript" src="src/registration-controller.js"></script>
...
</head>
Either the controller cannot be found or was not created due to error on the source code where controller was defined.
In my case, it was due to a statement that had error which affected succeeding lines of code cause the controller to be not loaded.
This can happen due to variety of reasons.
-> controller name is not referenced right
-> controller is not created due to some error.
In my case, I had the controller name mismatched in
directive:
.controller('IAddController', AddController)
Jasmine spec.ts:
// Instantiate controller
addController= $controller<any>('AddController', {*
In an attempt to initialize my application, I'm trying to init the module the run() method as follow, but it does not compile.
the error is:
Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.3.5/$injector/unpr?p0=%24routeProvider%20%3C-%20%24route
Error: error:unpr
Unknown Provider
Unknown provider: $routeProvider <- $route
and here's the code in app.js :
(function () {
'use strict';
angular.module('rage', [
'ui.router',
'ui.bootstrap',
'ui.dashboard',
'kendo.directives',
'jqwidgets'
]).run(['$route', '$rootScope', init]);
function init($route, $rootScope){
var i = 1;
}
})();
However with no dependencies, it runs through fine:
(function () {
'use strict';
angular.module('rage', [
'ui.router',
'ui.bootstrap',
'ui.dashboard',
'kendo.directives',
'jqwidgets' // Kendo UI and jQWidgets libs (loaded in index.html)
]).run(init);
function init(){
var i = 1;
}
})();
$routeProvider is not part of ui.router module. and ui.router does not use ngRoute as well so you cannot access $route service inside the run block because it does not exist. Try including ngRoute if you need to use it (But you already have a ui.router so i am not sure).
angular.module('rage', [
'ngRoute' //<-- Here
'ui.router',
'ui.bootstrap',
'ui.dashboard',
'kendo.directives',
'jqwidgets'
]
Or just remove $route from the dependency list.
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'
])