We Keep Coding

Error: [$injector:unpr] Unknown provider: dataProvider <- data

This is my Js code
(function () {
angular.module('app',[])
.factory('code', function ($http, svc, $q) {
function getCodeByID(id) {
return $http.get(svc.get('my-application') + id)
.then(function (res) {
return res;
});
}
})
})();
This is my Spec.js file
describe('MyController', function() {
var data, svc, code;
// Set up the module
//beforeEach(module('app'));
beforeEach(angular.mock.module('app'));
beforeEach(inject(function(_data_) {
data = _data_;
}));
beforeEach(inject(function(_svc_) {
svc = _svc_;
}));
beforeEach(inject(function(_code_) {
code = _code_;
}));
it('Should exist', function() {
expect(code).toBeDefined();
});});
Getting this error:
Error: [$injector:unpr] Unknown provider: dataProvider <- data
https://errors.angularjs.org/1.7.4/$injector/unpr?p0=dataProvider%20%3C-%20data
at node_modules/angular/angular.js:138:12
at node_modules/angular/angular.js:4905:19
at Object.getService [as get] (node_modules/angular/angular.js:5065:32)
at node_modules/angular/angular.js:4910:45
at getService (node_modules/angular/angular.js:5065:32)
at injectionArgs (node_modules/angular/angular.js:5090:58)
at Object.invoke (node_modules/angular/angular.js:5114:18)
at UserContext.WorkFn (node_modules/angular-mocks/angular-mocks.js:3439:20)
Error: Declaration Location
at window.inject.angular.mock.inject (node_modules/angular-mocks/angular-mocks.js:3402:25)
at Suite.<anonymous> (src/app/epcCodes/epc.spec.js:9:16)
at src/app/epcCodes/epc.spec.js:2:1
I don't know why I am getting this error, I have added all the dependency injection that's needed for my project.
Can you provide me the solution for this?

You only need one of those beforeEach blocks where you are injecting your services -- though this has nothing to do with your issue.
This one does have to do with your issue -- you are "telling" your test to inject a data component/service/factory when one apparently does not exist in your code. What are you expecting data to be?

angular.module('Svc', [])
.factory('Svc', function (Data, $injector, $http) {
var ConfigData = Data;
var Svc = {};
Svc.get = function (key) {
return ConfigData[key];
};
Svc.loadResourcePaths = function (resources) {
resources.forEach(function (resource) {
$http.get(Svc.get('security-api') + 'resources?name=' + resource)
.then(function (response) {
if (response.data.totalElements === 1) {
ConfigData[resource] = response.data.content[0].href;
} else {
}
})
})
};
return Svc;
});

(function () {
angular
.module('app', [
'ConfigSvc',
'AuthUtils',
'ngCsv'
])
.constant('APPNAME', 'ui')
.constant('APPLABEL', 'app_label')
.constant('APPPREFIX', 'App_name')
.config(function ($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('grey', {'default': '900'})
.accentPalette('blue', {'default': '400'})
;
})
.config(function routesConfig($stateProvider, $urlRouterProvider, $locationProvider, $mdAriaProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
template: '<app></app>',
data: {
label: 'Home',
icon: 'home',
menu: true
}
});
});
angular.element(document).ready(function () {
var initInjector = angular.injector(['ng']);
var $http = initInjector.get('$http');
$http.get('appConfig.json')
.then(function (response) {
angular.module('app').constant('Data', response.data);
return $http.get('appFeatures.json')
})
.then(function (response) {
angular.module('app').constant('ccAppFeatures', response.data);
})
.finally(function () {
angular.bootstrap(document, ['app']);
});
});})();

Error: [$injector:unpr] Unknown provider:

File structure:
app.js
(function () {
"use strict";
var app = angular.module("app", ["common.services", "ngRoute", "ngResource"])
app.config(function ($routeProvider) {
$routeProvider
// route for the home page
//.when('/', {
// controller: 'mainController',
// templateUrl: 'app/linkPages/home.html'
//})
// route for the about page
//.when('/about', {
// controller: 'aboutController',
// templateUrl: 'app/linkPages/about.html'
//})
// route for the contact page
//.when('/contact', {
// controller: 'contactController',
// templateUrl: 'app/linkPages/contact.html'
//})
.when('/', {
controller: 'AgencyListCtrl',
templateUrl: 'app/agencies/agencyListView.html'
})
//.when('/agencyEditView', {
// controller: 'AgencyEditCtrl',
// templateUrl: 'app/agencies/agencyEditView.html'
//});
});
// create the controller and inject Angular's $scope
app.controller('mainController', function ($scope) {
// create a message to display in our view
$scope.message = 'This is the Main controller page';
});
app.controller('aboutController', function ($scope) {
$scope.message = 'This is the about controller page';
});
app.controller('contactController', function ($scope) {
$scope.message = 'This is the contact controller page';
});
}());
common.services.js
(function () {
"use strict";
angular
.module("common.services",
["ngResource"])//common.services
.constant("appSettings",
{
serverPath: "http://localhost:53403/" // will replace production server url
});
}());
agencyResource.js
(function () {
"use strict";
angular.module("app")//common.services
.factory("agencyResource"
["ngResource", "$resource",
"appSettings",
agencyResource])
function agencyResource($resource, appSettings) {
return $resource(appSettings.serverPath + "/api/v1/agencies/:id", null,
{
'update': { method: 'PUT' },
});
}
}());
agencyListCtrl.js
(function () {
"use strict";
angular
.module("app")
.controller("AgencyListCtrl",
["agencyResource",
AgencyListCtrl]);
function AgencyListCtrl(agencyResource) {
var vm = this;
//agencyResource.query({ $filter: "contains(Abbr,'IOT')" },
// function (data) {
// vm.agencies = data;
// console.log(result);
//})
agencyResource.query({},
function (data) {
vm.agencies = data;
console.log(result);
})
}
}());
ERROR:
HTML1300: Navigation occurred. index.html Error: [$injector:unpr]
Unknown provider: agencyResourceProvider <- agencyResource <-
AgencyListCtrl
http://errors.angularjs.org/1.5.9/$injector/unpr?p0=agencyResourceProvider%20%3C-%20agencyResource%20%3C-%20AgencyListCtrl
at Anonymous function (http://localhost:61924/Scripts/angular.js:4554:13)
at getService (http://localhost:61924/Scripts/angular.js:4707:11)
at Anonymous function (http://localhost:61924/Scripts/angular.js:4559:13)
at getService (http://localhost:61924/Scripts/angular.js:4707:11)
at injectionArgs (http://localhost:61924/Scripts/angular.js:4731:9)
at instantiate (http://localhost:61924/Scripts/angular.js:4774:7)
at $controller (http://localhost:61924/Scripts/angular.js:10533:7)
at link (http://localhost:61924/Scripts/angular-route.js:1056:9)
at Anonymous function (http://localhost:61924/Scripts/angular.js:1258:11)
at invokeLinkFn (http://localhost:61924/Scripts/angular.js:10095:9)
I am not sure weather I have injected everything right here? Any help would be appreciated. This is my first angular app so I am a little green. Stack Overflow is telling me I have to type more details but the code post are pretty self explanatory. I

The answer is that I was declaring ngResource in the agencyResource.js file. It should look like this. MY BAD.
agencyResource.js
(function () {
"use strict";
angular.module("common.services")//common.services
.factory("agencyResource",
[
"$resource",
"appSettings",
agencyResource
])
function agencyResource($resource, appSettings) {
return $resource(appSettings.serverPath + "/api/v1/agencies/:id", null,
{
'update': { method: 'PUT' },
});
}
}());

Creating a custom provider angularjs

I am trying to create some routing that will resolve calls to my rest api
before the page loads. Because I can't inject a service created using
app.factory(), I am attempting to create a provider to do this so I can use it in my config routing, but I'm
getting Error: [$injector:unpr] Unknown provider: $http
I want to be able to call the provider in mainFlow.api for 4 or five endpoints
that will resolve before the page loads. Am I going about this the correct way?
My code:
service.js
var mainApp = angular.module('mainApp');
mainApp.provider('choiceService', ['$http', function($http) {
return {
$get: function() {
return {
get: function(url) {
return $http.get(url);
}
};
}
};
}]);
config.js
var mainApp = angular.module('mainApp', [
'ui.router'
]);
mainApp.config(['$stateProvider', '$urlRouterProvider', '$choiceServiceProvider',
function($stateProvider, $urlRouterProvider, choiceServiceProvider) {
$stateProvider
.state('mainFlow', {
abstract: true,
url: '/base',
template: '<ui-view/>'
})
.state('mainFlow.choose-main', {
url: '',
templateUrl: '/choose_main.html',
})
.state('mainFlow.contact', {
controller: 'ContactFormController',
url: '/contact-details',
templateUrl: '/panel_contact_info.html',
})
.state('mainFlow.api', {
url: '/about-your-api',
controller: 'ApiFormController',
templateUrl: '/panel_about_your_api.html',
resolve: {
choice: function(choiceServiceProvider) {
return choiceServiceProvider.get('/api/yes-no-choice/');
},
other_choice: function(choiceServiceProvider){
return choiceServiceProvider.get('/api/my-other-choice/')
}
}
})
Then I can use the resolved data in controller.js
controller.js
var mainApp = angular.module('mainApp');
mainApp.controller('ApiFormController', [
'$scope',
'$state',
'choiceService',
function($scope, $state, choiceService) {
$scope.choices = choiceService;
}
]);

I was passing $http in service.js when there was no need. I was also passing in '$choiceServiceProvider' in config.js when it should have been just 'choiceServiceProvider'

Issue with redirect on $location in Angularjs - Cannot read property 'path' of undefined

I have got plenty working, but at present I am stuck.
I have included a module for running parse.com authentication / login etc which I have added below.
I am trying to get the app to redirect on a successful login to /tab/friends by setting $location.path however I simply can't get it to work. In console I get Cannot read property 'path' of undefined.
I've been fighting this for two days, so any help would be super welcome :)
My parse related module:
// JavaScript Document
angular.module('AuthApp', [])
.run(['$rootScope', function( $scope, $location) {
$scope.scenario = 'Sign up';
$scope.currentUser = Parse.User.current();
$scope.location = $location;
console.log(location);
// $location.path('/tab/friends');
function randomString(len, charSet) {
charSet = charSet || 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var randomString = '';
for (var i = 0; i < len; i++) {
var randomPoz = Math.floor(Math.random() * charSet.length);
randomString += charSet.substring(randomPoz,randomPoz+1);
}
return randomString;
}
var randomValue = randomString(9);
$scope.signUp = function(form, $location) {
var user = new Parse.User();
user.set("email", form.email);
user.set("firstname", form.firstname);
user.set("lastname", form.lastname);
user.set("mobilenumber", form.mobilenumber);
user.set("username", form.email);
user.set("password", randomValue);
user.signUp(null, {
success: function(user) {
$scope.currentUser = user;
$scope.$apply();
},
error: function(user, error) {
alert("Unable to sign up: " + error.code + " " + error.message);
}
});
};
$scope.logIn = function(form, $routeParams, $location) {
Parse.User.logIn(form.username, form.password, {
success: function(user) {
console.log(location);
$location.path('/tab/friends');
$scope.currentUser = user;
},
error: function(user, error) {
alert("Unable to log in: " + error.code + " " + error.message);
}
});
};
$scope.logOut = function(form) {
Parse.User.logOut();
$scope.currentUser = null;
};
}]);
My app.'s code that starts everything up
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
// here we add our modules first then after that we start up our main app/module of 'starter' in the brackets to the right of that we have to include the modules that we want to load in too
angular.module('AuthApp', []);
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'AuthApp'])
.run(function($ionicPlatform,$rootScope,$location) {
$rootScope.location =$location;
$ionicPlatform.ready(function($routeParams,$location) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.friends', {
url: '/friends',
views: {
'tab-friends': {
templateUrl: 'templates/tab-friends.html',
controller: 'FriendsCtrl'
}
}
})
.state('tab.friend-detail', {
url: '/friend/:friendId',
views: {
'tab-friends': {
templateUrl: 'templates/friend-detail.html',
controller: 'FriendDetailCtrl'
}
}
})
.state('tab.me', {
url: '/me',
views: {
'tab-me': {
templateUrl: 'templates/tab-me.html',
controller: 'meCtrl'
}
}
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'templates/tab-settings.html',
controller: 'SettingsCtrl'
}
}
})
.state('signup', {
url: '/signup',
templateUrl: 'templates/signup.html',
controller: 'SignupCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('firstview', {
url: '/firstview',
templateUrl: 'templates/firstview.html',
controller: 'FirstviewCtrl'
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/firstview');
});

In your code you have the following :
// JavaScript Document
angular.module('AuthApp', [])
.run(['$rootScope', function( $scope, $location) {
You are using dependency injection in the .run. Unfortunately, you are not injecting $location properly.
Change it to this :
// JavaScript Document
angular.module('AuthApp', [])
.run(['$rootScope', '$location', function( $scope, $location) {

Angular Error: [ng:area] and [$injector:unpr] when import ngUpload

i'm trying to import the angular directive ngUpload
but when open the html page i have this error:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.15-build.2378+sha.9335378/$injector/unpr?p0=AuthProvider%20%3C-%20Auth%20%3C-%20accessLevelDirective
http://localhost:8000/components/angular/angular.min.js:32:150
c#http://localhost:8000/components/angular/angular.min.js:30:201
http://localhost:8000/components/angular/angular.min.js:32:196
c#http://localhost:8000/components/angular/angular.min.js:30:201
d#http://localhost:8000/components/angular/angular.min.js:30:486
http://localhost:8000/components/angular/angular.min.js:40:166
forEach#[native code]
and
Error: [ng:areq] http://errors.angularjs.org/1.2.15-build.2378+sha.9335378/ng/areq?p0=NavCtrl&p1=not%20a%20function%2C%20got%20undefined
xb#http://localhost:8000/components/angular/angular.min.js:18:391
Pa#http://localhost:8000/components/angular/angular.min.js:18:449
http://localhost:8000/components/angular/angular.min.js:63:96
http://localhost:8000/components/angular/angular.min.js:49:196
r#http://localhost:8000/components/angular/angular.min.js:7:408
A#http://localhost:8000/components/angular/angular.min.js:49:62
h#http://localhost:8000/components/angular/angular.min.js:43:84
A#http://localhost:8000/components/angular/angular.min.js:49:468
h#http://localhost:8000/components/angular/angular.min.js:43:84
the controllers that make this error, is:
angular.module('angular-client-side-auth',['ngUpload'])
.controller('homeCtrl',
['$rootScope', '$scope', 'Users','$location', 'Auth', function($rootScope, $scope, Users,$location, Auth) {
$scope.isAdmin = function(){
console.log(JSON.stringify(Auth.user.role.title));
return Auth.user.role.title == "admin";
};
$scope.complete = function(content) {
console.log(content); // process content
};
Users.getMe(function(res) {
$scope.user= res;
}, function(err) {
$rootScope.error = "Failed to fetch me.";
$scope.loading = false;
});
}]);
someone have any idea ? thx
-----------Update-----------
this is my Auth declaration
angular.module('angular-client-side-auth')
.factory('Auth', function($http, $cookieStore){
var accessLevels = routingConfig.accessLevels
, userRoles = routingConfig.userRoles
, currentUser = $cookieStore.get('user') || { username: '', role: userRoles.public };
$cookieStore.remove('user');
function changeUser(user) {
angular.extend(currentUser, user);
};
return {
authorize: function(accessLevel, role) {
if(role === undefined)
role = currentUser.role;
return accessLevel.bitMask & role.bitMask;
},
isLoggedIn: function(user) {
if(user === undefined)
user = currentUser;
return user.role.title == userRoles.manager.title || user.role.title == userRoles.admin.title;
},
register: function(user, success, error) {
$http.post('/register', user).success(function(res) {
changeUser(res);
success();
}).error(error);
},
login: function(user, success, error) {
$http.post('/login', user).success(function(user){
changeUser(user);
success(user);
}).error(error);
},
logout: function(success, error) {
$http.post('/logout').success(function(){
changeUser({
username: '',
role: userRoles.public
});
success();
}).error(error);
},
accessLevels: accessLevels,
userRoles: userRoles,
user: currentUser
};
});
And this the NavCtrl declaration
angular.module('angular-client-side-auth')
.controller('NavCtrl', ['$rootScope', '$scope', '$location', 'Auth', function($rootScope, $scope, $location, Auth) {
$scope.user = Auth.user;
$scope.userRoles = Auth.userRoles;
$scope.accessLevels = Auth.accessLevels;
$scope.logout = function() {
Auth.logout(function() {
$location.path('/login');
}, function() {
$rootScope.error = "Failed to logout, sorry";
});
};
}]);
but if i don't import the ngupload i don't have any problem with my angular app

This looks like an ordering problem.
You need to declare the module first, with its dependencies:
angular.module('angular-client-side-auth',['ngUpload']);
Then you need to add your other controllers and services in before they are used in other controllers/services/directives:
angular.module('angular-client-side-auth').factory('Auth', ...);
angular.module('angular-client-side-auth').controller('homeCtrl', ...);
angular.module('angular-client-side-auth').controller('navCtrl', ...);
You tried to declare a controller immediately on your newly declared module that did not have the Auth factory registered yet.