Would anyone know why my service is not being passed into controller. I receive an error: Argument 'fn' is not a function.
references within my main web page:
<script src="~/js/app-categories.js"></script>
<script src="~/js/addingNewTaskService.js"></script>
<script src="~/js/addNewTaskController.js"></script>
app-categories.js:
(function () {
"use strict";
angular.module("app-categories", ["simpleControls", "ngRoute", "ngAnimate", "addNewTask"])
.config(function ($routeProvider) {
...
});
})();
addingNewTaskService.js:
(function () {
"use strict";
alert("inside service");
angular.module("app-categories")
.service('addingNewTaskService'), function () {
};
})();
addNewTaskController.js:
(function () {
"use strict";
angular.module("app-categories")
.controller("addNewTaskController", addNewTaskController);
function addNewTaskController($scope, $http, addingNewTaskService) {
...
}
})();
You have a syntax error here:
.service('addingNewTaskService'), function () {
};
That should be:
.service('addingNewTaskService', function() {
});
Related
How to Define a new function in angular can anybody please help me out
My code is like this:
var app = angular.module('rtsApp', ['ngMaterial', 'ngMessages', 'ngStorage','ngRoute', 'restangular','timepickerPop', 'ngStomp', 'ngCookies', 'angular-cron-gen','uiSwitch','ngMaterial', 'md.data.table']);
app.config(function(RestangularProvider) {
newFunction(RestangularProvider);//I need newFunction here
RestangularProvider.setDefaultHeaders({
"X-API-KEY": "sks#2017",
"Content-Type": "application/json"
});
Actually I am Getting This Error
Failed to instantiate module rtsApp due to:
ReferenceError: newFunction is not defined
at http://localhost:3000/dist/js/scripts.min.js:1738:5
at Object.invoke (http://localhost:3000/dist/js/vendor.min.js:82:460)
at d (http://localhost:3000/dist/js/vendor.min.js:80:333)
at http://localhost:3000/dist/js/vendor.min.js:80:472
at q (http://localhost:3000/dist/js/vendor.min.js:46:7)
at g (http://localhost:3000/dist/js/vendor.min.js:80:234)
at gb (http://localhost:3000/dist/js/vendor.min.js:84:352)
at c (http://localhost:3000/dist/js/vendor.min.js:60:57)
at Wc (http://localhost:3000/dist/js/vendor.min.js:60:370)
at ye (http://localhost:3000/dist/js/vendor.min.js:59:45)
try it :-
another scenario is follow below code,
'use strict';
var deck = angular.module('app',
['ui.router',other lib...]);
angular.module("app").config(["$breadcrumbProvider", "$httpProvider", function ($breadcrumbProvider, $httpProvider) {
$breadcrumbProvider.setOptions({
prefixStateName: 'userHome.main',
template: 'bootstrap3'
});
//Do No Remove This Line
$httpProvider.defaults.withCredentials = true;
}]);
Create a file and define a module in the file. For example create globalFunctions.js and add this file to your index.html file with this :
<script src="/path/to/file/location/globalFunctions.js"></script>
Define a module and also your global functions. like this:
(function () {
angular.module('test', []);
})();
function test() {
console.log("test");
}
Inject it in main app (app.module.js) and call it:
(function() {
'use strict';
var app = angular.module('app', [
'test',
...
]);
app.config(function($routeProvider, $locationProvider) {
test();
});
})();
Update
All files for a simple test:
app.module.js
(function () {
var app = angular.module('app', [
'ngRoute',
'global'
]);
app.config(function ($routeProvider, $locationProvider) {
test();
});
})();
test.module.js
(function () {
angular.module('global', []);
})();
function test() {
console.log("it is test function here");
}
index.html
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.16/angular-route.min.js"></script>
<script src="app.module.js"></script>
<script src="test.module.js"></script>
<body ng-app="app">
<h2>It is a test</h2>
</body>
</html>
This Plunker provided for my solution
I'm trying to use a service from my main module that I'm going to use everywhere.
This is my controller where I would like to use it:
(function () {
'use strict';
angular.module('app.page')
.controller('authCtrl', ['$scope', '$window', '$location','requestService', authCtrl]);
function authCtrl($scope, $window, $location, requestService) {
$scope.login = function() {
requestService.test();
}
}
})();
module:
(function () {
'use strict';
angular.module('app.page',['app']);
})();
Service
(function () {
'use strict';
angular.module('app')
.service('requestService',requestService);
function requestService() {
this.test = function()
{
alert('test');
}
}
})();
But the requestService() is not found in my controller. What am I doing wrong here?
--EDIT--
error message:
angular.js:13424 Error: [$injector:unpr] http://errors.angularjs.org/1.5.3/$injector/unpr?p0=requestServiceProvider%20%3C-%20requestService%20%3C-%20authCtrl
at Error (native)
at http://localhost:3000/bower_components/angular/angular.min.js:6:416
at http://localhost:3000/bower_components/angular/angular.min.js:43:7
at Object.d [as get] (http://localhost:3000/bower_components/angular/angular.min.js:40:270)
at http://localhost:3000/bower_components/angular/angular.min.js:43:69
at d (http://localhost:3000/bower_components/angular/angular.min.js:40:270)
at e (http://localhost:3000/bower_components/angular/angular.min.js:41:1)
at Object.invoke (http://localhost:3000/bower_components/angular/angular.min.js:41:86)
at S.instance (http://localhost:3000/bower_components/angular/angular.min.js:88:235)
at n (http://localhost:3000/bower_components/angular/angular.min.js:64:174) <section data-ui-view="" class="view-container {{main.pageTransition.class}} ng-scope" data-ng-animate="1">
When you defined your service module you didn't provide an empty dependency array to create a new module. Angular will try to find an existing app module and not find it. You need to define your service module like this:
(function () {
'use strict';
angular.module('app', [])
.service('requestService',requestService);
function requestService() {
this.test = function()
{
alert('test');
}
}
})();
What do i have to do in myService.js to access the constant 'appSettings' from app.js?
app.js
(function () {
'use strict';
angular
.module('myApp', ['ngMaterial'])
.constant('appSettings', {
someValue: 123
})
})();
Here is my services/myService.js
(function () {
'use strict';
angular
.module('myApp')
.factory('myService', ['appSettings', MyService]);
function MyService(appSettings) {
console.log(appSettings.someValue)
}
})();
Browser's console says appSettings.someValue is undefined`
Not sure what is the problem you are facing but I can access the value.
(function() {
'use strict';
angular
.module('myApp', [])
.constant('appSettings', {
someValue: 123
})
})();
(function() {
'use strict';
angular
.module('myApp')
.factory('myService', ['appSettings', MyService]);
function MyService(appSettings) {
console.log(appSettings.someValue);
alert(appSettings.someValue);
return {
foo: function() {}
}
}
angular.module("myApp")
.controller("sa", function($scope, myService) {
myService.foo();
})
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="sa"></div>
Was building out an angular application, but am getting error undefined with the service or factory. Specifically "can not read property of setName undefined". I have went here to figure out my error. Even changed around my syntax figuring I maybe had something out of place but still throwing an undefined error.
Here is the controller:
(function() {
"use strict";
angular
.module("app", [])
.controller("mainCtrl", ["$scope", mainCtrl]);
function mainCtrl($scope, productService) {
$scope.testService = productService.setName("Data Service");
}
}());
Here is the service script:
(function() {
"use strict";
angular
.module("app")
.service("productService", function() {
var serviceObj = {};
serviceObj.name = '';
serviceObj.setName = function(newName) {
serviceObj.name = newName;
};
return serviceObj;
});
}());
Originally, I had the service as :
(function() {
"use strict";
angular
.module("app")
.service("productService", setName);
function setName(newName) {
var serviceObj = {};
serviceObj.name = '';
serviceObj.setName = function(newName) {
serviceObj.name = newName;
};
return serviceObj;
}
}());
I've had this problem recently and it seems to be that the function must be defined before the controller is created. I would recommend doing it the following way:
(function () {
"use strict";
//function
function mainCtrl($scope, productService) {
$scope.testService = productService.setName("Data Service");
}
//Controller and Module Init
angular
.module("app", [])
.controller("mainCtrl", mainCtrl);
//Inject requirements (This is needed for Minification)
mainCtrl.$inject = ["$scope", "productService"];
}());
Example... Plunker
addon.js:
(function () {
'use strict';
angular.module('jzAddons', [])
.factory('jzThemeFac', function () {
return {
themes:[
{
name: 'none',
url: '',
margin: '8px',
bg: '#ffffff'
},
{
name: 'amelia',
url: '//netdna.bootstrapcdn.com/bootswatch/3.1.0/amelia/bootstrap.min.css',
margin: '6px',
bg: '#108a93'
}
],
changeTheme: function (theme) {
var oldLink = angular.element('#bootstrapTheme');
oldLink.remove();
if (theme.name !== 'none') {
var head = angular.element('head');
head.append('<link id="bootstrapTheme" href="' + theme.url + '" rel="stylesheet" media="screen">');
}
currentTheme = theme;
}
};
});
})();
app.js:
var app = angular.module('example', ['jzAddons']);
(function () {
'use strict';
app.controller('MainCtrl', ['jzThemeFac', function ($scope, jzThemeFac) {
$scope.themes = jzThemeFac.themes; /* Error comes from this line */
}]);
})();
At the bottom of my body tag I've got:
<script src="addon.js"></script>
<script src="app.js"></script>
I keep getting the error:
TypeError: Cannot read property 'themes' of undefined
Your factory inject was wrong, you can do:
app.controller('MainCtrl', ['$scope', 'jzThemeFac', function ($scope, jzThemeFac) {...
or just:
app.controller('MainCtrl', function ($scope, jzThemeFac) {
edit: you can also move:
(function () {
'use strict';
to the beginning of file
You need to remember to inject $scope into your MainCtrl. So app.js should look like this:
var app = angular.module('example', ['jzAddons']);
(function () {
'use strict';
app.controller('MainCtrl', ['$scope', 'jzThemeFac', function ($scope, jzThemeFac) {
$scope.themes = jzThemeFac.themes; /* Error comes from this line */
}]);
})();