This works:
'use strict';
angular.module('MyApp').service('searchControllerPersistentData', ['$state', function ($state)
{
const Self = this;
}]);
but this gives an error in the controller where I try to inject the service:
'use strict';
angular.module('MyApp').service('searchControllerPersistentData', ['', function ()
{
const Self = this;
}]);
The service will not need anything injected into it. How do I declare it?
Just remove the brackets :
angular.module('MyApp').service('searchControllerPersistentData', function ()
{
const Self = this;
});
Related
I have tried creating a controller using meanjs.org. The controller is working fine with the other existing controllers but it is not working fine with new one I have created, Help would be appreciated, Thank you.
angular.js:12808 Error: [ng:areq] Argument
'TestownerControllerController' is not a function, got undefined
http://errors.angularjs.org/1.4.14/ng/areq?p0=TestownerControllerController&p1=not%20aNaNunction%2C%20got%20undefined
this is my controller code
(function() {
'use strict';
angular.module('users').controller('TestownerControllerController', TestownerControllerController);
TestownerControllerController.$inject = ['$scope'];
function TestownerControllerController($scope) {
var vm = this;
// Testowner controller controller logic
// ...
init();
function init() {
}
}
})();
In your case you miss [] where you define user app angular.module('users')...
[]: it's required and we use it to inject other modules.
also you can set a config in your app like this:
app.config(["$controllerProvider", "$compileProvider", "$filterProvider", "$provide", function ($stateProvider, configs, $controllerProvider, $compileProvider, $filterProvider, $provide) {
app.controller = $controllerProvider.register;
app.directive = $compileProvider.register;
app.filter = $filterProvider.register;
app.factory = $provide.factory;
app.service = $provide.service;
app.constant = $provide.constant;
}]);
This config help you to register a module with others dependencies.
//our main app
var app = angular.module('users', [])
//our controller
function testController($scope) {
function init() {
//somthing
}
init();
}
testController.$inject = ['$scope'];
app.controller('testController', testController);
I have seen a lot of topic like that, but i didn't find solution.
I'm getting this error Error:
$injector:unpr Unknown Provider
Unknown provider: restaurantsProvider <- restaurants <- restaurantsController
Here is my controller:
(function () {
'use strict';
angular
.module('myApp')
.controller('restaurantsController', restaurantsController);
restaurantsController.$inject = ['$scope', 'restaurants'];
function restaurantsController($scope, restaurants) {
$scope.restaurants = restaurants.query();
}
})();
And service file:
(function () {
'use strict';
var restaurantsService = angular.module('restaurantsService', ['ngResource']);
restaurantsService.factory('restaurantsService', ['$resource', function ($resource) {
return $resource('/api/restaurants', {}, {
query: { method: 'GET', params: {}, isArray: true }
});
}]);
})();
If it affects on something, I'm using ASP.NET.
That error indicates that you are trying to inject something that angular doesn't know about. There are a few issues I'm seeing with your app structure which are leading to this issue...
You never actually declare your "myApp" module which is where you need to inject your restaurantService app.
Your controller takes in a 'restaurant' dependency but the service is actually called 'restaurantsService'
I would expect the app structure to look something like this:
(function () {
'use strict';
var restaurantsServiceApp = angular.module('restaurantsServiceApp', ['ngResource']);
restaurantsServiceApp.factory('restaurantsService', ['$resource', function ($resource) {
return $resource('/api/restaurants', {}, {
query: { method: 'GET', params: {}, isArray: true }
});
}]);
})();
(function () {
'use strict';
var myApp = angular.module('myApp', ['restaurantsServiceApp']);
myApp.controller('restaurantsController', restaurantsController);
restaurantsController.$inject = ['$scope', 'restaurantsService'];
function restaurantsController($scope, restaurantsService) {
$scope.restaurants = restaurantsService.query();
}
})();
Your serviceApp needs to be declared prior to it being injected in the other app.
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"];
}());
I have a baseController and a childController
Whenever I add modules to the baseController the app fails with the error:
Argument 'childController' is not a function, got undefined
EDIT: added a plnkr
http://plnkr.co/edit/mi9Ytv0HaqE47ENod4Gn
So this works:
angular
.module('app')
.controller('BaseController', baseController);
angular
.module('app', ['ui.grid', 'ui.grid.pagination'])
.controller('ChildController', childController)
childController.$inject = ['$controller'];
function childController($controller) {
var self = this;
var baseController = $controller('BaseController', {
$scope: self
});
But this below does not work: (note the add of the 'ui.bootstrap' in the baseController module section....)
angular
.module('app', ['ui.bootstrap'])
.controller('BaseController', baseController);
angular
.module('app', ['ui.grid', 'ui.grid.pagination'])
.controller('ChildController', childController)
childController.$inject = ['$controller'];
function childController($controller) {
var self = this;
var baseController = $controller('BaseController', {
$scope: self
});
You are defining the app module twice. I'm not clever enough to determine what's happening, but it should probably look like this instead:
angular
.module('app', ['ui.grid', 'ui.grid.pagination'])
.controller('BaseController', baseController)
.controller('ChildController', childController);
For inheritance you can use standard JavaScript inheritance patterns. Here is a demo which uses $injector.
function Parent($scope) {
$scope.name = 'Human';
$scope.clickParent = function() {
$scope.name = 'Clicked from base controller';
}
}
function Child($scope, $injector) {
$injector.invoke(Parent, this, {$scope: $scope});
$scope.name = 'Human Child';
$scope.clickChild = function(){
$scope.clickParent();
}
}
Child.prototype = Object.create(Parent.prototype);
I have an AngularJS factory which I am attempting to use to create modals. However, when I attempt to use the resolve method in the $modal my modal instance controller gets an unresolved provider.
Here is how I am calling my factory from my controller:
var modalOptions = {
template: 'app/common/modalwindow.html',
data: data
};
modalFactory.openModal(modalOptions);
My modal factory is simple for now, all it has is a single open modal method:
(function() {
'use strict';
var factoryId = 'modalFactory';
angular.module('app').factory(factoryId, ['$modal', modalFactory]);
function modalFactory($modal) {
var factory = {
openModal: openModal
}
return factory;
function openModal(data) {
$modal.open({
templateUrl: data.template,
controller: 'modalInstanceCtrl',
resolve: {
modalData: function () {
return data.data;
}
}
});
}
}
})();
However, when my modalInstanceCtrl is called it throws an error. Here is my modalInstanceCtrl
(function () {
'use strict';
var controllerId = 'modalInstanceCtrl';
angular.module('app').controller(controllerId, ['common', 'modalData', modalInstanceCtrl]);
function modalInstanceCtrl(common, modalData) {
var getLogFn = common.logger.getLogFn;
var log = getLogFn(controllerId);
log(modalData);
};
})();
The error it throws is:
Unknown provider: modalDataProvider <- modalData <- modalInstanceCtrl
I thought the resolve in the $modal would handle this injection. Am I assuming wrong here?