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']);
});
});})();
Related
The error:
MainCategoriesListController is not defined
is coming at its declaration only ,i.e, angular.module().controller(~~,~~).
Also, in categories state, in the resolve property when i try to log the result.data it says:
TypeError: Cannot read property 'data' of undefined
Here is my controller:
(function () {
'use strict';
angular.module('MenuApp')
.controller('MainCategoriesListController',MainCategoriesListController);
MainCategoriesListController.$inject = ['items'];
function MainShoppingListController(items) {
var category = this;
category.items = items;
}
})();
And here are the states :
(function () {
'use strict';
angular.module('MenuApp')
.config(RoutesConfig);
RoutesConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
function RoutesConfig($stateProvider, $urlRouterProvider) {
// Redirect to home page if no other URL matches
$urlRouterProvider.otherwise('/');
// *** Set up UI states ***
$stateProvider
// Home page
.state('home', {
url: '/',
templateUrl: 'src/shoppinglist/templates/home.template.html'
})
// Categories list page
.state('categories', {
url: '/categories',
templateUrl: 'src/shoppinglist/templates/main-categories.template.html',
controller: 'MainCategoriesListController as category',
resolve: {
items: ['MenuDataService', function (MenuDataService) {
var promise= MenuDataService.getAllCategories();
promise.then(function (result) {
console.log("items : ",result.data);
})
}]
}
});
}
})();
And here is my service:
(function () {
'use strict';
angular.module('data')
.service('MenuDataService',MenuDataService);
MenuDataService.$inject=['$http'];
function MenuDataService($http) {
var service=this;
service.getAllCategories=function () {
var response=$http({
method: "GET",
url: "https://davids-restaurant.herokuapp.com/categories.json"
})
.then(function (result) {
console.log("Categories : ",result.data);
});
//console.log("getAllCategories data : ",response.data);
return response;
}
})();
data is another module and it is defined as dependency for MenuApp module. Both these are modules are declared in separate files. All components are defined in separate files.
Please help me with the solution to this problem.
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' },
});
}
}());
I have three files app.js, common.services.js and tokenContainer.js . When i tried to inject tokenContainer dependency to interceptor of app.js, I get an error :
Uncaught Error: [$injector:unpr] Unknown provider: tokenContainerProvider <- tokenContainer <- $http <- $templateRequest <- $compile
common.service.js file
(function () {
"use strict";
angular
.module("common.services",
["ngResource"])
.constant("appSettings",
{
serverPath: "http://localhost:6359"
});
}());
tokenContainer.js file :
(function () {
"use strict";
angular
.module("common.services")
.factory("tokenContainer",
[tokenContainer])
function tokenContainer() {
var container = {
token: ""
};
var setToken = function (token) {
container.token = token;
};
var getToken = function () {
};
return {
getToken: getToken
};
};
})();
app.js file :
(function () {
var app = angular.module("productManagement",
["ngRoute", "common.services"]);
app.config(function ($routeProvider, $httpProvider) {
$routeProvider
.when("/products", {
templateUrl: "app/products/productListView.html",
controller: "ProductListCtrl as vm"
})
.when("/products/create", {
templateUrl: "app/products/productCreateView.html",
controller: "ProductCreateCtrl as vm"
})
.when("/login", {
templateUrl: "app/login/login.html",
controller: "loginController as vm"
})
.otherwise({ redirectTo: "/products" });
$httpProvider.interceptors.push(function (appSettings, tokenContainer) {
return {
'request': function (config) {
// ToDo :
return config;
}
};
});
});
}());
Im try to use Oboe.Js and Angular.Js together
Here is my sample code which is working correctly..
angular.module('myApp', ['ng-oboe'])
.config(function (oboeProvider) {
/* If we were so inclined, we could change the oboe defaults here - headers, etc. */
// oboeProvider.defaults = {};
})
.controller('myCtrl', function ($scope, oboe) {
$scope.test = "Yo.";
$scope.items = [];
oboe.get('http://localhost:4243/containers/f78257b77b21/stats')
.start(function (data, etc) {
})
.node('!', function (value) {
})
.done(function (value) {
console.log("It works! ", value.read);
$scope.items.push(value);
})
.fail(function (error) {
console.log("Error: ", error);
});
});
But when I try to use these code with my actual project controller. I'm getting this error. I can't figure out Why I'm getting this.
Error : TypeError: Cannot read property 'get' of undefined
module.js
angular.module('RDash', ['ui.bootstrap', 'ui.router', 'ngCookies','ng-oboe'])
.config(function (oboeProvider) {
/* If we were so inclined, we could change the oboe defaults here - headers, etc. */
// oboeProvider.defaults = {};
});
stats-ctrl.js
angular
.module('RDash')
.controller('StatsCtrl', ['$scope', '$stateParams', StatsCtrl]);
function StatsCtrl($scope, $stateParams, oboe) {
var id = $stateParams.id;
$scope.myData = [];
$scope.items = [];
console.log('http://localhost:4243/containers/' + id + '/stats');
oboe.get('http://localhost:4243/containers/' + id + '/stats')
.start(function (data, etc) {
console.log("Dude! We're goin'!", data, etc);
})
.node('!', function (value) {
})
.done(function (value) {
console.log("It works! ", value.read);
})
.fail(function (error) {
console.log("Error: ", error);
});
}
Inside your controller function you have obe factory has no value(undefined), because it haven't been injected inside DI array.
angular
.module('RDash')
.controller('StatsCtrl', ['$scope', '$stateParams', 'obe', StatsCtrl]); //<-inject obe here
function StatsCtrl($scope, $stateParams, oboe) {
It's been a few weeks with this problem, I'm new to Angular so I hope is an easy fix.
I'm using Angular Bootstrap Modal (ui.bootstrap.modal) and it's not working. this is my code.
On contentApp.js (with additional config options)
angular
.module('contentApp', [
'ui.bootstrap',
'ui.router',
'satellizer',
'angular-jwt',
'angular.morris-chart'
])
// Additional Configuration...
On TransModalController.js
angular
.module('contentApp')
.controller('TransModalController', TransModalController)
.controller('MICnewGroup', MICnewGroup)
.controller('MICaddTransmitter', MICaddTransmitter);
function TransModalController($scope, $http, $uibModal, $log) {
$scope.openModal = function (url) {
var ModalInstanceController = "";
if ('newGroup' == url) {
url = "php/modal/newGroup.html";
ModalInstanceController = 'MICnewGroup'
} else if ('addTransmitter' == url) {
url = "php/modal/addTransmitter.html";
ModalInstanceController = 'MICaddTransmitter'
};
var modalInstance = $uibModal.open({ //<-- Line 26
animation: true,
templateUrl: url,
controller: ModalInstanceController,
size: 'sm',
resolve: {
user: $scope.sub
}
});
};
}
// Controller for Modal Instance of New Group
function MICnewGroup($scope, $http, $state, $uibModalInstance, user) {
$scope.newGroup = {
'user': user,
'name': ''
}
$scope.createGroup = function() {
$http.post('api/user/'+$scope.sub+'/group', $scope.newGroup)
.then(function(data) {
$state.go($state.current, {}, {reload: true}); //second parameter is for $stateParams
$uibModalInstance.close();
}
);
}
}
// Controller for Modal Instance of Add Transmitter
function MICaddTransmitter($scope, $http, $state, $uibModalInstance, user) {
$scope.newTransmitter = {
'user': user,
'code': ''
}
$scope.addTransmitter = function() {
$http.put('api/transmitter/'+$scope.newTransmitter.code, $scope.newTransmitter)
.then(function(data) {
$state.go($state.current, {}, {reload: true}); //second parameter is for $stateParams
$uibModalInstance.close();
}
);
}
}
All this works fine on my localhost (Mac), but when uploaded to my Server (Ubuntu) throws me this error
angular.js:12477Error: [$injector:unpr] Unknown provider: 3Provider <- 3
http://errors.angularjs.org/1.4.7/$injector/unpr?p0=3Provider%20%3C-%203
at angular.js:68
at angular.js:4289
at Object.getService [as get] (angular.js:4437)
at angular.js:4294
at Object.getService [as get] (angular.js:4437)
at ui-bootstrap-tpls.js:4056
at Object.forEach (angular.js:350)
at getResolvePromises (ui-bootstrap-tpls.js:4052)
at Object.$modal.open (ui-bootstrap-tpls.js:4097)
at Scope.TransModalController.$scope.openModal (TransModalController.js:26)
Angular is v1.4.7, ui.bootstrap is v0.14.3
Why it works on my Localhost but not on my Server?
Most likely due to minification, see the 'A note on minification' section at this link