Develop Reference

Unknown provider with 2 Services

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.

Passing dependencies to a module angular

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!

Angular not rendering templates what is main and common

I was trying to get some angular code to work and it seems that i am not quite understanding some of the syntax.
var mainModule = angular.module('main', ['common']);
What is the importance of "main" is that specific to something?
What is "common"?
I DO reference the angular latest js and app.js in layout.cshtml
I do not get any errors in chrome console.
My index.cshtml looks like
<div data-ng-controller="indexViewModel">
<h1>{{ topic }}</h1>
here is my app.js
var mainModule = angular.module('main', ['common']);
mainModule.controller("indexViewModel", function (
$scope, $http, $q, $routeParams, $window, $location, viewModelHelper) {
var self = this;
$scope.topic = "Tasks";
$scope.author = "Tom";
console.log("test");
});
(function (myApp) {
var viewModelHelper = function (
$http, $q, $window, $location) {
var self = this;
return this;
};
myApp.viewModelHelper = viewModelHelper;
}(window.MyApp));
Update:
Yes, my body tag was missing ng-app
<body data-ng-app="main">
Now i get the error with angular 1.5.6
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module main due to:
Error: [$injector:modulerr] Failed to instantiate module common due to:
Error: [$injector:nomod] Module 'common' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Update 2:
OK , i see I NEEDED to have common defined since i called it that:
var commonModule = angular.module('common', ['ngRoute']);
var mainModule = angular.module('main', ['common']);
HOWEVER, getting this error now
angular.js:13642 Error: [$injector:unpr] Unknown provider: viewModelHelperProvider <- viewModelHelper <- indexViewModel
http://errors.angularjs.org/1.5.6/$injector/unpr?p0=viewModelHelperProvider%20%3C-%20viewModelHelper%20%3C-%20indexViewModel
at angular.js:68
Update 3 FIXED
I needed to add in this factory code
commonModule.factory('viewModelHelper',
function ($http, $q, $window, $location) {
return MyApp.viewModelHelper(
$http, $q, $window, $location);
});

The ng-app directive tells AngularJS that this is the root element of the AngularJS application.
You can only have one ng-app directive in your HTML document. If more than one ng-app directive appears, the first appearance will be used.
So, in angular.module('main', ['common']), main is the value of ng-app directive and common is the dependency on which your module main depends.
Take an example of routing, we inject the dependency ngRoute in the angular.module for routing of application.
Syntax : angular.module('main', ['ngRoute'])
Here, main is depends on ngRoute because without ngRoute module angular can not perform routing.

angular.module('main', ['common']) - main is the name of your module - you will later use it in HTML as the value of ng-app, and ['common'] is another module that your module depends on.
Make sure you defined ng-app="main" in your html. this is the first thing you need to define before you declare any controller
make sure you include angular.js as a script in your html (<script src="path/to/angular.js"></script>)?

how to call a function from module dependency (another module)

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.

Create a Reusable AngularJS provider/directive/factory, etc

I am attempting to create a number of AngularJS libraries that can be re-used across apps and modules. I thought i was doing everything correctly but am still having a problem.
First I create a file that defines a generic module (app.ui) and attaches a provider (LayoutManager) to it ... (I am using a jQuery plugin called "jQuery Layout". This provider allows the app to access and manipulate the layout parameters. I don't want to get hung up on the details of the plugin however. The question is more general, but thought I should at least provide some explanation)
angular.module("app.ui", [])
.provider('LayoutManager', [function () {
'use strict';
var appLayout = $('body').layout(),
moduleNavLayout = $('.module-nav-container').layout(),
moduleLayout = $('.module-content-container').layout();
return {
$get: function () {
return {
ApplicationLayout: appLayout,
ModuleNavigatonLayout: moduleNavLayout,
ModuleContentLayout: moduleLayout
}
}
}
}]);
Then I identify the module (app.ui) as a dependency of the "app" (ListMgrApp) I want to use it in.
angular.module("ListMgrApp", ["ui.router", "app.services", "app.ui"])
Then I inject (is that the correct terminology?) the specific provider (LayoutManager) into the application ...
angular.module("ListMgrApp", ["ui.router", "app.services", "app.ui"]).
config(['$stateProvider', 'LayoutManager',
function ($stateProvider, layout) {
'use strict';
// initialization code goes here
}]);
While it appears that the code inside the LayoutManager provider DOES execute, which I believe is due to it being included as a dependency for the app, I am still getting the following error from the application when it runs.
Uncaught Error: [$injector:modulerr] Failed to instantiate module ListMgrApp due to:
Error: [$injector:unpr] Unknown provider: LayoutManager
I have verified that the source code for all required files are being successfully down loaded.
What am I missing?
RESOLUTION
Thanks elclanrs for the answer! I just wanted to add what exactly I updated to make it work.
I added "Provider" to the name of the provider (LayoutManager) in the config() method of the app (ListMgrApp). I had originally thought I was supposed to also change the name of "LayoutManager" in the provider code but misread the original solution comment. Only change the name in the app config() method. I thought I would point it out here just in case someone else was a "skimmer" and missed it.
angular.module("ListMgrApp", ["ui.router", "app.services", "app.ui"]).
config(['$stateProvider', 'LayoutManagerProvider',
function ($stateProvider, layout) {
'use strict';
// initialization code goes here
}]);