I want to create seperate module for pagination, because I will need it to reuse in different modules, but I don't know how to call a function from module dependency (another module)
Here is my main module:
var App = angular.module('search', ['pagination']);
App.controller('MainController', ['$scope', '$pagination' function($scope, $pagination) {
$scope.testFunction(); //function from pagination module controller
}])
Here is my pagination module:
var App = angular.module('pagination', []);
App.controller('PaginationController', ['$scope', function($scope) {
$scope.testFunction = function(){
console.log("pagination module");
}
}])
I get error:
Error: [$injector:unpr] Unknown provider: $paginationProvider <- $pagination
To share resources across two modules, declare a factory or a service.
Suppose you have a search module:
//you inject your pagination module here
var searchModule = angular.module('search', ['pagination']);
//and you ALSO need to inject your pagination's service into your controller
searchModule.controller('MainController', ['$scope', 'paginationSvc' function($scope, paginationSvc) {
//function from pagination module controller
paginationSvc.testFunction();
}])
And your pagination module:
var pagination = angular.module('pagination', []);
//declare your pagination service here
pagination.factory('PaginationSvc', [function(){
return {
testFunction:testFunction
};
function testFunction(){
console.log('This is from pagination module');
}
}])
Maybe a little plnkr will help :D
You can't inject a controller in a controller. Your pagination module need to declare a service or factory or provider wich will be be injected in your controller.
See docs here.
You should create a pagination directive and insert that where you need it. You might get some good ideas from this post.
Related
I am getting the famous Unknown provider error with my node app and can't figure out why.
app.js
var app = angular.module('citigraph', ['addCtrl', 'mygservice', 'stationservice']);
addCtrl.js
var addCtrl = angular.module('addCtrl', ['mygservice', 'rzModule', 'chart.js', 'stationservice']);
addCtrl.controller('addCtrl', function($scope, $http, $rootScope, gservice, stationservice){ ... }
stationservice.js
angular.module('stationservice', []).service('mystationservice', function($http){ ... }
The error in detail:
Error: [$injector:unpr] Unknown provider: stationserviceProvider <-
stationservice <- addCtrl
It looks like you are not using modules correctly. Use a single module name and reuse that module. You can retrieve it again by name if you omit the 2nd set of parameters.
You could create multiple modules but that is generally done when you want to group multiple items together as a piece of functionality.
app.js
// add common external dependencies to this module to the [] array
var app = angular.module('citigraph', []);
addCtrl.js
// add controller to same module
var app = angular.module('citigraph');
app.controller('addCtrl', ['$scope', '$http', '$rootScope', 'gservice', 'stationservice', function($scope, $http, $rootScope, gservice, stationservice){ ... }]
stationservice.js
// add service to same module
angular.module('citigraph').service('mystationservice', ['$http', function($http){ ... }]
Modify your code as below. I think there is some mix up here. Why do you need create two modules for application if they can be combined together.
app.js
var app = angular.module('citigraph', []);
addCtrl.js
var app = angular.module('addCtrl');
app.controller('addCtrl', function($scope, $http, $rootScope, gservice, stationservice){ ... }
stationservice.js
angular.module('citigraph').service('mystationservice', function($http){ ... }
Please refer Angular JS official documentation https://docs.angularjs.org/guide/di for more information.
Similar to this question: How to create separate AngularJS controller files?
I have a module that has controllers in several files, including controllers that are linked to directives. Where can I declare a factory such that it can be injected into all of them easily?
For example, in app.js I define the app level module
var app = angular.module('myApp', ['ngRoute']);
I would then expect to be able to define a factory in app.js like
app.factory('myFactory', function() { return { myThing: myThing}; });
And then be able to inject it into a controller that looked like
angular.module('myApp')
.controller('Ctrl1', ['$scope', '$http', 'myFactory',
function ($scope, $http, myFactory) {}]);
But I get the error Error: [$injector:unpr] Unknown provider:
Is there a way to do this?
I'm newbie in Angular, so will be glad if you can help me.
I split my logic on 2 files (controllers and services).
My services code:
(function () {
'use strict';
angular
.module('app', [])
.factory('authservice', authservice);
authservice.$inject = ['$http', '$logger'];
function authservice($http, $logger) {
return {
signInOwner: signInOwner,
signUpOwner: signUpOwner
};
function signInOwner(owner) {
}
function signUpOwner(owner) {
}
};
})();
My controller code:
(function () {
'use strict';
angular
.module('app', [])
.controller('SignUpController', SignUpController);
SignUpController.$inject = ['authservice'];
function SignUpController (authservice) {
var vm = this;
}
})();
I include my services.js before controller.js but still got error about wrong authservice dependencies
angular.js:14362 Error: [$injector:unpr]
Could you help me, please?
Using this synthax angular.module('app', []), you are overwriting the module creation.
You should use angular.module('app') to retrieve it instead.
[] should be use only once: at the creation of the module.
From the Angular module doc:
Beware that using angular.module('myModule', []) will create the
module myModule and overwrite any existing module named myModule. Use
angular.module('myModule') to retrieve an existing module.
In your controller code replace:
angular
.module('app', [])
.controller('SignUpController', SignUpController);
for
angular
.module('app') // notice the lack of [] here!!
.controller('SignUpController', SignUpController);
This is because with the [] it means you're creating the module and without it it means you're locating the module. Since the module was created when your where creating your service, you don't need to create it again, just locate it.
So I am somewhat new to angular, but not javascript. I am working with an app someone else wrote and am trying to create a new controller in an existing module. The controllers are almost identical to each other as far as dependencies go. The question I have is how do I pass the same dependencies to both controllers? It seems like you would be able to pass them in like this:
`angular.module('ApertureForm', ['dialogs.main','dialogs.default-translations','ui.bootstrap'])`
When I do that for both modules, the controller returns undefined for whatever reason. Thats where I get stuck. How do you pass in dependencies such as the above code? Any advice would be great.
angular.module('ApertureForm', ['dialogs.main','dialogs.default-translations','ui.bootstrap']) tells AngularJS to initialize an Angular module named ApertureForm and also load other Angular modules as dependencies for the module.
To add dependencies to a controller, you do something like the following:
angular.module('ApertureForm').controller('ControllerName', function($scope, $location, $timeout) {...});
angular.module('ApertureForm') = Get the module named ApertureForm.
Then create a controller called ControllerName. The closure is where you inject dependencies.
To prevent a controller's dependencies from getting renamed on minification, you can do:
angular
.module('ApertureForm')
.controller('ControllerName', ControllerName);
ControllerName.$inject = ['$scope', '$location', '$timeout'];
function ControllerName($scope, $location, $timeout) {...}
Docs: https://docs.angularjs.org/guide/di
In angular.module('ApertureForm',[ you list the modules you want to inject to your module. You list in once for each module you have. If You want to create a controller in one of your modules, then your can use:
var myApp = angular.module('ApertureForm');
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
$scope here is a dependency for controller
You can read more about it here
AngularJS Controllers and Dependency Injection:
angular
.module('ApertureForm', ['dialogs.main','dialogs.default-translations','ui.bootstrap'])
.controller('FormController', ['$scope', '$http', function($scope, $http) {
// FormController code...
}])
.controller('WebinarController', ['$scope', '$http', function($scope, $http) {
// WebinarController code...
}]);
Thanks to everyone for the help! All of it was very useful in learning the structure of angular and how to properly use the framework. #Yosvel Quintero was able to explain how the module works and why I was getting the error. When dependencies are passed into the module, not the controller, they are available to all controllers as it the module it's self is now aware of the dependencies, which is why I kept getting errors trying to pass them again. Hopefully the answers given in response to the question can help someone learn angular as well. Thanks guys!
I have ng-grid as a dependency when defining the app:
var app = angular.module('myApp', ['ngGrid']);
But not all my views and controllers need ngGrid, so I was thinking if it could be possible to load and inject ngGrid into the app while defining the controllers which need it?
I tried somthing like this, but it didn't work:
app.js:
var app = angular.module('app',[]);
ProductListCtrl.js:
define(['app', 'ng-grid'], function (app) {
'use strict';
app.register.controller('ProductListCtrl', ['$scope', 'ngGrid', function ($scope) {
name = $injector.get('ngGrid')
$scope.name = name
}]);
});
Any suggestions?
angularAMD provides an ngload RequireJS plugin allowing you to load existing AngularJS modules. Add ngload to your main.js then do:
define(['app', 'ngload!ng-grid'], function (app) { ... }
See documentation for more detail.