I decided to add ngInfinitiScroll plugin to my application. Hence i called the file :
<script type="text/javascript" src="{!! asset('/js/ng-infinite-scroll.min.js') !!}"></script>
In my events.js file i initiated the module like this:
(function(window) {
// Define the `app` module
var app = angular.module('stayhyper', ['infinite-scroll']);
app.controller('eventController', ['$scope', '$rootScope', '$http', 'myService',
function($scope, $rootScope, $http, myService) {
} // end of main function
]); // end of controller
})(window);
Then I get the following error:
Error: $injector:unpr Unknown Provider
Unknown provider: myServiceProvider <- myService<- eventController
MyService (this is in a seperate js file which is loaded in the header):
app.service('myService', function() {
this.URL= function() {
// set the main route of the site
var subhost = "/"
if (window.location.host == "localhost") {
subhost = "/myapp/public/"
}
window.urlRoot = window.location.origin + subhost;//main root of the site
return window.urlRoot;
}
this.APIURL= function() {
// set the main route of the site
var subhost = "/api/"
if (window.location.host == "localhost") {
subhost = "/myapp/public/api/"
}
window.urlRoot = window.location.origin + subhost;//main root of the site
return window.urlRoot;
}
});
You need to load the event.js initially and then mainapp.js , then only the module will be created initially, also make sure you have added the references in html for infinite-scroll
So the order will be,
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.2.2/ng-infinite-scroll.js"></script>
<script type="text/javascript" src="mainapp.js"></script>
<script type="text/javascript" src="event.js"></script>
also make sure you are not calling the module again.
Related
I have an angularJS app with three modules: myApp(parent/core module), services(contains all the factories and services), and controllers(contains all the controllers).
This is my app.js file
angular.module('services', []);
angular.module('controllers', []);
var app = angular.module('myApp', ['services', 'controllers']);
I read here that setting up my modules and defining dependencies in this way will allow each of my modules to access the other without having to inject the dependencies.
Here's my index.html file
<script src="/js/app.js"></script>
<script src="/js/services/testFactory.js"></script>
<script src="/js/controllers/testCtrl.js"></script>
testFactory.js file
angular.module('services').factory('testFactory', ['$rootScope', 'apiCall', function($rootScope, apiCall){
let testFactory = {};
testFactory.testFunc = function(){
console.log('testFactory.testFunc called');
}
return testFactory;
}])
testCtrl.js file
angular.module('controllers').controller('testCtrl', ['$scope', 'testFactory', function($scope, testFactory){
console.log("inside testCtrl");
$scope.testing = function(){
console.log("testing function called");
testFactory.testFunc();
}
}])
When I call the testFactory.testFunc inside the myApp module, it functions correctly. But, when I try calling it in the controller module, I'm getting the following error
TypeError: Cannot read property 'testFunc' of undefined
I even tried injecting the service module inside the controller module as a dependency, but I still got the same error.
How do I get the service module to work inside the controller module?
I have a factories called ReportService and IndexService. I want to use IndexService inside of ReportService.
But in ReportService, it says that the IndexService is undefined. I'm not quite sure why.
Here's my code so far:
indexService.js
angular.module('IndexService', []).factory('IndexService', ['$http', function ($http) {
return {
// Sending npm config from server (node) to front-end as JSON so we can use it in front-end.
// See localhost.json.
getConfig: function() {
return $http.get("/api/get-config");
}
}
}]);
reportService.js
angular.module('ReportService', []).factory('ReportService', ['$http', 'IndexService', function ($scope, $http, IndexService) {
// Sending npm config from server (node) to front-end as JSON so we can use it in front-end.
// See localhost.json.
IndexService.getConfig()
.then(function(response) {
var configs = response.data
});
return {
generateExcelReport: function(searchCriteriaList) {
var requestConfig = {
responseType: "arraybuffer",
headers: { "Content-Disposition": "attachment" }
};
// I want to call IndexService.getConfig()
// so I can change my base URL and port based on environment. My configs are in node.js back-end
var url = configs.url;
var port = configs.port;
return $http.post(url + ":" port + "/my-api-link", searchCriteriaList, requestConfig);
},
}
}]);
app.js
angular.module('myApp', ['ngStorage', 'ngRoute', 'appRoutes', 'IndexController', 'IndexService', 'ReportController', 'ReportService', 'PackageController', 'PackageService', 'FarmService', 'DesignService', 'UserService', 'oitozero.ngSweetAlert', 'ui.select', 'ui.materialize', 'ngSanitize', 'ngFileSaver'])
my index.html script imports
<!-- Our Angular Controllers and Services JS -->
<script src="./js/controllers/indexController.js"></script>
<script src="./js/controllers/reportController.js"></script>
<script src="./js/controllers/nerdController.js"></script>
<script src="./js/controllers/packageController.js"></script>
<script src="./js/services/indexService.js"></script>
<script src="./js/services/reportService.js"></script>
<script src="./js/services/farmService.js"></script>
<script src="./js/services/packageService.js"></script>
<script src="./js/services/designService.js"></script>
<script src="./js/services/userService.js"></script>
<script src="./js/appRoutes.js"></script>
<script src="./js/app.js"></script>
Kindly help. I've been over 2 hours on this and I can't still find the problem.. Thanks in advance :)
You need to inject it first, like:
angular
.module('ReportService')
.factory('ReportService', ReportService);
ReportService.$inject = ['IndexService'];
function ReportService(IndexService) {
// You code blah blah here
}
At least this is a way, how i am doing.
<html>
<head>
</head>
<body>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script type="text/javascript">
var appName = "renameMe";
var fooModule = angular.module("foo", []);
var app = angular.module(appName, ["foo"]);
//var app = angular.module(appName, ["ui.router"]);
app.config(["foo", function (foo) {
}]);
angular.element(function () {
angular.bootstrap(document, [appName]);
});
</script>
I cannot figure out how to fix my code from getting the below error. Why am I getting this error and how can I fix it?
My End game is to have a standalone module injected into
app.config(["foo", 'function(foo){}]);
So I can run some custom code
Error: $injector:unpr Unknown Provider Unknown provider: foo
foo module is already included to renameMe module with
var app = angular.module(appName, ["foo"]);
While
app.config(["foo", function (foo) {...}]);
expects that there will be foo service (more specifically, constant service). If there is none, $injector:unpr error is triggered.
If there is supposed to be no foo service, it should be just
app.config(function () {...});
Whichever factory is listed first is always getting this error:
Uncaught Error: [$injector:unpr] Unknown provider: SocketProvider <- Socket
at ionic.bundle.js:13380
or
Error: [$injector:unpr] Unknown provider: CommandsProvider <- Commands <- Command
at ionic.bundle.js:25642
If it's put in one file like the starters are, they work fine, but that organization is horrible and this is the way I do it with regular Angular apps.
INDEX:
<script src="app.js"></script>
<script src="services/socket.service.js"></script>
<script src="services/commands.service.js"></script>
<script src="controllers/connect.controller.js"></script>
<script src="controllers/command.controller.js"></script>
Service structure:
socket.service.js
(function(){
'use strict';
angular.module('tacoCorp.services', [])
.factory('Socket', Socket);
Socket.$inject = ['socketFactory'];
function Socket(socketFactory) {
// do factory stuff
}
}());
commands.service.js
(function(){
'use strict';
angular.module('tacoCorp.services', [])
.factory('Commands', Commands);
Commands.$inject = [];
function Commands() {
// more factory stuff
}
}());
Controller structure:
(function (){
'use strict';
angular.module('tacoCorp.controllers')
.controller('Command', Command);
Command.$inject = ['$scope', 'Socket', 'Commands'];
function Command($scope, Socket, Commands) {
// controller jamz
}
})();
You actually define module 'tacaCorp.services' two times thats why first module is overwritten...
You should write module defination in another file then get it at services js files...
(function(){
'use strict';
angular.module('tacoCorp.services', []);
}());
as you see we define module with no dependency. Next get module and add your services on it.
(function(){
'use strict';
angular.module('tacoCorp.services')
.factory('Commands', Commands);
Commands.$inject = [];
function Commands() {
// more factory stuff
}
}());
as you see for getting module you only have to call angular.module('tacoCorp.services') like that if you add second argument then you set it instead of get it, this is your mistake actually.
I try to add 2 Services to my AngularJS Module. One should access my Employees and one my Products, but I get an Unknown provider: EmployeeServiceProvider <- EmployeeService <- BookingController.
All Javascript-Files are added to the html.
App/Module
var coffeewatchApp = angular.module('coffeewatchApp', [
'ngRoute',
'coffeewatchControllers',
'coffeewatchServices'
]);
//Routing
var coffeewatchControllers = angular.module('coffeewatchControllers', []);
var coffeewatchServices = angular.module('coffeewatchServices', []);
EmployeeService.js
var coffeewatchServices = angular.module('coffeewatchServices', ['ngResource']);
var employeeServiceUrlPart = "EmployeeService/";
coffeewatchServices.factory('EmployeeService', ['$resource',
function($resource){
return $resource('all/', {}, {
all: {method:'GET',url:REST_BASEURL+employeeServiceUrlPart+"all", params:{}, isArray:true}
});
}]);
ProductController.js is exactly the same but with Product
var coffeewatchServices = angular.module('coffeewatchServices', ['ngResource']);
var productServiceUrlPart = "ProductService/";
coffeewatchServices.factory('ProductService', ['$resource',
function($resource){
return $resource('all/', {}, {
all: {method:'GET',url:REST_BASEURL+productServiceUrlPart+"all", params:{}, isArray:true}
});
}]);
Controller accessing the two Services
coffeewatchControllers.controller('BookingController', ['$scope', 'EmployeeService', 'ProductService',
function ($scope, EmployeeService, ProductService) {
$scope.employees = EmployeeService.all();
$scope.products = ProductService.all();
}]);
Any help is appreciated; Thanks in advance.
EDIT:
I implemented the EmployeeService first and everything was working great.
So I don't really understand why adding the ProductService kills my EmployeeService. The only thing I can think of is that the ProductService somehow "overwrites" my EmployeeService because it gets injected second.
All added JS-Files in index.html
<script src="js/config/app-config.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/DashboardController.js"></script>
<script src="js/controllers/StatisticController.js"></script>
<script src="js/controllers/BookingController.js"></script>
<script src="js/services/EmployeeService.js"></script>
<script src="js/services/ProductService.js"></script>
EDITEDIT
After looking at this answer I am even more confused why my code is not working, but maybe the other code will help somone spotting the difference.
In both of your controller files, retrieve the module like this (remove dependency list) -
var coffeewatchServices = angular.module('coffeewatchServices');
Add the dependency to ngResource here instead, while declaring in App/Module -
var coffeewatchServices = angular.module('coffeewatchServices', ['ngResource']);
Your module is getting re-created on the second call in ProductController, so overriding previous module and service definitions.