We Keep Coding

Uncaught ReferenceError: MainCategoriesListController is not defined error is coming

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.

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']);
});
});})();

How to add promise for templateUrl in Angular Js

I want to show UI after all promises has complete.
When I move to any step , before this I do some code execution.
I am stuck here my templateURl gets executed synchronously. I want templateUrl should execute once all execution has been completed (from .run method).
below is my app.js
(function () {
"use strict";
var app = angular.module("autoQuote", ["ui.router", "ngResource"]);
app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state("Cars", {
url: "",
templateUrl: "/rc1/renderStep/cars"
})
.state("Drivers", {
url: "/drivers",
templateUrl: "/rc1/renderStep/drivers",
controller: "renderStepCtrl",
})
}])
app.run(["$log", "$rootScope", "$state", "dtoResource", "questionResource", "postDtoFactory", function ($log, $rootScope, $state, dtoResource, questionResource, postDtoFactory) {
$log.info('Post DTO on page load.');
$rootScope.$state = $state;
dtoResource.rc1LoadDTO()
.then(function (data) {
$rootScope.AutoQuote = data;
postDtoFactory.postDto()
.then(function (data) {
questionResource.getQuestions($rootScope.AutoQuote.postAutoQuoteObj.SessionInfo.StateCode)
.then(function (questions) {
console.log('questions', questions);
$rootScope.questions = questions;
//$rootScope.answers = {PC:12345,VehicleYear_1:2017}; // test code
console.log('Obtained questions. Assigned to rootscope');
})
})
})
.then(function () {
console.log('This should be printed after the above methods are done executing');
console.log($rootScope);
})
}])
}());

you can put the code to ui-router resolve.
$stateProvider.state('demo', {
url: '/demo',
template: require('./views/demo.html'),
controller: 'DemoController as vm',
resolve: {
resolvedInfo: [demoService,
function (demoService) {
//put some code execution
return promise;
}]
}
})

safari error angular controller not a function

I have a error where Safari is trowing error that my controllers are not a function
Error: [ng:areq] Argument 'TranslateController' is not a function, got undefined
My router calling controller here ->
(function() {
'use strict';
angular
.module('welcome.module')
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider,
$urlRouterProvider) {
$stateProvider
.state('welcome', {
url: '/welcome',
views: {
'header': {
templateUrl: 'app/welcome/header.html',
controller: 'TranslateController'
},
'sidebar': {},
'content': {
templateUrl: 'app/welcome/welcome.html',
controller: 'WelcomeController'
},
'footer': {
templateUrl: 'app/welcome/footer.html',
controller: 'WelcomeFooterController'
}
}
})
}]);
})();
My controller ->
(function() {
'use strict';
angular
.module('welcome.module')
.controller('TranslateController', TranslateCtrl);
TranslateCtrl.$inject = ['$translate', '$scope'];
function TranslateCtrl($translate, $scope) {
'ngInject';
const self = this;
$scope.headerFix = true;
activate();
function activate() {
translate();
}
function translate() {
$scope.changeLanguage = function(langKey) {
$translate.use(langKey);
};
}
}
})();
I have definition of the module of course:
(function() {
'use strict';
angular
.module('welcome.module', [
'ui.router'
]);
})();
I defined controllers and modules and everything in my html.
Everything is working smooth on mozila and chrome but not on Safari :(
Do you have any idea how to solve this issue ?

angular.module('welcome.module')
.controller('TranslateController', ['$scope', '$translate',
function($scope, $translate) {
$scope.headerFix = true;
activate();
function activate() {
translate();
}
function translate() {
$scope.changeLanguage = function(langKey) {
$translate.use(langKey);
};
}
}
]);
Fixed it

error on dependency injection in interceptor

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;
}
};
});
});
}());